とほほのAlpine.js入門

目次

Alpine.jsとは

インストール

CDN を利用する場合は HTML に下記の1行を追加します。

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

モジュールとして読み込む場合は下記の様にインストールして使用します。

npm install alpinejs

import Alpine from 'alpinejs'
 
window.Alpine = Alpine
Alpine.start()

使用例

基本的な使用例

簡単な使用例を下記に示します。x-data のように x- で始まる属性を ディレクティブ と呼びます。Alpine.js は x-data ディレクティブを指定した要素およびその子孫要素の範囲で機能します。下記の例では x-data で message というプロパティを定義し、x-text でそれを表示しています。

HTML
<html>
<head>
  <title>Alpine.js TEST</title>
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
  <div x-data="{ message: 'Hello world!' }">
    <p x-text="message"></p>
  </div>
</body>
</html>
表示

カウンター

@click で要素をクリックした時の動作を指定できます。@click は x-on:click の省略形です。下記の例では [Count up] ボタンを押すたびに count プロパティをインクリメントしています。

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

表示・非表示

x-show や x-if を用いて表示・非表示を切り替えることができます。x-show は値が true なら表示、false なら非表示を切り替えます。

HTML
<div x-data="{ open: false }">
  <button @click="open = ! open">Toggle</button>
  <div x-show="open">Contents...</div>
</div>
表示
Contents...

ディレクティブ

データを定義する(x-data)

x-data はデータを定義します。Alpine.js の基本となるディレクティブで、x-date を指定した要素、およびその子孫要素に対して Alpine.js は機能します。

HTML
<div x-data="{ message: 'Hello world!' }">
  <div x-text="message"></div>
</div>

初期化処理を行う(x-init)

x-init には Alpine.js が初期化を行う際の初期化処理を記述することができます。

HTML
<div x-data="{ message: '' }" x-init="message = 'Hello world!'">
  <div x-text="message"></div>
</div>
表示

テキストを表示する(x-text)

x-text は x-data で定義したプロパティをテキストとして表示します。

HTML
<div x-data="{ message: 'Hello world!' }">
  <div x-text="message"></div>
</div>
表示

HTMLを表示する(x-html)

x-html は x-data で定義したプロパティを HTML として表示します。クロスサイトスクリプティング(XSS) 問題には注意してください。

HTML
<div x-data="{ message: '<b>Hello world!</b>' }">
  <div x-html="message"></div>
</div>
表示

イベントハンドラを設定する(x-on, @)

x-on はイベントハンドラを設定します。下記の例ではボタンをクリックした時に open プロパティの値を設定しています。

HTML
<div x-data="{ open: true }" style="height:40px;">
  <button x-on:click="open = true">Show</button>
  <button x-on:click="open = false">Hide</button>
  <div x-show="open">Content...</div>
</div>
表示
Content...

@ は x-on: の省略形です。x-on:click を @click と記述することができます。

HTML
<button @click="open = true">Show</button>
<button @click="open = false">Hide</button>

キーボードやマウスイベントには下記の修飾子をつけることができます。@click.shift.ctrl="..." の様に複数指定することも可能です。

<div @click.shift="...">      # Shift Key
<div @click.ctrl="...">       # Ctrl Key
<div @click.cmd="...">        # Command Key
<div @click.meta="...">       # Meta Key
<div @click.alt="...">        # Alt Key
<div @keyup.shift="...">      # Shift Key
<div @keyup.enter="...">      # Enter Key
<div @keyup.space="...">      # Space Key
<div @keyup.ctrl="...">       # Ctrl Key
<div @keyup.cmd="...">        # Command Key
<div @keyup.meta="...">       # Meta Key
<div @keyup.alt="...">        # Alt Key
<div @keyup.up="...">         # Up Key
<div @keyup.down ="...">      # Down Key
<div @keyup.left ="...">      # Left Key
<div @keyup.right="...">      # Right Key
<div @keyup.escape="...">     # Esc Key
<div @keyup.tab="...">        # Tab Key
<div @keyup.caps-lock="...">  # Caps Lock Key
<div @keyup.equal="...">      # = Key
<div @keyup.period="...">     # . Key
<div @keyup.comma="...">      # , Key
<div @keyup.slash="...">      # / Key

