javascript

【javascript】連想配列から特定のキーに紐づく1配列のみ抽出する

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

【はてなブログ】長いコードを折りたためるようにする

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

【pug】javascriptを直接書く方法

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

【javascript】【php】原始的な方法でフロントエンドとバックエンドのデータ連携について考える

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

【Vue.js】テンプレート内で静的な画像を読み込む

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

Hot Module Replacement is disabled.の対処方法

フロントエンドの開発にwebpackを使用する場合、一緒に開発用にwebサーバーも立てる場合があります。 サーバーの建て方も色々ありますが、webpackの公式のライブラリであるwebpack-dev-serverを使う機会が多いのではないでしょうか? GitHub - webpack/webpa…

©︎2017-2018 WebSandBag