WEB制作 全般 @graph を使った構造化データのメリットと設定方法
Webページの情報を検索エンジンに伝えるために利用される構造化データ。直接HTMLにマークアップして出力することもできますが、多くの場合は JavaScript...
JavaScript
WEB制作 全般 
WEB制作 全般 引数の数が多いときは引数をオブジェクトにする[JavaScript]
なにかしらの処理をする関数があるとして、途中から意図せず引数が増えていってしまう場合があります。function example(paramA,paramB,....
WEB制作 全般 slick.jsで画像のカルーセルをつくるとき、decoding属性があると表示されなかった話
原因の究明も深追いもしていないので、こういう事例があるのだなーぐらいで読んでいただけると幸いです。先日、カラーミーショップの簡易パフォーマンス改善を承り、画像の...
WEB制作 全般 Vueテンプレートのループ覚書
Vuejsのテンプレートで初めてループ処理を書くとき、いくつか引っ掛かったので備忘録としてまとめます。v-forとv-ifを同時に使いたいときv-forとv-i...
WEB制作 全般 Swiperで複数のスライドを連動する方法
Swiperのcontrollerメソッドを使うことで、複数のスライドを同時に動かすことができます。// 3つのスライドをすべて連動させあうサンプルconst ...
WEB制作 全般 配列内の要素すべてが条件に一致しているかチェックするArray.every()
ある文字列が複数の条件にマッチするか調べる良い方法がないかと考えていたら、ARRAY.every()を使うのが一番スマートのようでしたので備忘録。every()...
WEB制作 全般 JavaScriptのレスポンシブ
CSSで@media screenをつかってレスポンシブなデザインを作るように、JavaScriptでもメディアクエリにあわせた設定が可能です。window.m...
WEB制作 全般 select要素のoptionを操作するときのJavaScript
たまに使うと忘れているので自分用メモ。選択されているoption要素のvalueではなく要素自体（テキスト）を取得手順直接optionを指定することはできないの...
WEB制作 全般 objectをkey,valueで呼び出す[JavaScript]
ループの中でオブジェクトをkey、valueで呼出したいときの備忘録です。Object.entries(object)を使うオブジェクトに対して、Object....
WEB制作 全般 【非同期通信】fetchの完了を待って続きの処理を行う
これまでasync / await をなんとなくでしか理解していなかったばかりに盛大に時間をロスしてしまったので反省として記録にまとめます。今後どなたかの役に立...
WEB制作 全般 初心者向け Swiper jsの使い方 覚書
Twitterに勝手に表示されるおすすめ投稿で「Swiperの使い方がわからない！」という叫びと、それに共感する声をたくさん見たので、ざっくりとした基本の使い方...
WEB制作 全般 DOMの変化を監視してくれるMutation Observer
Java ScriptのObserver（監視者） APIにはいくつか種類がありますが、Mutation ObserverはDOMの変更を監視してくれます。単純...