alpinejs/alpine

これは何？

主な機能

• 01HTML属性に直接記述する宣言的な状態管理とイベント処理。
• 02CDNスクリプトタグまたはnpmモジュールとして利用可能。
• 03折りたたみアニメーション、フォーカス、マスク、状態の永続化、DOMのモーフィングに対応する公式プラグイン。
• 04厳格なContent Security Policyが適用される環境向けのCSP対応ビルド。
• 05CypressとVitestのテストスイートを備えたモノレポ。

ユースケース

• SPAフレームワークを使わずに、サーバーサイドレンダリングされたページへドロップダウン、モーダル、タブを追加する。
• 開いたパネルやフォームの値など、UIの状態をページ読み込み後も保持する。
• 入力マスクとフォーカス管理を備えたインタラクティブなフォームを構築する。
• CSP対応のJavaScriptビルドが必要な環境で利用する。

クイックスタート

1. 1

   リポジトリをローカルにクローンする

2. 2

   依存関係をインストールする

   npm install
3. 3

   すべてのパッケージをビルドする

   npm run build
4. 4

   ビルドした cdn.js ファイルを、ページの script タグに含める

使う前に知っておきたいこと

• !このリポジトリはコントリビューション用です。利用方法に関するドキュメントの大部分は、外部の Alpine ドキュメントサイトにあります。

トピック

よくある質問

alpine とは？

HTMLに直接リアクティブな動作を追加できる、堅牢でミニマルなJavaScriptフレームワーク。 Alpine.jsは、HTML内にインタラクティブな動作を組み込むためのミニマルなJavaScriptフレームワークです。要素に属性を指定して状態やイベントハンドラーを紐付けるため、ドロップダウン、モーダル、タブ、フォームのロジックといった小さなインタラクションを、それが作用するマークアップのそばに配置できます。ビルド工程の多い別個のアプリケーション構成は必要ありません。

alpine は無料で使えますか？ライセンスは？

alpine は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

alpine は今もメンテナンスされていますか？

活発にメンテナンス中。alpine の最終コミットは 2026年10月16日 です。

alpine は何に使えますか？

SPAフレームワークを使わずに、サーバーサイドレンダリングされたページへドロップダウン、モーダル、タブを追加する。 開いたパネルやフォームの値など、UIの状態をページ読み込み後も保持する。 入力マスクとフォーカス管理を備えたインタラクティブなフォームを構築する。 CSP対応のJavaScriptビルドが必要な環境で利用する。

alpine のインストール方法は？

リポジトリをローカルにクローンする 依存関係をインストールする: npm install すべてのパッケージをビルドする: npm run build ビルドした cdn.js ファイルを、ページの script タグに含める

alpine はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/alpinejs/alpine