固有な情報を扱う場合、変数（あるいは定数）にしてページの上部に書いて目立つようにするという事をよくやります。 しかし、ファイル間共有する時にこの要領でそれぞれのファイルに追記してしまう方法はお勧めできません。 修正し忘れのファイルがあって事…

連想配列から特定のキーが指定した値に合致した配列のみ取得する方法です。 また、重複しない要素（例えばID等）の場合、結果は0か1のはずです。 そのため、最初一件のみ変数に代入する方法についてまとめます。 元データ [ { "id": 1, "name": "name_1" }, …

pugでは、テンプレート内で変数を指定できます。 Interpolation – Pug ページ毎に変わる要素（title,keyword等）を作る時は、変数に変わる要素を入れて切り替えると言う事をすると思います。 その際、phpをはじめとしたサーバーサイドの値も反映できるように…

技術ブログを書いていると、コードが長すぎてブラウザいっぱいにコードが表示される場合があります。 おそらく、この技術ブログにたどり着いた人はソースコードを読むために来ていただいているとは思いますが、 初見の圧迫感は利用者にとって苦痛なのかなと…

htmlテンプレートにpugを選んだ場合、素のscriptを書こうとすると迷います。 今回は、pugでjavascriptを書く方法について記載します。 また、本記事で記述するコードは、以前投稿したコードです。 blog.websandbag.com 期待される出力結果 下記のように記述…

PHPとjavascriptを扱う案件の場合、フロントエンドとバックエンドの連携が必要になる事があります。 「バックエンドの結果によって表示を出し分ける」程度であれば大した問題ではありません。 <p>有効</p> <p>無効</p> しかし、フロントエンドで、バックエンドの値をに…

かなり初歩的ですが、何時も忘れがちなので備忘録として。 macのファイル削除のショートカットはすぐわかると思うのですが次です。 「cmd」+「delete」 外付けキーボードの場合は、削除キーを押しても削除されません。（ゴッという警告音がなります。） www.…

Vueのコンポーネントを作成する時に、imgタグを使って画像を読み出したい時があります。 動的に画像を指定する前提の場合は、v-bingにパラメータを渡して画像名（画像ファイルのパス）を指定します。 この記事では、静的な画像の指定方法についてまとめます…

HTMLのテンプレートエンジンにpugを使用したのですが、初歩的な事でどハマりしました…。 github.com 私の場合、Laravelで作成したプロジェクトにデフォルト設定される、webpackにpugライブラリを追加していました。 症状 ソース block content block nav inc…

ここ数週間前に、SteamVRのプラグインのメジャーアップデートがありました。 steamcommunity.com アップデートされたことによって、「knuckles」と言うコントローラをサポートしたとの事です。 次世代のコントローラーのライブラリを待ち望んでいた人には、…