表示・非表示を制御する(x-show)

x-show は値が true の時は表示し、false の時は非表示にします。

HTML
<div x-data="{ open: true }" style="height:40px;">
  <button @click="open = true">Show</button>
  <button @click="open = false">Hide</button>
  <div x-show="open">Content...</div>
</div>
表示
Content...

条件で振り分ける(x-if)

x-if は値が true であれば子要素を表示し、false であれば非表示にします。x-if は <template> タグに記述する必要があります。

HTML
<div x-data="{ open: true }">
  <button @click="open = true">Show</button>
  <button @click="open = false">Hide</button>
  <template x-if="open">
    <div>Content...</div>
  </template>
</div>
表示

繰り返し処理を行う(x-for)

x-for は繰り返し処理を行います。<template> タグに記述する必要があります。

HTML
<div x-data="{ users: ['Yamada', 'Suzuki', 'Tanaka'] }">
  <ul>
    <template x-for="user in users">
      <li x-text="user"></li>
    </template>
  </ul>
</div>
表示

入力フォームと値をバインドする(x-model)

x-model は入力フォームとプロパティをバインドします。これにより、入力フォームでプロパティが変更されると、即座に x-text や x-html などに反映されます。

HTML
<div x-data="{ message: 'Hello world!' }">
  <input type="text" x-model="message">
  <div x-text="message"></div>
</div>
表示

HTML属性値に値をバインドする(x-bind)

x-bind は属性値とプロパティをバインドします。これにより、プロパティが変更されると即座に属性値に反映されます。

HTML
<div x-data="{ label: 'OK' }">
  <input type="text" x-model="label">
  <input type="button" x-bind:value="label">
</div>
表示

子コンポーネントの値を親コンポーネントのx-modelと関連付ける(x-modelable)

x-model は input, textarea, select 要素にしか指定することができませんが、x-modelable を用いることでこれら以外の子要素のプロパティを x-model の対象とすることができます。下記の例では子要素が持つ number というプロパティをモデル対象可能の宣言しています。親要素はこれを count というプロパティでモデル宣言しています。

HTML
<style>
.btn { border:1px solid #888; border-radius:3px; background:#ddd;
       padding:0 8px; cursor:pointer; user-select:none; }
</style>
<div x-data="{ count: 0 }">
  <div>親：<span class="btn" @click="count++">Up</span> <span x-text="count"></span></div>
  <div x-data="{ number: 0 }" x-modelable="number" x-model="count">
    子：<span class="btn" @click="number++">Up</span> <span x-text="number"></span>
  </div>
</div>
表示
親：Up
子：Up

要素に$refで参照できる名前をつける(x-ref)

x-ref は $ref マジックプロパティに割り当てられる名前を定義します。下記の例では div 要素に my_message というリファレンス名を定義しています。これを、$ref.reference_name として参照することができます。

HTML
<div x-data>
  <button @click="$refs.my_message.remove()">Remove message</button>
  <div x-ref="my_message">This is my message.</div>
</div>
表示
This is my message.

値の変化時にアクションを実行する(x-effect)

x-effect は x-data で定義したプロパティが変更される度にと呼び出されるハンドラを定義します。下記の例では、count プロパティが変化する度にその値を output 要素に追記しています。

HTML
<div x-data="{ count: 0 }" x-effect="$refs.output.innerText += ' ' + count">
  <button @click="count++">Count UP</button>
  <div x-text="count"></div>
  <output x-ref="output"></output>
</div>
表示

表示・非表示切り替え時にトランジションをかける(x-transition)

x-transition は表示・非表示が切り替わる際にトランジションをかけます。

HTML
<div x-data="{ open: true }">
  <button @click="open = !open">Show / Hide</button>
  <div x-show="open" x-transition.duration.1000ms
       style="background-color:#f88; width:100px; height:100px;"></div>
</div>
表示

