Alpine.js の紹介と基本的な使い方

Alpine.jsとは

Alpine.js は、HTML に直接 JavaScript の機能を追加できる軽量なフロントエンドライブラリです。Vue.js に似たシンプルな記法を持ちながら、より小さなサイズで手軽に利用できます。

大規模な SPA（Single Page Application）を作るためではなく、簡単な UI の制御や動的な表示を実現したい場合に適しています。

特徴

• 軽量で高速

• 学習コストが低い

• HTML に直接記述できる

• ビルドツールなしでも利用可能

基本的な使い方

まず、CDN を利用して Alpine.js を読み込みます。

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

次に、x-data を使用してデータを定義します。

<div x-data="{ count: 0 }">
    <button @click="count++">+</button>
    <span x-text="count"></span>
</div>

この例では、ボタンをクリックするたびに count の値が増加し、画面に表示されます。

表示・非表示の切り替え

x-show を使うことで要素の表示を制御できます。

<div x-data="{ open: false }">
    <button @click="open = !open">切り替え</button>

    <p x-show="open">
        メッセージを表示します。
    </p>
</div>

まとめ

Alpine.js は、小規模なインタラクティブ機能を簡単に実装できる便利なライブラリです。複雑なフレームワークを導入するほどではない場合に、シンプルなコードで動的な UI を実現できます。