【Alpine.js】x-modelで簡単な検索機能を実装

公式ドキュメントで見つけました。

　↓ 実際の挙動はこちらからで確認できます。

これだけで簡単に検索機能が実装できる。

<div
    x-data="{
        search: '',
        items: ['foo', 'bar', 'baz'],
        get filteredItems() {
            return this.items.filter(
                i => i.startsWith(this.search)
            )
        }
    }"
>
    <input x-model="search" placeholder="Search...">
 
    <ul>
        <template x-for="item in filteredItems" :key="item">
            <li x-text="item"></li>
        </template>
    </ul>
</div>

↓ ここのコードで分かる通り、入力した文字列の始めに一致する(startWith)ものを検索しています。

    get filteredItems() {
        return this.items.filter(
            i => i.startsWith(this.search)

getについて
getはAlpine.jsの機能ではなく、JavaScriptの機能です。
動的なプロパティの変化を反映させるためのもので、これをゲッター(getter)と呼びます。

※筆者は実際に使ったことは無いので、間違えてたらすみません。正確な情報を知りたい方は下記公式ドキュメントに目を通しておいてください。

仕組み

①x-modelでinputに入力された文字をsearchに格納する。
②searchの入力と同時に、getで動的にfilteredItems()を実行して配列から検索をする。

まとめ

実際に検索機能を生のJavaScriptで書いたことありますが、結構時間かかりました。
それに比べてなんじゃこれは。トッテモ楽に書ける。
Alpine.js最高オブザイヤー受賞。