下記の様なパラメーター調整が可能です。800 や 10 の数値は変更可能です。秒(s) は指定できません。

<div ... x-transition>                          # デフォルト(透明度とスケール)
<div ... x-transition.duration.800ms>           # 再生時間
<div ... x-transition.delay.800ms>              # 遅延時間
<div ... x-transition.opacity>                  # 透明度のみ変化させる
<div ... x-transition.scale>                    # スケールのみ変化させる
<div ... x-transition.scale.10>                 # 10%の大きさにまで縮小(デフォルトは95%)
<div ... x-transition.scale.origin.top.left>    # 左上端を基準点とする

下記のように繋げて記述することもできます。

# 800ms遅延後に、800msの時間をかけて、左上を基準点として、10%の大きさまで縮小
<div ... x-transition.scale.10.origin.top.left.duration.800ms.delay.800ms>

表示する際のパラメーターと非表示にする際のパラメーターを個別に指定することもできます。

<div ... x-transition:enter.duration.800ms>     # 表示時の指定
<div ... x-transition:leave.duration.800ms>     # 非表示時の指定

また、下記の様に表示開始時、表示遷移中などのクラス名を指定することもできます。下記では Tailwind CSS のクラス名を指定しています。

<div ... x-transition:enter-start="opacity-0 scale-90">          # 表示開始時
<div ... x-transition:enter="transition ease-out duration-300">  # 表示遷移中
<div ... x-transition:enter-end="opacity-100 scale-100">         # 表示終了時
<div ... x-transition:leave-start="opacity-100 scale-100">       # 非表示開始時
<div ... x-transition:leave="transition ease-in duration-300">   # 非表示遷移中
<div ... x-transition:leave-end="opacity-0 scale-90">            # 非表示終了時

Alpine.jsが初期化されるまでのちらつきを無くす(x-cloak)

cloak(クローク)には覆い隠すという意味があります。Alpine.js の対象要素に x-cloak を指定し、スタイルに下記を指定することにより、Alpine.js の初期化が完了するまでの画面のちらつきを見せなくすることができます。

HTML
<style>
[x-cloak] { display: none !important; }
</style>
<div x-cloak x-data="...">
  ...
</div>

Alpineディレクティブを無効化する(x-ignore)

x-data による Alpine.js 処理対象要素であっても、x-ignore を指定した要素とその子孫要素には Alpine.js が処理を行いません。x- で始まるディレクティブが他のフレームワークと競合する場合に Alpine.js の効力を打ち消す際に使用されます。

HTML
<div x-data="{ message: 'Hello world!' }">
  <div>
    <div>A: <span x-text="message"></span></div>
  </div>
  <div x-ignore>
    <div>B: <span x-text="message"></span></div>
  </div>
</div>
表示
A:
B:

要素を別要素の直下に移動する(x-teleport)

ダイアログなどの要素の DOM ツリー上の位置を、指定した要素直下に移動させ、現在位置のスタイルの影響を受けてしまうことを防ぎます。下記の例では、通常であれば color:red の影響を受けますが、x-teleport で body 要素の直下に移動しているため、その影響をうけません。x-teleport は <template> タグに記述します。値には CSS のセレクタを指定します。

HTML
<style>
#dialog {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px 100px;
  border: 1px solid gray;
  box-shadow: 3px 3px 3px 0px #888;
  background-color: #fff;
}
</style>
<div  style="color:red">
  <div x-data>
    <div>This message is red.</div>
    <button @click="$refs.dialog.style.display='flex'">Show</button>
    <template x-teleport="body">
      <div x-ref="dialog" id="dialog">
        <div>This message is not red.</div>
        <button @click="$refs.dialog.style.display='none'">Close</button>
      </div>
    </template>
  </div>
</div>
表示
This message is red.

要素のidを自動採番する(x-id)

ある部品内で for="..." や id="..." を使用する場合、部品を複数回指定すると ID が重複してしまうことがあります。x-id でプレフィックスを指定し、属性名の前にコロン(:)をつけ、$id(prefix) を指定することで、Alpine.js が自動的に ID を採番してくれます。

