Alpine.jsでページ内で一意になる文字列を生成する方法

こんにちは。エキサイトでデザイナーをしている齋藤です。

今回は、Alpine.jsでページ内で一意になる文字列を生成する方法をご紹介します。

実現したいこと
Alpine.jsの$idマジックが便利
x-id属性と組み合わせるとグルーピングができる
まとめ
- 参考文献

実現したいこと

冒頭、実現したいことを整理します。

以下のようなHTMLがあるとします。

<div>要素1</div>
<div>要素2</div>

次のように、それぞれのdivに対して一意なidが設定されるようにしたいです。

<div id="element-1">要素1</div>
<div id="element-2">要素2</div>

Alpine.jsの$idマジックが便利

この際、Alpine.jsの$idマジックが便利です。

Alpine.jsはHTMLタグに専用の属性を記述することで処理を実装するスタイルの最小限の機能と軽量が特徴なJSフレームワークです。

alpinejs.dev

$idマジックを使用すると次のように実装できます。

<div x-data>
    <div :id="$id('element')">要素1</div>
    <div :id="$id('element')">要素2</div>
</div>

$idマジックは$id('{任意の文字列}')の形式で使用し、設定した任意の文字列がページ内では一意になるように接尾辞（数字）が自動的に追加されます。

出力されるHTMLは以下ようになります。

<div x-data>
    <div :id="element-1">要素1</div>
    <div :id="element-2">要素2</div>
</div>

x-id属性と組み合わせるとグルーピングができる

x-id属性と組み合わせるとグルーピングができます。簡単な例をお示しします。

<form x-data>
    <div x-id="['like-food']">
        <!-- for属性には`like-food-1`が格納される -->
        <label :for="$id('like-food')">好きな食べ物１</label>

        <!-- id属性には`like-food-1`が格納される -->
        <input :id="$id('like-food')" type="text">
    </div>
    <div x-id="['like-food']">
        <!-- for属性には`like-food-2`が格納される -->
        <label :for="$id('like-food')">好きな食べ物２</label>

        <!-- id属性には`like-food-2`が格納される -->
        <input :id="$id('like-food')" type="text">
    </div>
</form>