Alpine.js をさわってみた（x-data編）

Alpine.js は、Vue.jsによく似たコードの書き方で、より簡単にリアクティブなサイトが構築できるJSフレームワークです。

今回は、x-data ディレクティブについての記事です。

x-data ディレクティブ

Alpine.js の x-data ディレクティブは、簡単にいうとVue.jsの dataプロパティ のようなものです。x-data デレクティブにオブジェクトリテラルを書き込むと、書き込んだ要素およびその子要素でオブジェクトデータが使えるようになります。

例１

<!-- flowerプロパティの値を'yuri'とする -->
<div x-data="{ flower: 'yuri' }">

  <!-- x-data のオブジェクトデータを x-text="プロパティ名" で表示する -->
  <div x-text="flower"></div>
</div>

See the Pen zYKbaRZ by Masahiro (@masahiro111) on CodePen.

---

ちなみに、x-text デレクティブを書く場所が、x-data を書いた要素の外だった場合は、その x-data のオブジェクトデータを参照することができません。

例２

<div>
 <!-- flowerプロパティの値を'himawari'とする -->
 <div x-data="{ flower: 'himawari' }">
   <!-- x-data のオブジェクトデータがある要素内であるため参照できる -->
   <p>x-dataのある要素内</p>
   <div x-text="flower"></div>
 </div>
 <!-- x-data のオブジェクトデータがある要素外であるため参照できない -->
  <hr>
  <p>x-dataのある要素の外側</p>
 <div x-text="flower"></div>
</div>

See the Pen wvzOXmL by Masahiro (@masahiro111) on CodePen.

---

複数のプロパティをカンマで区切って記述できます。

例３

 <!-- 複数のプロパティ -->
 <div x-data="{ flower: 'himawari', season: 'summer' }">
   flower: <div x-text="flower"></div>
   season: <div x-text="season"></div>
 </div>

See the Pen YzGgvvj by Masahiro (@masahiro111) on CodePen.

---

入れ子にすると注意が必要

例４

<!-- 入れ子 -->
<div x-data="{ flower: 'himawari' }">
  <div x-data="{ season: 'summer' }">

    <!-- 入れ子にするとflowerプロパティが参照できなくなってしまう -->
    flower: <div x-text="flower"></div>
  </div>
</div>

See the Pen dypaeYX by Masahiro (@masahiro111) on CodePen.

---

x-data はデータと動作を繰り返し利用できる関数に抽出することができる。 の日本語ドキュメントのドロップダウンの例を参考に、どういった動作をしているのかを追ってみた。

例５

<div x-data="dropdown()">
    <button x-on:click="open()">オープン</button>

    <div x-show="isOpen()" x-on:click.away="close()">
       <p>ボタンもしくは、ボタンの外をクリックすると閉じます</p>
    </div>
</div>

<script>
    function dropdown() {
        return {
            show: false,
            open() { this.show = true },
            close() { this.show = false },
            isOpen() { return this.show === true },
        }
    }
</script>

1行目の x-data="dropdown()" のところで新しいコンポーネントスコープを宣言しています。x-dataの関数は、<script>タグで定義されているdropdown()を呼び出しています。dropdown 関数を見てみると、

    function dropdown() {
        return {
            // オブジェクトデータ
        }
    }

となっていて、オブジェクトデータの部分に プロパティ＆値を入れたり、さらに関数を定義できたりします。

See the Pen ExgMqea by Masahiro (@masahiro111) on CodePen.