HTML
<div x-data>
  <div x-id="['input']">
    <label :for="$id('input')">Name：</label><input :id="$id('input')">
  </div>
  <div x-id="['input']">
    <label :for="$id('input')">Name：</label><input :id="$id('input')">
  </div>
  <div x-id="['input']">
    <label :for="$id('input')">Name：</label><input :id="$id('input')">
  </div>
</div>
表示
   # id="input-1"
   # id="input-2"
   # id="input-3"

プレフィックスは複数指定することもできます。

HTML
<div x-data>
  <div x-id="['key', 'val']">
    <div><label :for="$id('key')">Key：</label><input :id="$id('key')"></div>
    <div><label :for="$id('val')">Val：</label><input :id="$id('val')"></div>
  </div>
  <div x-id="['key', 'val']">
    <div><label :for="$id('key')">Key：</label><input :id="$id('key')"></div>
    <div><label :for="$id('val')">Val：</label><input :id="$id('val')"></div>
  </div>
</div>
表示
   # id="key-1"
   # id="val-1"
   # id="key-2"
   # id="val-2"

マジックプロパティ・マジックメソッド

$refs や $el や $watch()など $ で始まるマジックプロパティやマジックメソッドがあります。

x-refで名前付けした要素参照($refs)

$refs を用いて x-ref で定義した名前の要素を参照することができます。下記の例ではボタンをクリックすると x-ref="output" を記述した要素の value に値を設定しています。

HTML
<div x-data>
  <div><input type="text" x-ref="output"></div>
  <div><button @click="$refs.output.value='Hello!'">Hello</button></div>
</div>
表示

イベントハンドラから参照する自要素($el)

$el はイベントハンドラにおいて自要素を参照します。下記の例では input 要素に値を入力するとその入力値をすべて大文字に変換しています。

HTML
<div x-data>
  <input type="text" @input="$el.value=$el.value.toUpperCase()">
</div>
表示

ストアメモリ($store)

$store は Alpine.store() で定義したグローバル値を参照します。これにより、複数の x-data ブロックで値を共有することができます。

HTML
<div x-data x-init="Alpine.store('darkMode', false)">
</div>
<div x-data>
  <button @click="$store.darkMode = !$store.darkMode">Toggle</button>
</div>
<div x-data>
  <input type="text" :value="$store.darkMode">
</div>
表示

プロパティをウォッチする($watch())

$watch() は第1引数で指定したプロパティを監視し、変更があると第2引数で指定した関数を実行します。下記の例では1つ目の input 要素に値を入力すると x-model により message が変化し、$watch() がそれを検出して2つ目の input 要素にその値を表示しています。

HTML
<div x-data="{message: ''}" x-init="$watch('message', value => $refs.output.value=value)">
  <div><input type="text" x-model="message"></div>
  <div><input type="text" x-ref="output"></div>
</div>
表示

イベントを発行する($dispatch())

$dispatch() はイベントを発行します。発行したイベントは @eventName で受け取ることができます。

HTML
<div x-data @my-event="alert('Hello!')">
  <button @click="$dispatch('my-event')">MyEvent</button>
</div>
表示

下記の様にイベントに引数を渡すこともできます。

HTML
<div x-data @my-event="alert($event.detail.message)">
  <button @click="$dispatch('my-event', {message: 'Hello!'})">MyEvent</button>
</div>

Alpine処理実行後に処理を行う($nextTick())

$nextTick() には Alpine の処理が終わった後で実行したい関数を指定します。下記の例では、ボタンを押すと message の値が代わり、Alpine が x-ref="output" の要素に message を表示します。その後、$nextTick() で指定した関数が実行され、その値をアラート表示しています。

HTML
<div x-data="{message: ''}">
  <button @click="message='Hello!'; $nextTick(() => alert($refs.output.value))">Click</button>
  <input type="text" x-model="message" x-ref="output">
</div>
表示

ルート要素を参照する($root)

$root は x-data を宣言した Alpine のルート要素を参照します。

HTML
<div x-data="{message: ''}" data-message="Hello!">
  <button @click="alert($root.dataset.message)">Click</button>
