そもそもAlpine.jsを知らない方へ
Alpine.jsの導入方法
scriptタグを使う方法
headタグに以下のscriptタグをブチ込むだけ
<html>
<head>
...
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
...
</html>
npmを使う方法
①まずインストール
npm install alpinejs
②バンドルするjsファイルに以下を記載する
Reactならapp.jsになると思います。
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()
知っておくべき用語 2選
ディレクティブ
x-○○のこと。
これらを使ってDOMを操作したり、クラス名を変更したり、cssを変えたりできる。
よく使う/とりあえずこれ覚えておけばOKなディレクティブ
x-data → プロパティ、メソッドを定義するのに必須。必ず記述する。
x-init → 初期化処理に使う
x-show → 要素を表示したり消したりするのに使う
x-bind → 要素のHTML属性（class, style, placeholderなど）を変えるのに使う
x-on → イベントを付ける時に使う（クリックイベントは＠clickで代用可能）
x-model → input要素に付ける。入力値をプロパティに反映させるときに使う。
x-transition → 簡単なアニメーションを付ける時に使う。
x-effect → プロパティの変更に同期にして処理を行いたいときに使う。
x-cloak → x-showを使っても要素が表示されてしまう時に使う。
※ ここにあるディレクティブの使用用途は他にもいろいろあります。
マジックプロパティ
$○○のこと。
知らなくても全然使える。
書き方の基本
文字の表示・非表示を切り替えるボタンの例
①x-dataを定義
<div x-data="{}">
<button>表示</button>
<div>やっほー</div>
</div>
②x-dataのプロパティ、メソッドを作成する
<div x-data="{
+ open: false,
+ toggle() { this.open = ! this.open }
}">
<button>表示</button>
<div>やっほー</div>
</div>
③ディレクティブを使ってプロパティ、メソッドを要素に割り当てる
button要素にクリックイベントを付与、div要素にx-showを付与する。
<div x-data="{
open: false,
toggle() { this.open = ! this.open }
}">
+ <button @click="toggle">表示</button>
+ <div x-show="open">やっほー</div>
</div>
簡単な処理を記述する分には以上の3ステップだけです。
プラグインについて
Alpine.jsに機能を追加するプラグインが色々あります。
使いどころが多そうなプラグインを紹介しているので是非見てください。
Mask
Persist
Collapse
コピペで何とかしたい時
既に有志が作っているコンポーネントをコピペで利用できるサイトです。
Alpine.jsはシンプルなので、他人が作ったコンポーネントも比較的カスタマイズがしやすくて良きです。
アプリの規模が大きくなった時
storeを使うことで、複数のx-dataで使えるデータを作れます。
言い換えればグローバルな状態管理ということです。
まとめ
12月1日からアドベントカレンダーの企画でずっとAlpine.jsの記事を書きました。
今回のアドカレがAlpine.js初学者にとって有益な情報になってくれれば良きでござんす。