Alpine.jsで入力値を取得する方法

Alpine.jsは、シンプルで直感的なJavaScriptフレームワークです。Alpine.jsを使用して、フォームの入力値をキャプチャし、処理する方法を説明します。

フォームのHTMLを作成します:

<div x-data="{ myValue: '' }">
 <input type="text" x-model="myValue">
 <button @click="submitForm">Submit</button>
</div>

Alpine.jsのx-dataディレクティブを使用して、データバインディングを設定します。上記の例では、myValueという変数を作成し、入力フィールドとバインドしています。
イベントハンドラを作成します。submitFormというメソッドを定義し、入力値を処理するロジックを記述します。以下の例では、単純に入力値をコンソールに出力していますが、必要に応じて他の処理を追加できます。
```
<script>
 function submitForm() {
   console.log(this.myValue);
 }
</script>
```

これで、Alpine.jsを使用してフォームの入力値をキャプチャし、処理する準備が整いました。入力フィールドに入力をすると、submitFormメソッドが呼び出され、入力値がコンソールに表示されます。

この方法を応用して、さまざまなイベントやデータバインディングの機能を利用することができます。Alpine.jsの公式ドキュメントを参照して、さらに高度な機能を学ぶことができます。