</div>
表示

データを参照する($data)

$data は x-data で定義したデータを参照します。

HTML
<div x-data="{message: 'Hello'}">
  <button @click="alert($data.message)">Click</button>
</div>
表示

IDを自動採番する($id())

$id() は x-id で指定したプレフィックスを用いた ID を自動生成します。詳細は x-id を参照してください。

HTML
<div x-data>
  <div x-id="['input']">
    <label :for="$id('input')">Name：</label><input :id="$id('input')">
  </div>
  <div x-id="['input']">
    <label :for="$id('input')">Name：</label><input :id="$id('input')">
  </div>
  <div x-id="['input']">
    <label :for="$id('input')">Name：</label><input :id="$id('input')">
  </div>
</div>
表示
   # id="input-1"
   # id="input-2"
   # id="input-3"

Alpineメソッド

データ定義(Apline.data())

Alpine.data() は x-data で参照可能なデータオブジェクトを生成します。下記の例では Alpine の初期化時に mycounter という名前のデータオブジェクトを生成し、それを x-data で参照しています。データオブジェクトの中では counter プロパティと countup() メソッドが定義されています。

HTML
<div x-data="mycounter">
  <button @click="countup">Count UP</button>
  <input x-model="counter">
</div>
<script>
document.addEventListener('alpine:init', () => {
  Alpine.data('mycounter', () => ({
    counter: 0,
    countup() { this.counter++ }
  }))
})
</script>
表示

属性値のバインド設定(Apline.bind())

Alpine.bind() は x-bind で参照可能なバインドオブジェクトを生成します。下記の例では Alpine の初期化時に SomeButton という名前のバインドオブジェクトを生成し、それを x-bind で参照しています。

HTML
<button x-bind="SomeButton"></button>
<script>
document.addEventListener('alpine:init', () => {
  Alpine.bind('SomeButton', () => ({
    type: 'button',
    '@click'() { this.doSomething() },
    ':disabled'() { return this.shouldDisable },
  }))
})
</script>

上記は、下記とほぼ同じ意味を持ちます。

HTML
<button type="button" @click="doSomething()" :disabled="shouldDisable"></button>

ストアメモリ設定(Apline.store())

Alpine.store() は $store で参照可能なグローバル値を定義します。これにより、複数の x-data ブロックで値を共有することができます。

HTML
<div x-data x-init="Alpine.store('darkMode', false)">
</div>
<div x-data>
  <button @click="$store.darkMode = !$store.darkMode">Toggle</button>
</div>
<div x-data>
  <input type="text" :value="$store.darkMode">
</div>
表示

プラグイン

Alpine.js を利用したいくつかのプラグインが公開されています。

マスクプラグイン(x-mask)

x-mask プラグインは input 要素の入力値に制約をかけます。HTML で使用する場合は下記のプラグインを読み込んでください。alpinejs よりも先に読み込ませる必要があります。

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

NPM を使用する場合は下記の様にインストールしてください。

CLI
npm install @alpinejs/mask
JavaScript
import Alpine from 'alpinejs'
import mask from '@alpinejs/mask'
 
Alpine.plugin(mask)

下記のようにして input 要素の入力値に制約をかけることができます。9 は 0～9 の数値、a は a～z、A～Z の英字、* は任意の文字を表します。

HTML
<div x-data>
  <input type="text" x-mask="9999/99/99" placeholder="YYYY/MM/DD">
</div>
表示

インターセクトプラグイン(x-intersect)

x-intersect プラグインは要素がスクロールなどによって表示された時の動作を指定します。HTML で使用する場合は下記のプラグインを読み込んでください。alpinejs よりも先に読み込ませる必要があります。

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

NPM を使用する場合は下記の様にインストールしてください。

CLI
npm install @alpinejs/intersect
JavaScript
import Alpine from 'alpinejs'
import intersect from '@alpinejs/intersect'
 
Alpine.plugin(intersect)

下記の例では、スクロールにより x-intersect を指定した要素が画面に表示し始めたタイミングで shown=true を実行し、トランジション付きで要素を表示しています。

