Alpine.jsでドロップダウンメニューをスクラッチから作成(Alpine.jsの基礎)| アールエフェクト

Alpine.jsはドロップダウンメニューやタブの切り替え、モーダルなどの機能をVue.jsやReactなど利用せず手軽に実装したい場合に利用できるJavaScriptのフレームワークです。実際に利用してみるとその手軽さを実感することができます。

JavaScriptのフレークワークということでVue.sjやReactとは別の新しいフレークワークをまた一から学習しなければと不安になる人もいるかもしれませんがVue.jsやReactなどを代替するものではありません。むしろjQueryやVanilla JavaScriptの代替となるものです。Vue.jsやReactを学習している人ならより手軽さを感じられると思うので一度はAlpine.jsの動作を確認してみてください。

本文書ではLaravelフレークワークでも利用されているドロップダウンメニューの作成に必要なAlpine.jsの基礎を説明し実際にスクラッチからドロップダウンメニューを作成します。

1 Alpine.jsを使うための準備
2 初めてAlpine.js
3 実践編ドロップダウンメニューを作成

Alpine.jsを使うための準備

index.htmlファイルを作成してcdnを使ってalpine.jsをロードします。これでAlpline.jsを使うための準備は完了です。何か特別な環境を構築することなく手元の環境で利用することができます。既存のhtmlファイルにちょっとした動きを入れたい時にも利用することができます。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script
    defer
    src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"
  ></script>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

初めてAlpine.js

Alpine.jsを使ってindex.htmlファイルにあるh1タグで表示されているHello Worldを表示させてみましょう。

divタグを追加しx-data属性を設定します。Alpine.jsのドキュメントでは”x-dataは新しいコンポーネントスコープを宣言します”と記述されていますがもし意味がわからなければAlpine.jsを利用するために必須な宣言と理解しておきましょう。x-dataの中では、messageにHello Worldを設定しているのでx-dataを設定したdivの内側であればこのmessageプロパティを自由に利用することができます。


<body>
  <div x-data="{message: 'Hello World'}"></div>
</body>

messageをブラウザに表示させるためにx-textディレクティブを追加します。x-textにmessageを設定することでh1タグにmessageの内容が挿入され表示されます。


<div x-data="{message: 'Hello World'}">
  <h1 x-text="message"></h1>
</div>

ブラウザで確認するとmessageに設定されたHello Worldが表示されます。

