Alpine.jsのx-modelで入力された値を参照する方法

Alpine.js マークアップ フロントエンド

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

今回は、Alpine.jsで、input要素などで入力された値を参照したい場合に有用なx-modelディレクティブをご紹介します。

x-modelとは

x-modelはAlpine.jsのディレクティブの一つで、これを使用するとinput要素に入力された値をAlpine.jsで扱えるデータとしてバインドできます。

基本的な使い方

まずは、基本的な使い方を単純な例でお示しします。

See the Pen x-modelの簡単な例 by AyumuSaito (@ayumusaito-excite) on CodePen. 

<div x-data="{ inputedText: '' }">
  <input x-model="inputedText" type="text" placeholder="文字を入力" />
  <p>入力された値：<span x-text="inputedText"></span></p>
</div>
  1. x-dataでinputedTextを定義（空文字）
  2. input要素に付与したx-modelを使用して入力された値を格納
  3. x-textでinputedTextの値を参照して文字列としてリアルタイムに出力

といった処理の流れです。

どんな使い道があるか

先の例では単純に入力された値を出力するだけでしたが、以下のようにバリデーションを視覚的に表したい場合にも使えます。（CodePenにぜひ触れてみてください）

See the Pen Untitled by AyumuSaito (@ayumusaito-excite) on CodePen. 

<div x-data="{ inputedHandleName: '' }">
  <div>
    <label for="handlename">ハンドルネーム（4文字以上）</label>
    <input 
    x-model="inputedHandleName"
    type="text" 
    name="handlename" 
    id="handlename"
    pattern=".{4,}"
    />
  </div>
  <div x-show="inputedHandleName.length > 0 && inputedHandleName.length < 4">
      <p>ハンドルネームは4文字以上の必要があります</p>
  </div>
</div>

この例では、入力されたハンドルネームが4文字未満の場合は受け付けないバリデーションをinput要素のpattern属性を用いて設定しています。

しかし、通常はpattern属性はsubmit時に結果を返すため、ユーザーは自分が入力した値が条件にあっているかを一度送信してみないと分かりません。

入力すべき項目が多いほど、バリデーションエラーがあった場合に修正すべき項目を探す手間が増えてします。結果として、体験を損ね、フォームから離脱してしまうということも考えられます。

そこで、x-modelを使用して入力値を条件と照らし合わせて、違反がある場合にはエラー要素を表示することで、submitせずともリアルタイムでバリデーションエラー伝えられます。

ただし、この方法は、UIのためのバリデーションチェックに過ぎませんので、意図しないデータを受け取らないようにpattern属性と合わせて使用することを強く推奨します。

さいごに

今回は、Alpine.jsを使用している環境下で、input要素などで入力された値を参照したい場合に有用なx-modelディレクティブをご紹介しました。

Alpine.jsを使用している方の一助となれば幸いです。

ご精読ありがとうございました。