HTML
<div style="height:100px; overflow-y:scroll;">
  <div style="height:500px"></div>
  <div x-data="{ shown: false }" x-intersect="shown=true">
    <div id="box" x-show="shown" x-transition.scale.0.origin.left.duration.2000ms>
      Hello! I'm in the viewport!
    </div>
  </div>
</div>
表示
Hello! I'm in the viewport!

リサイズプラグイン(x-resize)

x-resize プラグインは要素がリサイズされた時の動作を指定します。HTML で使用する場合は下記のプラグインを読み込んでください。alpinejs よりも先に読み込ませる必要があります。

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

NPM を使用する場合は下記の様にインストールしてください。

CLI
npm install @alpinejs/resize
JavaScript
import Alpine from 'alpinejs'
import resize from '@alpinejs/resize'
 
Alpine.plugin(resize)

下記の例では、要素をリサイズしたタイミングで width と height に要素サイズ $width と $height を設定し、x-text でその値を表示しています。

HTML
<div x-data="{ width: 0, height: 0 }" x-resize="width=$width; height=$height"
    style="border:1px solid #ccc; width: 200px; overflow:hidden; resize:both">
  <div x-text="'width: ' + width"></div>
  <div x-text="'height: ' + height"></div>
</div>
表示

持続メモリ($persist())

$persist() プラグインは画面を再表示しても持続的に保持される変数を生成します。localStorage を用いて実装されています。HTML で使用する場合は下記のプラグインを読み込んでください。alpinejs よりも先に読み込ませる必要があります。

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

NPM を使用する場合は下記の様にインストールしてください。

CLI
npm install @alpinejs/persist
JavaScript
import Alpine from 'alpinejs'
import persist from '@alpinejs/persist'
 
Alpine.plugin(persist)

下記の例では、[Increment] ボタンを押すとカウンター値が増えます。画面を再表示しても値が維持されます。値をクリアするには [F12] から DevTools を起動して、[Application]-[Storage]-[Local storage] で _x_variableName を削除してください。

HTML
<div x-data="{ count: $persist(0) }">
  <button @click="count++">Increment</button>
  <span x-text="count"></span>
</div>
表示

フォーカス(x-trap, $focus)

x-trap, $focus プラグインはダイアログなどのモーダルウィンドウを表示した際、モーダルウィンドウ以外にフォーカスが移動しないよう制御します。HTML で使用する場合は下記のプラグインを読み込んでください。alpinejs よりも先に読み込ませる必要があります。

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

NPM を使用する場合は下記の様にインストールしてください。

CLI
npm install @alpinejs/focus
JavaScript
import Alpine from 'alpinejs'
import focus from '@alpinejs/focus'
 
Alpine.plugin(focus)

下記の例では、ボタンを押すと入力欄とCloseボタンを表示しますが、x-trap によりその他の部品にはフォーカスが移動しないように制限しています。

HTML
<div x-data="{ open: false }">
  <button @click="open = true">Open Dialog</button>
  <div x-show="open" x-trap="open">
    <input type="text" placeholder="Some input...">
    <button @click="open = false">Close</button>
  </div>
</div>
表示

.inert, .noscroll, .noreturn, .noautofocus などの修飾子や $focus オブジェクトが持つ focus(el) や focused() などいくつかのメソッドがサポートされています。詳細は Focus を参照してください。

コラプス(x-collapse)

x-collapse プラグインは要素をアコーディオンのように開閉します。HTML で使用する場合は下記のプラグインを読み込んでください。alpinejs よりも先に読み込ませる必要があります。

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

NPM を使用する場合は下記の様にインストールしてください。

CLI
npm install @alpinejs/collapse
JavaScript
import Alpine from 'alpinejs'
import collapse from '@alpinejs/collapse'
 
Alpine.plugin(collapse)

下記の例では、s-show で表示・非表示を切り替えていますが、x-collapse を指定しているため、アコーディオンの様な視覚効果を伴って開閉されます。

