JavaScript

Alpine.jsとは？初心者向けガイドとサンプルコード

 

Alpine.jsは、軽量で簡単に使用できるJavaScriptフレームワークです。Vue.jsやReactのような強力なフレームワークと比べると、小さくシンプルで、特に静的なWebページや軽量なインタラクションを追加したい場合に適しています。
今回はAlpine.jsを初めて使う方に向けて、その特徴や基本的な使い方、そしてそのままコピペで使えるサンプルコードを紹介します。

Contents

Alpine.jsの特徴

Alpine.jsは、シンプルかつ宣言的な記述が特徴です。HTMLの中に必要なJavaScriptを直接埋め込むような形で使用できるため、追加のファイルを用意せずに、簡単にインタラクティブな動作を実現できます。また、以下のような特徴があります：

  • 軽量で高速
  • シンプルなAPI
  • HTMLに直接書けるので初心者にも使いやすい
  • Vue.jsライクな記述で柔軟性がある

Alpine.jsの導入方法

Alpine.jsはCDNから読み込むだけで簡単に使えます。以下のコードをHTMLファイルのタグ内に追加するだけです。

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

基本的な使い方

Alpine.jsでは、データの定義やイベントの処理などをHTML内に記述します。例えば、ボタンをクリックしてテキストを切り替えるシンプルな例を見てみましょう。

例1: テキストの切り替え

<div x-data="{ isVisible: true }">
  <button @click="isVisible = !isVisible">切り替え</button>
  <p x-show="isVisible">こんにちは、Alpine.js！</p>
</div>

このコードでは、ボタンをクリックするたびに「こんにちは、Alpine.js！」というテキストの表示/非表示が切り替わります。x-dataで定義されたisVisibleという変数の値を切り替え、x-showディレクティブを使用して表示を制御しています。

Alpine.jsでできること

Alpine.jsは以下のような機能を簡単に実装できます：

  • 動的なデータバインディング
  • イベントハンドリング
  • 条件付きレンダリング
  • リストのレンダリング

例2: 動的なデータバインディング

入力フォームに連動して表示を変える例です。

<div x-data="{ name: '' }">
  <input type="text" x-model="name" placeholder="名前を入力してください">
  <p>こんにちは、<span x-text="name"></span>さん！</p>
</div>

ここでは、x-modelを使用してテキストボックスの値をname変数にバインドし、それをx-textで出力しています。ユーザーが入力するたびに即座に名前が更新されます。

Alpine.jsを使ったサンプルコード

以下は、簡単なアコーディオンメニューを実装する例です。

例3: アコーディオンメニュー

<div x-data="{ open: false }">
  <button @click="open = !open">メニューを表示</button>
  <div x-show="open">
    <p>これはアコーディオンメニューの内容です。</p>
  </div>
</div>

このアコーディオンメニューは、ボタンをクリックすることでメニューが表示・非表示に切り替わります。x-showディレクティブを使い、open変数の値で表示を制御しています。

Alpine.jsを使ったサンプルコードデモページ

以下のデモページで実際の動作を確認してみてください。

Alpine.jsを使ったサンプルコードデモページ

まとめ

Alpine.jsはシンプルで軽量なため、複雑なフレームワークを使わずにインタラクティブなUIを実現したい場合に非常に便利です。
初心者の方でも使いやすく、まずは基本のサンプルコードから試してみるのがおすすめです。ぜひAlpine.jsを使って、Webページにインタラクティブな要素を取り入れてみてください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

Alpine.js
関連記事