2020年7月28日更新

Alpine.jsの基本的なディレクティブの使い方

Thumbnail

今回はAlpine.jsのx-datax-onのようなディレクティブの基本的な使い方について書いていきたいと思います。

Alpine.jsでシンプルなカウンターと展開可能なパネルを作ってみた

Alpine.jsのディレクティブ

Alpine.jsでは2020年8月の時点で14のディレクティブが利用できます。

Alpine.jsで使えるディレクティブ

  1. x-data
  2. x-init
  3. x-show
  4. x-bind
  5. x-on
  6. x-model
  7. x-text
  8. x-html
  9. x-ref
  10. x-if
  11. x-for
  12. x-transition
  13. x-spread
  14. x-cloak

その1:x-data

おそらくAlpine.jsでもっとも基本的なディレクティブです。
オブジェクトを使って、コンポーネントのスコープを初期化することができるほか、例2のようにスコープの外で定義した関数を使って初期化することもできます。

構造

HTML
コピーする
<div x-data="[JSON data object]">...</div>

例1

まずはインラインでステートを初期化してみます。
x-dataで複数のステートを初期化したい場合には、次のようにカンマ区切りで追加することができます。

HTML
コピーする
<div x-data="{name: 'Alpine.js', language: 'JavaScript'}">
<p x-text="name"></p>
<p x-text="language || '準備中'"></p>
</div>

例2

今度はスコープの外で定義した関数を使って初期化してみます。

HTML
コピーする
<div x-data="panel()">
<button
@click="handleClick"
x-text="!isShow ? '展開する' : '折りたたむ'"
></button>
<p x-show="isShow">
あのイーハトーヴォの すきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
</p>
</div>
<script>
function panel() {
return {
isShow: false,
handleClick() {
return (this.isShow = !this.isShow);
},
};
}
</script>

その2:x-init

x-initではDOMが初期化される直前のタイミングで処理を実行することができます。

構造

HTML
コピーする
<div x-data="..." x-init="[式]"></div>

上でもDOMが初期化される直前x-initが実行されると書いたように、そのままではx-initが実行されるタイミングではDOMが出来上がっていません。
ためしに下のコードを実行すると、コンソールには「DOM初期化前の値」と表示されます。

HTML
コピーする
<div
x-data="{name: 'DOM初期化後の値'}"
x-init="console.log($refs.nameInput.value)"
>
<input
type="text"
x-ref="nameInput"
value="DOM初期化前の値"
/>
</div>

もし、inputタグのvalueを取得したいときのように、DOMが出来上がっていることを前提にしたいときには、x-initの中でコールバック関数を使えば(() =>)、DOMが初期化された後で処理を実行することができます。

また、次のようにx-initの中でコールバック関数を使ってみると、コンソールには「DOM初期化後の値」と表示されます。
※ 上のコードとは、x-initの中でコールバック関数を使っている以外は同じです。

HTML
コピーする
<div
x-data="{name: 'DOM初期化後の値'}"
x-init="() => console.log($refs.nameInput.value)"
>
<input
type="text"
x-ref="nameInput"
value="DOM初期化前の値"
/>
</div>

その3:x-show

x-showでは要素の表示/非表示を切り替えることができます。

x-showの中がtrueになると要素にインラインでdisplay: noneが追加され、falseになるとdisplay: noneが取り除かれます。

※ もしDOMから要素を完全に消してしまいたい場合には、x-ifを使います。

構造

HTML
コピーする
<div x-show="[式]"></div>

下のコードではx-showがfalseになるので文字は表示されませんが、

HTML
コピーする
<div x-data="{isShow: false}">
<p x-show="isShow">表示されない文字</p>
</div>

次のコードではx-showの式がtrueになり、文字が表示されます。

HTML
コピーする
<div x-data="{isShow: true}">
<p x-show="isShow">表示される文字</p>
</div>

下の例では開発者ツールを使って、isShowの値をtrue/falseで切り替えています。

その4:x-bind

x-bindを使うと、(type属性やclass属性などの)HTML要素の属性を動的に変更することができます。

※ x-bindでは親から子へ一方通行のデータのやり取りになりますが、親と子で双方向のやり取りしたい場合には、x-modelを使います。

構造

HTML
コピーする
<input x-bind:[属性]="[式]">

x-bindでは:[属性]=[式]のようにx-bindのキーワードを省略して書くこともできます。

HTML
コピーする
<input x-bind:type="...">
<input :type="...">
<div x-bind:class="..."></div>
<div :class="..."></div>

下のコードではisDisabledがtrueになるとdisabled="disabled"disabledClassというクラス名が追加されます。

HTML
コピーする
<form x-data="{isDisabled : false}">
<input
type="text"
:disabled="isDisabled"
:class="{'disabledClass' : isDisabled}"
/>
</form>

その5:x-on

x-onではクリックやマウスオーバーなどのイベントを監視することができます。

構造

HTML
コピーする
<button x-on:[event]="[expression]"></button>

x-onについても@[イベント名]="[式]"のように、キーワードを省略して書くことができます。

HTML
コピーする
<button x-on:click="..."></button>
<button @click="..."></button>
<div x-on:mouseenter="..."></div>
<div @mouseenter="..."></div>

下のコードはボタンをクリックすると+1/-1するカウンターになりますが、@clickでクリックしたときの処理を指定しています。

HTML
コピーする
<div x-data="{count: 0}">
<div>
<button @click="count++">
+1
</button>
<button @click="count--">
-1
</button>
<button @click="count = 0">
リセット
</button>
</div>
<p>Total:<strong x-text="count"></strong></p>
</div>

その6:x-model

上で書いたx-bindは親から子への一方向のデータのやり取りをしていましたが、x-modelを使うことで親と子の双方向でデータをやり取りすることができます。

構造

HTML
コピーする
<input type="text" x-model="[data item]">

HTML
コピーする
<div x-data="{name: ''}">
<input type="text" x-model="name" />
<p>Hello <span x-text="name"></span></p>
</div>

その7:x-text

要素のテキストを更新することができます。

構造

HTML
コピーする
<span x-text="[expression]"></span>

x-textinnerHTMLと同じように動くらしく、下のコードの「表示されない文字」というテキストは「山田太郎」に上書きされます。

HTML
コピーする
<div x-data="{name: '山田太郎'}">
<p x-text="name">表示されない文字</p>
</div>

また、x-textで表示したいステートが設定されてない場合のフォールバックとして、次のように||を使うこともできます。

HTML
コピーする
<div x-data="{name: '山田太郎'}">
<p x-text="name || '準備中'"></p>
</div>

その8:x-html

x-htmlではinnerHTMLと同じように、要素のHTMLを上書きすることができます。

※ x-textではテキストを上書きしましたが、x-htmlではHTML自体を上書きします。

構造

HTML
コピーする
<span x-html="[expression]"></span>

その9:x-ref

構造

HTML
コピーする
<div x-ref="[ref name]"></div><button x-on:click="$refs.[ref name].innerText = 'bar'"></button>

HTML
コピーする
<div x-data="{name: ''}">
<input type="text" x-ref="nameInput" x-model="name" />
<p x-text="$refs.nameInput.value"></p>
</div>

その10:x-if

構造

HTML
コピーする
<template x-if="[expression]"><div>Some Element</div></template>

Copyrights © WebCraftLogAll Rights Reserved.