ざっくりAlpine.js

「最近プロジェクトで使用しているlivewireについての記事でも書くか〜」っと思ったが、その前にalpine.jsについて書いた方が順序として綺麗だなと思ったので、軽く書いておく。
公式サイトはこちら（日本語訳はないけどシンプルなので労せず読めるはず）

概論

シンプルにしたVueのようなもの。
公式サイトにあるモダンなjQueryって言い方がしっくりくる

使い方

index.html

    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

これだけでOK
あとはx-dataでデータを定義して、そのコンポーネント内でなんやかんやしていく。
使用頻度高いなと感じたのは以下。

x-text

・タグ内に定義したデータを出力する。
・""内にjsを書ける。
・{}とかで出力されるわけではない。

index.html

<div x-data="{ message: 'Alpineによるデータ定義' }">
    <p x-text="message"></p> <!-- Alpineによるデータ定義と出力 -->
    <p>{message}</p> <!-- こっちは{message}となる -->
    <p x-text="10 * 10"></p> <!-- 100と出力 -->
</div>

x-on(@)

・イベントリスナ

index.html

<div x-data="{count:0}">
    <p x-text="count"></p>
    <button x-on:click="count++">カウントアップ</button>
    <button @click="count++">こっちも同じ</button>
</div>

x-if,x-show

・表示/非表示切り替え
・x-ifは要素自体を、x-showは表示/非表示のみ切り替える
・x-ifはtemplateタグ内でのみ使用可能

index.html

<div x-data="{display:true}">
    <template x-if="display">
        <p>ifによる表示/非表示</p>
    </template>
    <p x-show="display">showによる表示/非表示</p>
    <button @click="display = !display">切り替え</button>
</div>

x-for

・色々操作する場合はkeyが必要（例みたいに表示だけなら不要）
・使用する場合はtemplateタグ

index.html

<div x-data="{datas:
    [
        {
            id:1,
            name:'ichiro',
        },
        {
            id:2,
            name:'ziro',
        },
        {
            id:3,
            name:'saburo',
        },
    ]
}">
    <template x-for="data in datas" :key="data.id">
        <p x-text="data.name"></p>
    </template>
</div>

$el

・その要素自身を表す($thisみたいなもの)

index.html

<div x-data="{message:''}">
    <input @input="message = $el.value">
    <p x-text="message"></p><!-- inputの値と連動 -->
</div>

$store

・グローバルな値を扱う

index.html

<div x-init="$store.message = '初期メッセージ'"></div>
<div x-data>
    <p x-text="$store.message"></p> <!-- 別コンポーネントで定義しているが、グローバルなので出力 -->
</div>