インタラクティブな動作を簡単に実装!超軽量のJSフレームワーク「Alpine.js」を使ってみよう

こんにちは、ユアサです。
今回は、Vue.jsよりも軽量で簡単に実装できるAlpine.jsを使ってみます。

Alpine.jsについて

Vue.jsに比べかなり軽量なJSフレームワークです。HTMLタグに直接記述して動的な動きを付与できる、誰でも簡単に触れるフレームワークとなっています。
公式サイトでは「マークアップ内で直接動作を作成するための堅牢で最小限のツールです。現代の Web 向けの jQuery のようなものだと考えてください。」と紹介されていますが、jQueryのような挙動を再現できるという例えで記述するものはJSになります。

またAlpine.jsを使うための要素は15個の属性と6つのプロパティ、2種類のメソッドの計22個だけとなっており、覚えることも少ないので非常に簡単です。

↓公式サイトはこちら alpinejs.dev

基本的な実装方法について

公式サイトに記述されているチュートリアルのコードを参考にしましょう。cdnあるいはnpmでAlpine.jsをインストール後、以下のように記述します。

See the Pen alpine_base by felly (@felly00505) on CodePen.

上記のように、Alpine.jsの属性の記述をHTMLの要素に直接追加することで実装できます。

上記コードの場合、空のh1タグにx-datax-textというものが付与されており、x-dataでは変数などの状態の指定を、x-textでは付与した要素にテキスト内容を動的に更新する指定ができます。つまり上記コードは「x-dataで指定した変数の値をx-textで呼び出して出力している」という状態になるので、空のh1でも動的にテキストを表示できるわけですね。

今回の記事では、Alpine.jsを採用したらほぼほぼ使うことになるであろう属性の、特に使い所が多そうなものを使っていくつか動作を実装してみたいと思います。

アコーディオン

例えばコーディングでよく制作するアコーディオンも、Alpine.jsで簡単に再現することができます。

See the Pen alipine_toggle by felly (@felly00505) on CodePen.

質問テキストをクリックすると答案テキストが表示されるアコーディオンですが、冒頭で紹介したx-data以外にx-onx-showという属性が確認できます。

質問テキストの要素に付与されているx-onは特定のイベントに対して実行する内容を記述することでその動作を実装でき、例えば上記コードのようにx-on:clickと記述すると「この要素がクリックされた時」をトリガーとして動作を実装できます。
答案テキストの要素に付与されているx-showはその要素の表示・非表示を制御することができます。

上記コードの流れを確認すると、x-dataで変数openを指定、x-on:clickで「もしこの要素がクリックされた時、変数openの値をtrueからfalse、あるいはfalseからtrueへ切り替える」、x-showで変数openの値を確認し、trueだった場合に答案テキストの要素を表示させる・・・といった内容になります。

診断ツール

簡易的なものになりますが、アコーディオンで使用していたx-onx-showを応用すれば診断ツールも制作できます。

See the Pen alpine_slide by felly (@felly00505) on CodePen.

コードを見ればお分かりいただけるかと思いますが、x-onの動作は一つに限らず複数記述できます。「Aを押したらAを非表示にし、Bを表示させる」という動作になるようにまとめて記述しています。

しかし上記のようにx-on内でまとめて複数の動作を記述した場合は同時に動作してしまうので、ある程度の間を置いて滑らかに動くとより良いですよね。Alpine.jsではx-transitionでアニメーションも実装でき、例えばx-transition.duration.(数字・単位)のように記述するとアニメーションの速度を指定でき、x-transition.delay.(数字・単位)と記述するとアニメーションを遅延させる指定ができます。
またx-transition:enterと記述するとその要素の表示させる際のアニメーションの指定をすることができ、x-transition:leaveはその逆で非表示にさせる際のアニメーションの指定ができます。アニメーションも細かく設定できるので意外と痒い所まで手が届くんですね。

フォームのバリデーション

なんとバリデーションも実装できます。しかも簡単に。至れり尽せりですね・・・。

See the Pen alpine_validate by felly (@felly00505) on CodePen.

このコードではx-on:blurと新しい属性x-modelが記述されています。

x-on:blurではフォーカスが取り除かれた時の動作を実装でき、このコードでは各入力項目ごとに「validation○○」という名前の関数を呼び出す動作が指定されています。
それぞれの関数内でバリデーション内容が記述されており、例えばお名前の入力項目の場合はもしバリデーションチェックに引っかかった場合にお名前用変数にエラーメッセージを代入、その後x-show="errors.name"でerrors配列内のnameに値があるか判定してx-textでエラーメッセージを動的に表示させる動作になっています。

またx-modelは入力要素の値をAlpineデータにバインドすることができます。例えばお名前の入力項目の場合、x-model="name"となっているので、入力項目に入力された値を「入力された内容」の箇所のx-show="name"に表示させる動作が実装されています。

まとめ

Alpine.jsの一部の属性を使っていくつかWebページの機能を制作してみました。実装が簡単な上にVue.jsよりも軽量なので魅力的ですよね。
ただまだまだ若いフレームワークなので、Vue.jsやReactなどの競合に比べるとまだしっかりとした保守性が保証されていないので、大型プロジェクトにはどうしても実用段階には至っていないのかなという印象でした。ローカルで試しに手軽に動作チェックをしたい場合や期間限定のLPや小型プロジェクトでは使えるかもしれませんね。
また今回の記事以外にもまだ属性はある上に様々な応用方法があるので、色々いじってみると面白そうです。