備忘録になりますが、使ってみたらAlpine.jsが良さげだったので、Alpine.jsについて書いてみたいと思います。
目次
Alpine.jsについて
Alpine.jsはx-data
や@click
といったVue.jsと同じような構文を使ってコードを書くことができます。
公式リポジトリでも「ほぼ完全にVue.jsとAngularの拡張から借用」(!)と書かれているとおり、Vue.jsに馴染みのある方はかなり理解しやすいかもしれません。
このツールのシンタックスは、ほぼ完全に Vue(それと、Angular による拡張)から借用しています。ウェブからの賜り物に感謝しています。
また、Alpine.jsは「TailwindのJavaScript版のようなもの」とも書かれており、実際にTailwind.cssと組み合わせて使ってみても個人的にはけっこう使いやすいと思うので、とくに小規模なプロジェクトで使う機会が増えてきそうだなと。時間を見つけて、まずはポートフォリオサイトなどで使ってみようかなと思います。

Alpine.jsのディレクティブなど
Alpine.jsでは2020年8月の時点で14のディレクティブと5つのマジックプロパティが利用できます。
ディレクティブはイベントを監視し、DOM要素を追加/削除します。
- x-data
- x-init
- x-show
- x-bind
- x-on
- x-model
- x-text
- x-html
- x-ref
- x-if
- x-for
- x-transition
- x-spread
- x-cloak
マジックプロパティは次のようになります。
- $el
- $refs
- $event
- $dispatch
- $nextTick
インストール
CDNを利用するとき
CDNを利用する場合には、次のようにhead
内でスクリプトを読み込みます。
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
※ 公式サイトによると、上のコードではalpine@v2.x.x
のようにバージョンが固定されていないので、ビルド時には不具合を防ぐためにもalpine@v2.3.5
のようにしてバージョンを固定した方が良さそうです。
NPMやYarnを利用するとき
NPMやYarnを利用するときには、パッケージをインストールしてから、JSファイル内でimport
文などを使ってAlpine.jsを読み込みます。
npm i alpinejs
↓ JSファイル内
import 'alpinejs'
IE11に対応させるとき
Alpine.jsをIE11に対応させるときにはポリフィルが必要になるので、次のスクリプトをAlpine.jsの前で読み込みます。
<script src="https://polyfill.io/v3/polyfill.min.js?features=MutationObserver%2CArray.from%2CArray.prototype.forEach%2CMap%2CSet%2CArray.prototype.includes%2CString.prototype.includes%2CPromise%2CNodeList.prototype.forEach%2CObject.values%2CReflect%2CReflect.set"></script><script src="https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.0/proxy.min.js"></script>
Alpine.jsを使ってみる
今回Alpine.jsを使って超シンプルなカウンターと、アコーディオン風の展開可能なパネルを作ってみたので、残しておきたいと思います。
カウンター
まずはボタンをクリックすると+1/-1する簡単なカウンターから。
コードは次のようになりました。
<div x-data="{count: 0}"><div><button @click="count++">+1</button><button @click="count--">-1</button><button @click="count = 0">リセット</button></div><p>Total:<strong x-text="count"></strong></p></div>
(読みにくくなるのでスタイル関係は別になりますが)動かしてみると次のようになります。
AlpineではHTMLセレクターと同じスコープを持つので、<div x-data="{count: 0}">
の中に、count
の値を+1/-1するボタンや、countの値を表示するx-text
をなどを入れています。
※ x-data="..."
を持つdivタグの中でcount
というステートを使うことができます。
また、@click
は省略せずに書くとx-on:click
となるので、@click="count++"
はx-on:click="count++"
のように書くこともできます。
展開可能なパネル
今回はAlpine.jsを使って、クリックすると展開できるパネルも作ってみました。
<div x-data="panel()"><button@click="handleClick"x-text="!isShow ? '展開する' : '折りたたむ'"></button><p x-show="isShow">あのイーハトーヴォの すきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p></div><script>function panel() {return {isShow: false,handleClick() {return (this.isShow = !this.isShow);},};}</script>
先ほどはx-data
の中にcountというステートを入れましたが、x-data
には(panel
のように)x-dataの外で定義した関数を使うこともできます。
今回は以上になります。最後まで閲覧ありがとうございました。