Alpine.jsって何？

私は、Webアプリを作成する際、特に問題がなければPython/Djangoを選択します。Djangoを利用したWebアプリでHTMXを利用することもあります。その組み合わせの中で、Alpine.jsを利用する話を聞くことがあります。

「Alpine.jsって何？」と感じたので、軽く調べてみました。今回はその調べた内容を共有します。

Alpine.jsって何？

Alpine.jsは、クライアントだけで完結するUI操作を担当できるライブラリです。HTMXは、クラウアントだけで完結しないサーバーとのやり取りを得意としていますが、サーバーに問い合わせるほどでもない小さなインタラクションには、Alpine.jsが活用できます。

例えば次のような操作が対応します。

• ドロップダウンメニュー
• モーダルの開閉
• タブの切り替え
• アコーディオンの展開/折りたたみ

Alpine.jsを利用すると、 x-show, x-on:click, x-data といったHTML属性を書くだけでこのような操作を実現できます。

<!-- Alpine.jsでのトグル例 -->
<div x-data="{ open: false }">
  <button x-on:click="open = !open">メニュー</button>
  <ul x-show="open" x-transition>
    <li>項目1</li>
    <li>項目2</li>
  </ul>
</div>

Alpine.jsでは x-data を付けた要素が一つの「コンポーネント境界」になります。その子孫要素から状態にアクセスできます。つまり、x-data="{ open: false }" で、open というリアクティブな状態を false として初期化しています。

次に x-on:click はクリックイベントです。x-on:click="open = !open" は open の真偽値を反転させています。

x-show="open" は open が true のときだけ要素を表示する宣言です。 display: none の切り替えで表現されるので、DOMから要素が削除されません。

x-transition は表示・非表示の切り替え時にCSSトランジションを付与する宣言です。細かく制御したい場合は x-transition.duration.300ms のような修飾子を指定します。

公式ドキュメントはこちら

https://alpinejs.dev/