x-dataのdivの内側(スコープの範囲）であれば複数のv-textを利用してもmessageを表示させることができますがその範囲外になるとv-textは利用できません。


<body>
  <div x-data="{message: 'Hello World'}">
    <h1 x-text="message"></h1>
    <h1 x-text="message"></h1>
    <h1 x-text="message"></h1>
  </div>
  <h1 x-text="message"></h1>
</body>

ブラウザで見るとスコープ内の3つのHello Worldが表示されスコープの範囲を超えたx-textは表示されないことが確認できます。

さらに1つのHTMLページの中に複数のx-dataを宣言することも可能です。messageに異なる値を設定しています。


<body>
  <div x-data="{message: 'Hello World'}">
    <h1 x-text="message"></h1>
  </div>
  <div x-data="{message: 'Hello Alpine.js'}">
    <h1 x-text="message"></h1>
  </div>
</body>

messageに対してStringとしてJavaScriptのメソッドを実行することも可能です。


<h1 x-text="message.split('').reverse().join('')"></h1>

clickイベントの設定

clickイベントを利用して他の処理を行うことができます。ここではclickイベントを検知してmessageの文字列を別の文字列で上書きします。button要素を追加しclickイベントに対してイベントリスナーを設定することができます。clickイベントを設定する時はx-on:をclickの前に追加します。


<div x-data="{message: 'Hello World'}">
  <h1 x-text="message.split('').reverse().join('')"></h1>
  <button x-on:click="message = 'Hello Alpine.js'">クリック</button>
</div>

最初はHello Worldが逆に表示されいますがボタンをクリックするとmessageがHello Alpine.jsで上書きされます。

クリックイベントの設定をx-on:clickと記述しましたが@clickと記述することもできます。clickイベントを利用することでユーザはインタラクティブな処理を行うことができるようになります。


<button @click="message = 'Hello Alpine.js'">クリック

clickイベントとx-showの設定

Alpine.jsはclickイベントを使って要素の表示・非表示に利用することができます。表示・非表示といえば思い浮かぶのはドロップダウンメニューやモーダルなどではないでしょうか。

Alpine.jsでは要素の表示・非表示はx-showディレクティブを利用して制御します。x-showにはtrue or falseのbooleanを設定します。x-showの値がtrueであれば表示、falseであれば非表示となります。

x-dataの中でisShowプロパティを設定しtrueとします。h1タグにx-show=”isShow”を設定していますがisShowがfalseなのでh1タグは表示されません。


<div x-data="{isShow: false}">
  <h1 x-show="isShow">Hello World</h1>
</div>

isShowの値をfalseからtrueに変更するとHello Worldがブラウザに表示されます。


<div x-data="{isShow: true}">
  <h1 x-show="isShow">Hello World</h1>
</div>

clickイベントを使ってmessageの文字列を上書きできたようにisShowの値を更新できるようにclickイベントをボタンに設定します。ボタンを使ってisShowの値をtrueからfalse、falseからtrueに切り替えれるように設定を行っています。


<div x-data="{isShow: false}">
  <h1 x-show="isShow">Hello World</h1>
  <button @click="isShow = !isShow">表示・非表示</button>
</div>

最初はisShowがfalseなのでボタンのみが表示されている状態です。

”表示・非表示”ボタンをクリックするとHello Worldが表示されます。

ボタンにv-textと三項演算子を利用することでisShowの値によってボタンに表示される文字も切り替えることができます。


<button @click="isShow = !isShow" x-text="isShow ? '非表示':'表示'"></button>

Alpine.jsでは特別の初期設定を行うこともなく数行のコードのシンプルなコードの設定だけで表示・非表示を繰り返すことができるToggle機能を実装することが可能です。

非表示の時はstyle属性を利用してdisplya:noneが設定されます。

Intersectプラグイン

Intersectプラグインを利用することでInterSection Observerを利用することができます。InterSection ObserverはViewPortにある要素が入ってきた時に要素が入ったことを検知し事前に設定していた処理を実行することができます。例えばスクロールを行いViewportに入ってきた画像要素を検知してアニメーションを設定するといったことが可能です。

利用するためにプラグインなのでcdnでIntersectプラグインに関係するファイルを読み込み必要があります。


<script defer src="https://unpkg.com/@alpinejs/intersect@3.x.x/dist/cdn.min.js"></script>

x-intersectディレクティブをx-dataのスコープの範囲の内部の監視したい要素に設定して処理を設定します。下記ではx-intersectでshow変数をtrueに更新しています。x-transition.duration.2000msを設定しているので最初非表示になっている要素がViewportに入ると2秒かけて表示されます。


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Alpine Plugins -->
    <script
      defer
      src="https://unpkg.com/@alpinejs/intersect@3.x.x/dist/cdn.min.js"
    ></script>

    <!-- Alpine Core -->
    <script
      defer
      src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"
    ></script>

    <title>Document</title>
  </head>
  <body>
    <div class="m-8">
      <h1>Intersect Plugin</h1>
      <p style="margin-bottom: 1000px">Scroll</p>
      <div x-data="{ shown: false }" x-intersect="shown = true">
        <div x-show="shown" x-transition.duration.2000ms>
          I'm in the viewport!
        </div>
      </div>
    </div>
  </body>
</html>

I’m in the viewportを文字列から画像に変更するとスクロールして画像の要素がViewportに入るとゆっくりと画像が表示されるアニメーションを作成することができます。ホームページで頻繁に利用されているアニメーションもalpine.jpを利用することで簡単に実装することができます。

実践編ドロップダウンメニューを作成

ここまでのAlpine.jsの機能を利用してAlpine.jsが頻繁に利用させるドロップダウンメニューを作成することができます。Step By Stepでドロップダウンメニューを作成していきますがCSSにはtailwindcssを利用します。tailwindcssを使うとJavaScriptにおけるAlpine.jsのように手軽にCSSを設定することができます。

ヘッダーとメインコンテンツ領域を作成

ヘッダーの背景色は黒に設定し、classでh-20の高さを設定します。


<body>
  <header class="bg-black h-20">
  </header>
  <main class="m-4">
    <p>ここからがコンテンツ</p>
  </main>
</body>

左側にログ、右側にドロップダウンメニューを表示させるためにflexを利用します。両端に表示させるためjustify-betweenを設定し、items-centerで中央揃えにしています。


<body>
  <header class="bg-black h-20 flex items-center justify-between p-4">
    <div class="text-white font-bold">ロゴ</div>
    <div>
      <button class="text-white">ドロップダウンメニュー</button>
    </div>
  </header>
  <main class="m-4">
    <p>ここからがコンテンツ</p>
  </main>
</body>

ドロップダウンにメニューを追加

ドロップダウンにメニューを追加します。3つのメニューをaタグで追加しています。


<div>
  <button class="text-white">ドロップダウンメニュー</button>
  <div>
    <a href="#">Link1</a>
    <a href="#">Link2</a>
    <a href="#">Link3</a>
  </div>
</div>

aタグはインライン要素なので横並びに表示されていますが背景色が黒でフォントの色もデフォルトの黒なので何も表示されませんがドロップメニューの下には存在しています。

メニューをインライン要素からブロック要素に変更します。メニューの外側のdivに背景色の白を設定します。


<div>
  <button class="text-white">ドロップダウンメニュー</button>
  <div class="bg-white">
    <a href="#" class="block">Link1</a>
    <a href="#" class="block">Link2</a>
    <a href="#" class="block">Link3</a>
  </div>
</div>

メニューが表示されるようになりました。

メニューにabsoluteを設定し基準となる要素である外側の要素にrelativeを設定します。


<div class="relative">
  <button class="text-white">ドロップダウンメニュー</button>
  <div class="bg-white absolute">
    <a href="#" class="block">Link1</a>
    <a href="#" class="block">Link2</a>
    <a href="#" class="block">Link3</a>
  </div>
</div>

ドロップダウンメニューが開い時の状態に近づいてきました。

padding、margin、メニューの横幅、表示位置が右側の0が記述になるように変更します。


<div class="relative">
  <button class="text-white">ドロップダウンメニュー</button>
  <div class="bg-white absolute w-56 right-0 my-2 py-1">
    <a href="#" class="block p-2">Link1</a>
    <a href="#" class="block p-2">Link2</a>
    <a href="#" class="block p-2">Link3</a>
  </div>
</div>

横幅やmargin, paddingを設定したのでよりドロップダウンメニューらしくなりました。

メニューと背景の境界がわかりくいのでshadowを設定し、hoverを設定してマウスが上にきた時は背景色が変わるように設定します。


<div class="relative">
  <button class="text-white">ドロップダウンメニュー</button>
  <div class="bg-white absolute w-56 right-0 my-2 py-1 shadow-lg rounded-md">
    <a href="#" class="block p-2 hover:bg-gray-100">Link1</a>
    <a href="#" class="block p-2 hover:bg-gray-100">Link2</a>
    <a href="#" class="block p-2 hover:bg-gray-100">Link3</a>
  </div>
</div>

ここまででドロップダウンメニューのCSS設定は完了です。

Alpine.jsの設定

ドロップダウンメニューをクリックするとメニューが表示・非表示を切り替えられるようにAlpine.jsの設定を行います。

ドロップダウンメニューの外側のdiv要素にx-dataを追加してisOpenプロパティを追加します。


<div class="relative" x-data="{ isOpen:false }">
  <button class="text-white">ドロップダウンメニュー</button>
  <div class="bg-white absolute w-56 right-0 my-2 py-1 shadow-lg rounded-md">
    <a href="#" class="block p-2 hover:bg-gray-100">Link1</a>
    <a href="#" class="block p-2 hover:bg-gray-100">Link2</a>
    <a href="#" class="block p-2 hover:bg-gray-100">Link3</a>
  </div>
</div>

メニューの外側のdiv要素にx-showでisOpenを設定します。


<div class="relative" x-data="{ isOpen:false }">
  <button class="text-white" @click="isOpen = !isOpen">ドロップダウンメニュー</button>
  <div class="bg-white absolute w-56 right-0 my-2 py-1 shadow-lg rounded-md" x-show="isOpen">
    <a href="#" class="block p-2 hover:bg-gray-100">Link1</a>
    <a href="#" class="block p-2 hover:bg-gray-100">Link2</a>
    <a href="#" class="block p-2 hover:bg-gray-100">Link3</a>
  </div>
</div>

x-dataのisOpenの値がfalseの場合のみメニューが非表示になるか確認してください。次はtrueにしてメニューが表示されればAlpine.jsは正常に動作しています。

ドロップダウンメニューをクリックすると表示・非表示が切り替わるようにclickイベントを設定します。

最初はメニューが閉じているのでクリックすると表示されます。

再度クリックするとドロップダウンメニューが非表示になります。

クリックした際にボタンの外側にラインが表示されるので表示しないようにbutton要素にoutline-noneのclassを設定します。


<div class="relative" x-data="{ isOpen:false }">
  <button class="text-white focus:outline-none" @click="isOpen = !isOpen">ドロップダウンメニュー</button>

away modifierの追加

設定したドロップダウンメニューはドロップダウンメニューボタンをクリックすると表示・非表示が切り替わります。x-dataの範囲外でクリックするとメニューが閉じるようにaway modifierを設定します。


<div class="relative" x-data="{ isOpen:false }" @click.away = "isOpen = false">
  <button class="text-white focus:outline-none" @click="isOpen = !isOpen">ドロップダウンメニュー</button>

開いた状態でドロップダウンメニュー以外の領域をクリックするとメニューが閉じます。

そのほかに@keydown.escapeを設定するとESCキーを押してもメニューを閉じさせることができます。


<div class="relative" x-data="{ isOpen:false }" @click.away = "isOpen = false" @keydown.escape="isOpen = false>

Alpine.jsを使ってドロップメニューの完成です。CSSの調整に時間がかかるだけでAlpine.jsの設定はほとんどなく簡単にドロップダウンメニューが作成できることができました。

アニメーションの設定

ドロップダウンメニューをクリックすると表示・非表示が即座に行われるのでアニメーションを設定してスムーズに切り替えが行えるようにします。x-trantisionディレクティブを利用しますが例がhttps://github.com/alpinejs/alpineに公開されているのでそれらの値を利用します。x-showディレクティブが設定されている要素に追加します。


<div class="relative" x-data="{ isOpen:false }" @click.away = "isOpen = false" @keydown.escape="isOpen = false">
  <button class="text-white focus:outline-none" @click="isOpen = !isOpen">ドロップダウンメニュー</button>
  <div class="bg-white absolute w-56 right-0 my-2 py-1 shadow-lg rounded-md" 
      x-show="isOpen"
      x-transition:enter="transition ease-out duration-300"
      x-transition:enter-start="opacity-0 transform scale-90"
      x-transition:enter-end="opacity-100 transform scale-100"
      x-transition:leave="transition ease-in duration-300"
      x-transition:leave-start="opacity-100 transform scale-100"
      x-transition:leave-end="opacity-0 transform scale-90"
    >
    <a href="#" class="block p-2 hover:bg-gray-100">Link1</a>
    <a href="#" class="block p-2 hover:bg-gray-100">Link2</a>
    <a href="#" class="block p-2 hover:bg-gray-100">Link3</a>
  </div>
</div>

設定後はゆっくりとメニューが表示・非表示されることが確認できます。

x-transtionディレクティブを複数記述しなくても細かな設定必要ない場合は以下のように設定することも可能です。2秒をかけてゆっくりと表示・非表示されます。


x-show.transition.duration.2000ms="isOpen"

設定方法についてはドキュメントにも記載されていますがここにも貼り付けておきます。各値を変更することで最適な値を見つけてください。

以上でアニメーションを入れたドロップダウンメニューのAlpine.jsの設定は完了です。

ドロップダウンメニューを作成を通してAlpine.jsの手軽さが実感できたのではないでしょうか。