Alpine.jsの基本構文まとめ｜x-data / x-show / x-on を整理

2026年1月10日

URLをコピーしました！

JavaScript を使ったちょっとした動きや表示切り替えを実装したい場面は多くあります。しかし、そのたびに大規模なフレームワークを導入するのは過剰と感じることもあるでしょう。

Alpine.js は、そのような場面に適した軽量な JavaScript フレームワークです。HTML に直接属性として記述することで、シンプルなインタラクションを実装できます。本記事では、Alpine.js の中でも特に使用頻度の高い基本構文である x-data、x-show、x-on について、役割と使い方を整理して解説します。

これから Alpine.js を使い始める方や、基本構文を改めて整理したい方に向けた内容です。

Alpine.js とは何か

Alpine.js は、HTML に JavaScript の振る舞いを直接記述できる軽量フレームワークです。Vue.js の構文に影響を受けており、宣言的な書き方が特徴です。

React や Vue のようなビルド環境は不要で、script タグを読み込むだけで利用できます。そのため、既存の静的 HTML や WordPress テーマ、管理画面の部分的な UI 改善などに向いています。

x-data の役割と基本構文

x-data は Alpine.js における状態管理の起点となる構文です。x-data を指定した要素が、Alpine.js のコンポーネント単位になります。

基本構文

<div x-data="{ open: false }">
    <!-- Alpine.js 管理下の要素 -->
</div>

</div>

x-data には JavaScript のオブジェクトを記述します。このオブジェクト内のプロパティが、HTML 内で参照できる状態変数になります。

x-data のポイント

x-data を指定した要素がスコープの境界になる
子要素では x-data 内の変数をそのまま参照できる
単純な true / false や数値、文字列の管理に向いている

x-data は Alpine.js を使用する上で必ず登場する構文であり、すべての動きの土台になります。

x-show の役割と表示制御

x-show は、要素の表示・非表示を制御するための構文です。条件式の結果が true の場合に表示され、false の場合は非表示になります。

基本構文

<div x-data="{ isVisible: false }">
    <button x-on:click="isVisible = true">表示</button>
    <div x-show="isVisible">
        表示される内容
    </div>
</div>

表示される内容

</div>

x-show は内部的に CSS の display プロパティを切り替える仕組みです。DOM 自体は削除されず、表示状態のみが変化します。

x-show の特徴

表示・非表示の切り替えが簡単
DOM は保持されるため、再描画コストが低い
フォーム入力値などが保持される

単純なトグル表示や、クリックで開閉する UI に適しています。

x-on の役割とイベント処理

x-on は、イベントを処理するための構文です。クリックや入力などのイベントに対して JavaScript 処理を記述できます。

基本構文

<button x-on:click="count++">クリック</button>

1	<button x-on:click="count++">クリック</button>

x-on:イベント名=”処理” の形式で記述します。x-on は省略記法も用意されています。

省略記法

<button @click="count++">クリック</button>

1	<button @click="count++">クリック</button>

x-on と @ は同じ意味で、どちらを使っても問題ありません。

よく使われるイベント

click
input
change
submit
keydown

x-on を使うことで、HTML と JavaScript の関係が視覚的に分かりやすくなります。

x-data・x-show・x-on を組み合わせた例

以下は、よくある「開閉メニュー」の実装例です。

<div x-data="{ open: false }">
    <button @click="open = !open">
        メニュー
    </button>

    <div x-show="open">
        <ul>
            <li>項目1</li>
            <li>項目2</li>
            <li>項目3</li>
        </ul>
    </div>
</div>

メニュー

</button>

<ul>

</ul>

</div>

この例では、

x-data で open という状態を定義
x-on（@click）で open を切り替え
x-show で表示を制御

という流れになっています。Alpine.js の基本的な使い方がこの構成に集約されています。

Alpine.js を使う際の注意点

Alpine.js は便利ですが、適した用途を理解することが重要です。

複雑な状態管理には向かない
大規模アプリケーションには不向き
UI の部分的な制御に使うのが適切

jQuery の代替として、シンプルな動きを実装したい場合に特に効果を発揮します。

よくある質問（Q & A）

Alpine.js は jQuery の完全な代替になりますか？: 完全な代替ではありませんが、簡単な DOM 操作や表示切り替えであれば十分に代替可能です。Ajax 処理や複雑な操作が必要な場合は、用途に応じた選択が必要です。
x-show と CSS の display:none は何が違いますか？: x-show は JavaScript の状態と連動して表示制御ができる点が異なります。CSS のみでは動的な切り替えが難しい場合に有効です。
Alpine.js は学習コストが高いですか？: 基本構文が少なく、HTML ベースで記述できるため、JavaScript 初学者でも比較的習得しやすいです。
x-data は複数定義できますか？: はい。別の要素に x-data を指定することで、独立したスコープを複数作成できます。
Alpine.js は本番環境で使えますか？: はい。公式に本番利用が想定されており、多くのプロジェクトで使用されています。