2022年5月24日SHAREツイートシェアはてブLINEPocket軽量JavaScriptであるAlpine.jsをつかってハンバーガーメニューを実装する方法を紹介します。Alpine.JSではJavaScriptファイルにロジックを記述するのではなく、HTMLの属性としてJavaScriptのロジックを書いていくことになります。VueやAngularに近い書き方ですね。jQueryを使わずとも簡単にハンバーガーメニューが実現できるので是非取り入れてみてください。ハンバーガーメニューの完成デモまずはハンバーガーメニューのデモになります。HTMLとCSSとAlpineJSで実装しています。デモのボタンをクリックするとメニューが開き、もう一度押すとメニューが閉じます。スマホサイトでは頻出する定番のUIになります。CodePen.Alpine.jsの実装内容を解説Alpine.jsのCDNを読み込みます。Alpine.jsのプログラムをCDN経由で読み込んでいきます。これを読み込まないと動作しないので注意してください。defer></script>AlpineJSのソースコードHTML内にAlpineJSのコードを記述していきます。いう属性を追加しています。いう属性を追加しています。class="menu__item">CONTACT</div></div></body>x-dataでコンポーネント(要素)にプロパティ(データ)を持たせます。今回は、一番親のbodyタグを大きなコンポーネント(要素)として、そのbodyタグにopenという名前のキーを持たせます。キーの値はfalseです。value})でコンポーネントにはデータを持たせていきます。openはメニューの閉じ開きの状態を保存させておくデータです。falseは閉じている状態、trueは開いている状態です。x-on:click=”open=!open”でボタンをクリックするたびにopenの状態を切り替えます。x-onはjavascriptのaddEventListener、jQueryでいうonメソッドと同等です。コロン(:)でつなぐことでその後にイベント名を記述できます。今回はclickイベントです。入れて現在のopenの真偽値をいれかえます。toggle処理と同じことをしています。}”でopenの値に応じてメニューにクラスを付与します。x-bindはHTMLの属性をAlpineJSのデータ処理と紐づけることができます。コロン(:)でつなぐことでその後にHTMLの属性名を記述できます。今回はclass属性です。openの値がtrueの時にis-activeがclass属性に適用されるという意味です。falseの時は適用されません。コンポーネントのデータと連動して属性を切り替えています。VueやReactのコンポーネントでも同じですユーザーのアクション(イベント)によってコンポーネントの状態を切り替える。コンポーネントの状態が変わることで見た目も変わる。この考え方はVueやAngular、Reactなどの昨今のjavascriptフレームワークで用いるコンポーネント指向と同じものになります。活用していってください。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。