Svelteのバインディング機能（1）
これまで説明してきたサンプルは、変数の更新を画面に反映するといった一方向の処理でしたが、逆に画面の更新を変数に反映する、いわゆるバインディングの処理もSvelteで利用できます（AngularやVue.jsのバインディング機能に相当します）。さまざまな入力部品でバインディングを実装した、図5のサンプルで説明します。
図5を表示するWebページ全体のコンポーネントはリスト3の通りです。バインディングの種類ごとに実装したコンポーネントを参照しています。
<script lang="ts"> // コンポーネントのインポート import TextBox from "./TextBox.svelte"; （略） </script> <!-- コンポーネントの表示 --> <h3>テキストボックス</h3> <TextBox /> （以下略）
テキストボックスとテキストエリア
まず、もっとも基本的なバインディングの記述を、テキストボックスを利用した図6の例で紹介します。
図6の実装はリスト4の通りです。（2）でテキストボックスの<input>タグにbind:value={value}と属性を指定して、テキストボックスと（1）のvalue変数を紐づけます。
<script lang="ts">
let value: string = 'Google Pixel 9'; // ...（1）
</script>
<input bind:value={value}> <!--（2）-->
<div>→入力値: {value}</div>
図7の通り、複数行入力可能なテキストエリアも利用できます。
図7の実装はリスト5の通りです（<script>部は省略）。<input>タグのかわりに<textarea>タグを利用する以外、テキストボックスと同様の実装内容となります。
<textarea bind:value={value}></textarea>
<div>→入力値:<pre>{value}</pre></div>
以降の例でも、基本的にbind:～という属性を入力部品のタグに指定して、バインディングを実現します。
［補足］バインディング記述の省略形
バインディングの指定に利用する記述（ここではbind:value）と変数名（ここではvalue）が一致する場合、変数名の記述を省略できます。例えばリスト4のbind:value={value}記述は、リスト6の通りbind:valueと省略して記述できます。
<input bind:value><!-- 省略形 -->
チェックボックス
チェックボックスの例を図8に示します。チェックボックスのチェック有無に対応して、trueまたはfalseが画面に表示されます。
図8の実装はリスト7の通りです。（2）でチェックボックスの<input>タグにbind:checked={bool}と属性を指定して、チェックボックスを（1）のbool変数と紐づけます。
<script lang="ts">
let bool: boolean = true; // ...（1）
</script>
<input type="checkbox" bind:checked={bool}> <!--（2）-->
→入力値: {bool}
ラジオボタンと複数チェックボックス
複数の選択肢から1つを選択するラジオボタンの例を図9に示します。選択された選択肢の値が画面に表示されます。
図9の実装はリスト8の通りです。各ラジオボタンの<input>タグにbind:group={value}と属性を指定して、各ラジオボタンをvalue変数と紐づけることで、選択された選択肢の値がvalue変数に反映されます。
<script lang="ts">
let value: string = 'pixel9';
</script>
<label>
<input type="radio" bind:group={value}
value="pixel9">Google Pixel 9
</label>
<label>
<input type="radio" bind:group={value}
value="galaxyzfold5">Samsung Galaxy Z Fold5
</label>
<label>
<input type="radio" bind:group={value}
value="edge50pro">motorola edge 50 pro
</label>
<div>→選択値: {value}</div>
複数選択できるチェックボックスのリストも類似の方法で実装できます。図10のサンプルで説明します。
図10の実装はリスト9の通りです。各チェックボックスの<input>タグにbind:group={arr}と属性を指定します。複数選択できるため、紐づける変数arrは配列にします。なお（1）は、arr配列のjoinメソッドを利用して、配列の各要素をカンマ（, ）でつなげて1つの文字列にする記述です。
<script lang="ts">
let arr: Array<string> = [];
</script>
<label>
<input type="checkbox" bind:group={arr}
value="pixel9">Google Pixel 9
</label>
<label>
<input type="checkbox" bind:group={arr}
value="galaxyzfold5">Samsung Galaxy Z Fold5
</label>
<label>
<input type="checkbox" bind:group={arr}
value="edge50pro">motorola edge 50 pro
</label>
<div>→選択値: {arr.join(', ')}</div> <!--（1）-->
