Alpine.js を整える。

＝ HTML の属性を足すだけで動く——Alpine.js（CSP ビルド）の書き味を確かめる

Alpine.js が初めての方は、先にそもそも Alpine.js とは・どんな場面で使うかをどうぞ。

サンプルコード（クリックでエディタに挿入）

HTML EDITOR markup + Alpine.data() 登録スクリプトを1枚に

Ctrl/⌘ + Enter で実行

PREVIEW

「▶ 実行」を押すと、ここに結果が表示されます。

コンソール

console.log の出力とエラーがここに出ます。

無限ループなど重い処理を書くと、プレビューが固まることがあります。「■ 停止」でプレビューを作り直せます。

そもそも Alpine.js とは

HTML に属性を書き足すだけで動きを付ける、軽量な JavaScript フレームワーク。

Alpine.js は、HTML のタグに専用の属性を書き足すだけで、開閉やタブ切り替えといった動きを付けられる、軽量な JavaScript フレームワークです。別ファイルに長いスクリプトを書かずに済み、動きの定義が HTML の中に見えるのが特徴です。Caleb Porzio 氏が作り、オープンソースで開発されています。

React や Vue のような「画面全体を作る道具」ではなく、できあがった HTML に少しだけ動きを足すことを得意にしています。考え方は Vue に近く、導入も script タグを1行足すだけで済みます。Laravel や Tailwind CSS を使う現場でよく見かけます。

どこで・どんな場面で使うか

メニューの開閉・アコーディオン

ボタンを押すと開く、閉じるといった小さな動きを、HTML だけで書けます。
タブ・モーダルウィンドウ

表示の切り替えや、ポップアップの出し入れに向いています。
フォームの入力補助

入力内容に応じて項目を出し入れする、といった簡単な画面の動きに使えます。
サーバーが HTML を作るサイト

Laravel などサーバー側で HTML を作る構成に、後から動きを足す用途で選ばれます。
求人・学習の場面

単独の求人は多くありませんが、Vue や React に進む前の入り口としても学びやすい道具です。

向いている場面・向いていない場面

向いている：HTML 中心のサイトに、少しだけ動きを足したいとき。
向いている：ビルド作業なしで、すぐに試したい小さな工夫。
向いていない：画面数が多く、状態が複雑に絡み合う大きなアプリ。その場合は React や Vue のほうが整理しやすくなります。

上の練習場で、HTML に属性を書いて動きを付ける感覚を試してみてください。

Alpine.js が向いている場面／向かない場面

自分に合うのはどれ？選び方を見る →

HTML属性に振る舞いを書くだけの、既存ページへの「一振りかけ」ライブラリ。

◎ 向いている場面

・既存のHTMLページに、x-data等の属性を足すだけで動きを加えたいとき
・サーバーサイド（PHP/Rails等）でHTMLを描画し、部分的にだけ動きを足したいとき
・ビルド環境を用意したくないとき（<script>タグ1本で使える）
・学習コストを最小にしたいとき

△ 向かない場面

・求人量・ライブラリの選択肢の広さを重視するとき（当サイト内では手薄）
・大きめのSPA（画面遷移込みの本格的なWebアプリ）を組みたいとき

このページは @alpinejs/csp（CSP ビルド）を使っています

Alpine.js の標準ビルドは x-data="{ count: 0 }" のような式をその場で new Function に通して評価しますが、本番の CSP（Content-Security-Policy）はそれを禁止しています。

そこで CSP ビルドでは、document.addEventListener('alpine:init', ...) の中で Alpine.data('名前', () => ({ ... })) を先に登録しておき、 HTML 側では x-data="名前()" の形で参照します。上のサンプルはすべてこの形で書かれています。