親バカエンジニアのナレッジ帳

webのエンジニアをやっており、日頃の開発で詰まったことや書き残しておきたいことを載せています。育児のイロハという育児サイト(https://ikujip.jp)の開発も行っているため、その開発で使用されている技術についても掲載しています。

Javascript

Vue.jsのdataプロパティで配列の変更はspliceで置き換えろ!

dataプロパティで配列の定義 ti-tomo-knowledge.hatenablog.comのページで、Vue.jsではdataプロパティの変更がリアクティブに変化すること、また、それを単なる変数ではなくオブジェクトでも実現させるための方法について説明しましたが、このページではdata…

Vue.jsのdataプロパティでオブジェクトの変更は$setで置き換えろ!

dataプロパティでオブジェクトの定義 Vue.jsでインスタンスを生成した際、dataオブジェクトに変数を定義した場合のリアクティブな動作についてはご存知だと思いますが、テンプレート内でdataオブジェクトに定義した変数を使用していた場合、変数の中身が変更…

ThymeleafでJavascriptエラー(SAXParseException)

Thymeleafでのorg.xml.sax.SAXParseException例外 Thymeleafは構文チェックが厳しく、Javascriptなどをそのまま文中に貼り付けると、以下のようなエラーが発生してしまいページが開けないことがあります。 org.xml.sax.SAXParseException: エンティティ"l"へ…

vue.jsで全ページ共通コンポーネントのまとめ方

コンポーネントでヘッダーやフッターなど、どのページでも共通となる部分をまとめることってありますよね。 Vue.jsではその時、どのようにまとめるのがいいのか自分なりに調べた方法を共有します。 まずは全ページで毎回コンポーネントを書くやり方です。 今…

vue.jsでheadの要素を設定する時はvue-headが便利!

SPAでサイトの実装をすべてJavascriptで行う場合、headの要素までもJavascriptで行わなければいけないですよね。 要素を挿入するだけなのでやり方は色々ありますが、やはりライブラリなどを使用して簡単に実装したいところ。 そこで、vue.jsを使用している場…

WPML Multilingual CMSでリダイレクトされてしまう問題

WPMLはWordPressで多言語対応する時に最も有名なプラグインですね。 僕も業務でこのプラグインを用いた対応を行ったのですが、ブラウザの言語でリダイレクト設定をし、日本語を母国語として設定した状態で他の言語を選択すると1回目はなぜか反映されないとい…

WEBページを自動スクロールさせて、画像をゆっくり見たい!

今回の記事は、非プログラマー向けの記事になります。 WEBページを開いた時に、画面を自動スクロールしたい時はありませんか? 例えば写真が一覧で表示されるギャラリーページなど、どこまで続いているのかわからないページでは、手動で一番下までスクロール…