HTML
<div x-data="{ open: false }">
  <button @click="open = ! open">Toggle Content</button>
  <p x-show="open" x-collapse>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit,
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
     Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
     Excepteur sint occaecat cupidatat non proident,
     sunt in culpa qui officia deserunt mollit anim id est laborum.
   </p>
</div>
表示

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

下記の様に min.length を指定すると非表示の場合でも上部 20px の範囲だけは常に表示するようになります。

x-collapse.min.20px

アンカー(x-anchor)

x-anchor プラグインはポップアップメニューのようなアンカーに紐づいた要素の表示・非表示を実現します。HTML で使用する場合は下記のプラグインを読み込んでください。alpinejs よりも先に読み込ませる必要があります。

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

NPM を使用する場合は下記の様にインストールしてください。

CLI
npm install @alpinejs/anchor
JavaScript
import Alpine from 'alpinejs'
import anchor from '@alpinejs/anchor'
 
Alpine.plugin(anchor)

下記の例では、ボタンを押した時にメニュー要素をポップアップメニューの表示開閉しています。

HTML
<style>
.menu { border:1px solid #ccc; background: #fff; padding:6px 10px; }
</style>
<div x-data="{ open: false }">
  <button x-ref="button" @click="open = ! open">Menu</button>
  <div class="menu" x-show="open" x-anchor.bottom-start="$refs.button">
    <div>Menu#1</div>
    <div>Menu#2</div>
    <div>Menu#3</div>
    <div>...</div>
  </div>
</div>
表示
Menu#1
Menu#2
Menu#3
...

x-anchor.position の position にはメニューの表示位置を .top, .top-start, .top-end, .left, .left-start, .left-end, .right, .right-start, .right-end, .bottom, .bottom-start, .bottom-end のいずれかで指定します。省略時は .bottom と見なします。また、下記の様にオフセット値を指定することもできます。

HTML
x-anchor.offset.10="..."

モーフ(Alpine.morph())

Alpine.morph() は DOM を書き換える際に innerHTML に値を設定する際のような全書き換えではなく、差分のみを変更します。これにより、既存の要素にすでに値が入力されている場合、その値がクリアされてしまうことを防ぎます。HTML で使用する場合は下記のプラグインを読み込んでください。alpinejs よりも先に読み込ませる必要があります。

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

NPM を使用する場合は下記の様にインストールしてください。

CLI
npm install @alpinejs/morph
JavaScript
mport Alpine from 'alpinejs'
import morph from '@alpinejs/morph'
 
window.Alpine = Alpine
Alpine.plugin(morph)

下記の例で、入力欄に何か入力した後に [Add] ボタンを押してみてください。差分要素のみを変更するため、入力値を保持したまま要素を変更することができます。

HTML
<button id="morph-btn">Add</button>
<div id="morph-input">
  <input type="text">
</div>
<script>
document.getElementById("morph-btn").addEventListener("click", () => {
  const el = document.getElementById("morph-input");
  Alpine.morph(el, '\
  <div id="morph-input">\
    <input type="text">\
    <input type="text">\
  </div>');
});
</script>
表示

ソート(x-sort)

x-sort プラグインを用いて要素をドラッグ＆ドロップして並び替えることができます。HTML で使用する場合は下記のプラグインを読み込んでください。alpinejs よりも先に読み込ませる必要があります。

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

NPM を使用する場合は下記の様にインストールしてください。

CLI
npm install @alpinejs/sort
JavaScript
import Alpine from 'alpinejs'
import sort from '@alpinejs/sort'
 
Alpine.plugin(sort)

下記の例で、foo や bar や baz をマウスでドラッグ＆ドロップして順序を変更してみてください。コンソールも移動した要素のアイテム値と位置が表示されます。

HTML
<div x-data>
  <ul x-sort="console.log($item, $position)">
    <li x-sort:item="'foo'">foo</li>
    <li x-sort:item="'bar'">bar</li>
    <li x-sort:item="'baz'">baz</li>
  </ul>
</div>
表示
  • foo
  • bar
  • baz
Copyright (C) 2026 杜甫々
https://www.tohoho-web.com/ex/alpine.html