フレームワークを整える
中級Alpine.js を整える。
＝ HTML の属性を足すだけで動く——Alpine.js（CSP ビルド）の書き味を確かめる
サンプルコード（クリックでエディタに挿入）
「▶ 実行」を押すと、ここに結果が表示されます。
CONSOLE
console.log の出力とエラーがここに出ます。
無限ループなど重い処理を書くと、プレビューが固まることがあります。「■ 停止」でプレビューを作り直せます。
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="名前()" の形で参照します。上のサンプルはすべてこの形で書かれています。
このページについて
ここで動くのは本物のブラウザのエンジンです。Alpine.js 3.17.1（@alpinejs/csp）を、サンドボックス化した（allow-scripts のみの）iframe の中で読み込んで実行します。
🌐 ライブラリは cdn.jsdelivr.net から読み込みます。書いたコードと実行結果は端末内で完結し、外部へ送信しません（送信ゼロ）。
プレビューはサンドボックス化した iframe で、このページや端末のデータには触れません。
このツールについて
HTML の属性に x-data・x-on・x-for を足すだけで動く——Alpine.js の書き味を、実際に手を動かして確かめられます。ここでは本番同様、CSP に対応した @alpinejs/csp を使います。
HTML の属性（x-data・x-on・x-for・x-show）を足すだけで動く Alpine.js を確かめる練習場。本番同様の CSP ビルドで、Alpine.data() で登録してから使う作法も体験できます。
主な機能
- 4サンプル（Hello World・状態とイベント・一覧 x-for・検索フィルタ）
- @alpinejs/csp 3.17.1 を cdn.jsdelivr.net から読み込み
- Alpine.data() で登録して x-data で参照する CSP ビルドの作法を解説
- HTML タブ1枚・プレビュー＋console・停止ボタン・送信ゼロ
よくある質問
Q. 標準の Alpine.js と挙動は違いますか？
A. CSP ビルドを使っているため、x-data に直接オブジェクトを書く書き方が使えません。Alpine.data() で名前を登録し、x-data="名前()" で参照します。
Q. HTML タブが1枚だけなのはなぜですか？
A. Alpine.js は HTML の属性で完結するのが持ち味なので、マークアップと Alpine.data() の登録スクリプトを1枚に同居させています。
Q. x-data="{ ... }" と書いたらどうなりますか？
A. CSP ビルドでは評価できず動きません。Alpine.data() で登録してから x-data="名前()" にしてください。
入力値はURLの「#」以降に入るためサーバーには送信されません。リンクを開くと同じ状態を復元します。
