Svelte で Radio ボタンと変数をバインドする方法

フロントエンド開発では、フォーム要素を扱う際に radio ボタンはよく使用される選択コントロールです。Svelte フレームワークでは、radio ボタンのバインドは非常に簡単で直感的です。この記事では、bind:group 属性を使用して複数の radio ボタンを同じ変数にバインドし、ユーザーの選択に応じてその変数が自動的に更新される方法を紹介します。

実装手順

1. 変数の作成

まず、Svelte コンポーネントの <script> タグ内で、ユーザーが選択した radio ボタンの値を保存するための変数を定義します。

1
<script>
2
let selectedOption = "option1";
3
</script>

2. Radio ボタンの設定

次に、HTML 部分で input タグを使用して複数の radio ボタンを作成し、それらを bind:group={selectedOption} を使って同じ変数 selectedOption にバインドします。

1
<label>
2
<input type="radio" bind:group={selectedOption} value="option1">
3
Option 1
4
</label>
5
<label>
6
<input type="radio" bind:group={selectedOption} value="option2">
7
Option 2
8
</label>
9
<label>
10
<input type="radio" bind:group={selectedOption} value="option3">
11
Option 3
12
</label>

3. 選択された値を表示

Svelte の双方向データバインディング機能を使用して、ユーザーが異なる radio ボタンを選択すると、selectedOption が自動的に選択された value 値に更新されます。この値を表示することができます。

1
<p>選択されたオプション: {selectedOption}</p>

完全な例

1
<script>
2
let selectedOption = "option1";
3
</script>
4
5
<label>
6
<input type="radio" bind:group={selectedOption} value="option1">
7
Option 1
8
</label>
9
<label>
10
<input type="radio" bind:group={selectedOption} value="option2">
11
Option 2
12
</label>
13
<label>
14
<input type="radio" bind:group={selectedOption} value="option3">
15
Option 3
16
</label>
17
18
<p>選択されたオプション: {selectedOption}</p>

この例では、ユーザーが異なる radio ボタンを選択すると、selectedOption 変数が選択された値に基づいて自動的に更新されます。

まとめ

bind:group 属性を使用することで、Svelte では radio ボタンの選択と変数バインディングの処理が簡単になります。この方法を利用することで、フォームの動的なインタラクションやデータの同期を容易に実現でき、開発作業が大幅に簡略化されます。