これはまた、おもしろいjsフレームワークかもしれません。Alpine.js(アルパインジェイエス)を試してみました

しばらく、当サイトでは Vuetify や Vue.js 関連の記事を多く書いてきましたが、
新しく試してみたいものを見つけてしまいました。

最近、Web関連の検索をしていると、その名をたびたび目にする機会が増えてきた、Alpine.js です。

公式ページはこちら。
Alpine.js

何ができるスクリプト？

公式には、以下の様に書いてあります。

Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the modern web.

（意訳： Alpineは、マークアップで直接的に挙動を構成するための、たくましく、そして最小限のツールです。モダンなWeb制作用の、言うなればjQueryのように考えてください。）

…と公式に記載がある様に、html要素に直接Alpine.js独自の記法でマークアップを行うことで、
簡単に要素を表示/非表示したり（toggle操作したり）、いろいろエフェクトをつけたりする事ができる、というものです。

また、こちらのリンク先のドキュメント（version2.xのドキュメント。現在の最新版はバージョン3.2.4です。※この記事執筆時の10日前にリリースされたバージョン）にある様に、

このツールのシンタックスは、ほぼ完全に Vue（それと、Angular による拡張）から借用しています。ウェブからの賜り物に感謝しています。

…との事で、Vue.js にとても影響を受けて制作されたライブラリの様です。

その証拠というか、そのまま言葉通りというか、
Vue.jsが得意とする、双方向のデータバインディングっぽい事もできます。
つまり、フロント側で、同一ページ上のあらゆる要素からアクセス可能な data を定義しておき、
その data をUI操作で増減させたり、値を更新したりすることも得意としているライブラリです。

さて、前置きはこのくらいで。何はともあれ、実際に見てみないと始まらないですよね。

今回、この記事を書くにあたり、Alpine.js を使って簡単なサンプルを作ってみました。
あんまりちゃんとcssで装飾はしていないんですが、ドロップダウンやtab切り替え型のUIが、割と簡単な記述で（というか、本当にVue.jsっぽい記述で）作成できてしまいます。
次のセクションより、コードを記載していきます。

Alpine.jsのはじめかた

CDN経由ではじめる

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

↑これを、headタグの閉じタグ直前に記述します。

CLI経由で、プロジェクトに組み込んではじめる

npm install alpinejs

↑該当のプロジェクトディレクトリに移動(cd, change directory)して、
これをターミナルから実行。（こちらの方法は、npmの導入が済んでいる前提で書いています。）

お試しではじめるのならCDN経由で。お好みで、CLI経由で。と言ったところです。

Alpine.jsのサンプルコード

さて、Alpine.js の読み込みが済んだところで、
今回はサンプルとして、ドロップダウンメニューを作ってみました。そのサンプルコードです。
この様に、htmlの中に直接 Alpine.js の記法で、挙動を書き込んでいくことができます。
styleに関しては、サンプルなので直書きです。

<div x-data="{ mytrigger: false }">
  <button @click="mytrigger = !mytrigger" style="width: 375px; background: hsl(190deg 70% 50%);">MENU OPEN</button>
   <div
     x-show="mytrigger"
     x-transition:enter.opacity.duration.200ms.origin.top.left
     x-transition:leave.opacity.duration.400ms.origin.top.left
   >
      <ul style="border: 1px solid hsl(190deg 70% 50%); padding: 0 1rem; width: 375px; margin: 0 0;">
        <li class="list-child">Vue.js</li>
        <li class="list-child">Vuetify</li>
        <li class="list-child">Alpine.js</li>
        <li class="list-child">Simple</li>
        <li class="list-child">Lightweight</li>
      </ul>
    </div>
  </div>

…見ていただけばわかると思うのですが、
2行目の @click だとか、
4行目の x-show だとか、
Vue.js によく似ていますよね。

実際にふれてみた感覚としても、Vue.js ぽい構造をしているように感じられました。
ですので、Vue.js をある程度知っている方なら、難なく使いこなせるはずです。

こちらの Alpine.js ですが、
この x-show をはじめ、

• ・15個の属性
• ・6個のプロパティ
• ・および2個のメソッド

で構成されているとの事です。
それぞれの解説は、今回は割愛します。
今回は、まずは次の動画で、どんなものを作る事ができるのかを見てみてください。
※なお x-show などの、細かな解説は次回以降の記事で行う予定です。

上記のコードで、こんな感じのドロップダウンメニューが作れます。

↑開閉処理はボタンに定義されている@clickで、dataのtrue/falseを切り替えることで動作しています。

実際に動くサンプル

上記のサンプルを実際にクリックして操作できるものを作成してあります。次のリンクよりご覧いただけます。

Alpine.js のサンプル
↑なおこのサンプルページには、上記のドロップダウンメニューのサンプルのほか、
その下には Alpine.js を使ったtab切り替え型のUIが作成してあります。
そちらについては、今後の記事でご紹介できればと思っています。

この記事のまとめ

今回は、Vue.jsによく似た記述で、
比較的簡単に、html上の要素の見た目や挙動を制御することができるjsフレームワーク、
Alpine.js
の導入方法と、コードの簡単なサンプルを書いてみました。

公式サイトでも言及されていますが、
シンプルかつたくましい、こちらのAlpine.js。

実際に使ってみたところ、Vue.js 同様に、
フロントエンド側でのdata更新も行うことができる、とのことで
なかなか魅力を感じました。

当サイトでは Vuetify や Vue.js に関する話題を取り上げることが多いですが、
こちらの Alpine.js に関する記事についても今後、書いていきたいと思っています。