CONTENTS

Alpine.jsのインストール

npm install alpinejs

CDNの場合は、

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

Alpine.jsのディレクティブの使用例

x-data

要素にデータを定義して、それを操作できるようにするディレクティブ。
小さなJavaScriptオブジェクトを持たせて、HTML内でそのデータを使用します。
例えば、カウンター機能を作るときの初期データを設定します。

x-init

コンポーネントが読み込まれたときに一度だけ実行される処理を指定するディレクティブ。
ページが表示されたときに特定のコードを実行したい場合に便利です。
例えば、初期設定やデータの取得などに使います。

x-show

条件に応じて要素を表示・非表示にするディレクティブ。
CSSのdisplay: none;を使って要素の表示を切り替えます。
例えば、チェックボックスがオンのときだけ要素を見せるといった場面に使います。

x-bind

HTML属性にAlpine.jsのデータをバインドするためのディレクティブ。
:属性名と書いても同じ効果があります。例えば、クラスやスタイルをデータに応じて変えたいときに使います。

x-on

イベントが起こったときにアクションを実行するディレクティブ。
@イベント名としても使えます。例えば、ボタンがクリックされたときに何かの動作をさせる場合に使います。

x-text

要素にテキストを表示させるためのディレクティブ。
テンプレート構文を使わず、簡単にデータを表示できます。
例えば、メッセージやカウント数を表示するのに便利です。

x-html

要素にHTMLを挿入するディレクティブ。
注意が必要で、ユーザー入力をそのまま渡すとセキュリティリスクがあります。信頼できるデータだけに使います。

x-model

フォーム要素の値をデータと連動させるためのディレクティブ。
例えば、テキスト入力の内容をリアルタイムでデータに反映させるときに使います。

x-modelable

x-modelの拡張版で、データの双方向バインディングをカスタマイズできます。
コンポーネントの内部状態を保持しつつ、外部から値を受け渡したり、更新したりできます。

x-for

データをループしてリストを表示するためのディレクティブ。
例えば、配列内のアイテムを順番に出力するリストを作成するときに使います。

x-transition

要素の表示・非表示にアニメーションを付けるディレクティブ。
要素が表示されるときや消えるときに、滑らかな動きを加えられます。

x-effect

データが変更されたときに、その変化に応じた処理を自動で実行するディレクティブ。
例えば、特定のデータが変わったときに何かを計算し直したりする場合に使います。

x-ignore

Alpine.jsがその要素を操作しないようにするディレクティブ。
特定の要素をAlpine.jsの制御から除外したい場合に使用します。

x-ref

要素に参照を設定し、JavaScriptからアクセスできるようにするディレクティブ。
例えば、フォームの特定の要素をプログラムで操作したいときに使います。

x-cloak

Alpine.jsの初期化が終わるまで要素を隠しておくディレクティブ。
表示がちらつかないようにするために、[x-cloak] { display: none; }のようにスタイルを設定しておきます。

x-teleport

コンポーネントを他の場所に移動して描画するためのディレクティブ。
モーダルウィンドウやポップアップを別の場所に表示したい場合に使います。

x-if

条件によって要素をHTMLに追加・削除するディレクティブ。
x-showとは異なり、要素そのものをDOMから削除するので、真になるまでその要素は存在しません。

x-id

複数の要素やコンポーネントで一意なIDを生成するためのディレクティブ。
IDが重複しないように使います。

まとめ

作ったサンプルはあまり使用するところはないかもしれませんが、、、
なんとなく使い方のイメージはできるかと思います。

備忘録として作成しましたが、もし何かの役に立てば幸いです。