Alpine.jsとは？HTML中心の軽量JavaScript framework

ページ内ナビ

概要

Alpine.jsはHTML markupへJavaScriptのstateとinteractionを直接追加する軽量frameworkです。x-dataでreactive stateを宣言し、x-on、x-text、x-show、x-model、x-forなどのdirectiveを組み合わせてUIを構築します。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-10-06

主な特徴

script tagまたはmodule importで導入する

CDNのscript tagで開始する方法と、npmからimportしてAlpine.start()を呼ぶ方法が公式に案内されています。

出典：[2]

x-dataを中心にstateとDOMを近い位置で管理する

x-dataでlocal stateを宣言し、event処理や表示内容を同じmarkup内のdirectiveから参照できます。

出典：[1][3]

向いている用途

server-rendered HTMLへ小さなinteractionを段階的に追加したい場合に向く

dropdown、counter、search inputのような局所UIを、component frameworkの大きなruntimeを導入せずmarkup中心で実装したい用途に適します。

出典：[1]

導入前の確認

module利用ではextension登録順とAlpine.startの呼び出し回数を確認する

公式installation guideはextension codeをimport後・Alpine.start()前に登録し、Alpine.start()をpageごとに1回だけ呼ぶよう案内しています。

出典：[2]

参考にした公式資料

[1]Alpine.js v3.17.4 Start Here(2026-10-06)
[2]Alpine.js v3.17.4 Installation(2026-10-06)
[3]Alpine.js v3.17.4 State(2026-10-06)
[4]Alpine.js v3.17.4 package metadata(2026-10-06)
[5]Alpine.js v3.17.4 release(2026-10-06)

編集部からの補足

server-rendered HTMLへdropdownやsearch等のinteractionを局所的に追加したい場合に扱いやすいframeworkです。module利用ではextension登録順とAlpine.startの重複呼び出しを確認してください。

3ステップで試す

1
ソースを取得
git clone --depth 1 https://github.com/alpinejs/alpine.git
2
リポジトリへ移動
cd alpine
3
公式手順を確認
READMEのInstallation / Quick Start / Getting Startedにある公式コマンドを続けて実行してください。
find . -maxdepth 1 -iname 'README*' -exec sed -n '1,220p' {} \; -quit

公式READMEで確認

成長

成長の推移 · 直近30日

31,960 Stars

推移データを蓄積中です。

Built with

HTML

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

Stars: 31,960
Forks: 1,390
Watchers: 222
Open Issues: 17
所有者種別: Organization
主要言語: HTML
ライセンス: MIT
リポジトリ最終更新: 2026/10/05