Alpine.jsでサクッとフロントを構築する
皆様こんにちは塩田です。
今日はサクッと機能的なフロントを構築できる”Alpine.js”をご紹介したいと思います。
公式
このAlpine.jsですが、簡単に説明すると軽量なフロントエンドフレームワークとなるのですが、Vue.jsを（いろんな意味で）シンプルにしたものだと考えていただければと思います。
特におすめなのは、reactやVueを使うほど大袈裟でもないけど、かといってVanillaやjQueryも野暮ったいよなぁ・・・という方です。
主な特徴は
- 導入が簡単
- 学習コストが比較的低い
- お手軽にリアクティブデータバインディングが実装できる
では順番に解説していきます。
1.導入が簡単
Alpine.jsはCDNでサクッと読み込むだけです。
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
Vue.jsでもCDNで読み込むことは可能ですが、CDNだと機能が限定的になるためVue.jsをしっかり使うためには場合はやはりnpmでインストールすることが多いと思います。また主要機能（x-transitionなど）の中にはバージョン依存が激しいものもあるため、できるだけ最新版を使用することをおすすめします。（バージョンは3系以上を推奨）
環境構築に苦手意識を持たれている方にはCDNでの読み込みは有り難いのではないでしょうか。
（もちろんAlpine.jsもnpmでインストールできますが内容は同じです）
2.学習コストが比較的低い
Alpine.jsでは覚えることがあまり多くなく、18個のディレクティブと6個のマジックプロパティと呼ばれるもので構成されています。逆に言えばできることが限られているとも言えますが、シンプルで基本的な機能であれば十分に対応できると思います。
18個のディレクティブ
- x-data
- x-init
- x-show
- x-bind
- x-on
- x-text
- x-html
- x-model
- x-modelable
- x-for
- x-transition
- x-effect
- x-ignore
- x-ref
- x-cloak
- x-teleport
- x-if
- x-id
6個のマジックプロパティ
- $el
- $refs
- $store
- $watch
- $dispatch
- $nextTick
- $root
- $data
- $id
ずらっと並んでいますが、よく使う機能（x-dataやx-show,x-modelおよび$ref等）は大体決まっているので必要に応じで学習していけばよいのではないでしょうか。
またバージョンが上がるたびにディレクティブも増えてきていますので、少しずつ機能が拡張されてきているようです。
なおVue.jsを使用したことのある方ならお気づきだと思いますが、接頭語の”x-“はVue.jsの”v-“とよく似ています。実際vをxに変えただけだと思えるくらい使用感も似ていますので、Vue.jsの経験者ならすんなり入っていけるとおもいます（両者の違いは後ほど説明します）。
3.お手軽にリアクティブデータバインディングが実装できる
Alpine.jsで定番のtodoリストをサクッと作ってみました。
See the Pen
Untitled by shiota (@shioweb)
on CodePen.
最後に
ここまでAlpine.jsについて簡単に説明してきましたが、最後に比較対象のVue.jsといくつかの違いを挙げておきます。
- htmlにそのまま書ける
→Vue.jsは.vueファイルが必要
- Vue.jsのマスタッシュ構文（{{ hoge }}みたいなの）は使えない
//Vue.js
<p>{{ foo }}</p>
//Alpine.js
<p x-text="foo"></p>
//上記の出力結果は同じ
- Vue.jsのような厳密なライフサイクルの概念は無い
→初期化のx-initくらいでしょうか。ライフサイクルをガッツリ利用するならVue.jsやreactの使用をおすすめします。
- Vue.jsに比べて情報量が少ない
→この記事の執筆時点ではVue.jsに比べて情報量がかなり少ないです。公開されてからまだ2年程しか経ってないので仕方ないですが、これからgithubでの勢いを見ていると必ず増えてくると思います。
※追記
chromeの拡張機能である”Alpine.js devtools”はAlpine.jsを使う上で必須のツールです。詳細は省きますが、開発効率もグッと上がりますので是非インストールしておきましょう！