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

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

Javascript

Vue.jsのv-ifやv-forで無駄にタグを増やしたくない時はtemplateで代用するのが便利

Vue.jsでの分岐やループ処理 Vue.jsでは分岐やループ処理で、動的にタグを描画したい場面がありますよね。 例えばリストを動的に増やしたい時は、liタグにv-forを付与したり、ある文言が特定の条件を満たした時のみ表示させる場合はpタグにv-ifを付けたりな…

Vue.jsでURLの#(シャープ)を取り除く方法

URLの#(シャープ) Vue-cliでvue.jsのセットアップを行った時、開発環境のURLを叩くと後ろに#(シャープ)が付いてしまいます。http://localhost:8080と入力しても、http://localhost:8080/#/ となってしまいます。これはhashモードという状態で付くものであり…

XSSってどうやって仕込まれる?

XSSについて このページを閲覧している方ならご存知とは思いますが、まずはXSSについて超簡単に説明します。この事象は入力フォームがある画面が狙われるものですが、Javascriptのタグを攻撃者によって画面上に埋め込まれ、ユーザ情報やcookieのセッションが…

SPAサイトのCSRF対策

CSRF対策について CSRFとは? このページに来られた方ならもう理解している方も多いとは思いますが、CSRFについて簡単に説明します。 CSRFはリクエスト強要(CSRF:Cross-site Request Forgery)という意味で、クロスサイト(Cross-site)の名の通り、正規のサイ…

Spring BootのFormクラスでIntegerの項目にNULLはPOSTできない

NULLをPOSTした時点でStringとして認識されてしまう Spring Bootにおけるフォームから値をPOSTする際の挙動になりますが、Integer型の変数にNULLを送信すると以下のようなエラーが発生してしまいます。 Failed to convert property value of type 'java.lang…

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ページを開いた時に、画面を自動スクロールしたい時はありませんか? 例えば写真が一覧で表示されるギャラリーページなど、どこまで続いているのかわからないページでは、手動で一番下までスクロール…