Svelteのバインディング機能（2）
セレクトボックスと複数選択セレクトボックス
プルダウンで1項目を選択するセレクトボックスの例を図11に示します。
図11の実装はリスト10の通りです。<select>タグにbind:value={value}と属性を指定して、セレクトボックスとvalue変数を紐づけます。
<script lang="ts">
let value: string = 'pixel9';
</script>
<select bind:value={value}>
<option value="pixel9">Google Pixel 9</option>
<option value="galaxyzfold5">Samsung Galaxy Z Fold5</option>
<option value="edge50pro">motorola edge 50 pro</option>
</select>
<div>→選択値: {value}</div>
図12の通り、セレクトボックスで複数選択をさせることもできます。
図12の実装はリスト11の通りです。複数選択させるため、<select>タグにmultiple属性を追加します。また紐づける変数は配列にします。
<script lang="ts">
let arr: Array<string> = [];
</script>
<select bind:value={arr} multiple>
<option value="pixel9">Google Pixel 9</option>
<option value="galaxyzfold5">Samsung Galaxy Z Fold5</option>
<option value="edge50pro">motorola edge 50 pro</option>
</select>
<div>→選択値: {arr.join(', ')}</div>
親子コンポーネント間のバインディング
ここまでのバインディングはすべて1つのコンポーネント内で行ってきましたが、親子コンポーネント間でバインディングを行うこともできます。図13では、親と子どちらのコンポーネントでテキストボックスを編集しても、編集した文字列が親と子両方のコンポーネントに反映されます。
親コンポーネントの実装はリスト12の通りです。（1）で子コンポーネントを参照し、（2）で表示させます。この時子コンポーネントにbind:childValue={parentValue}と属性を指定して、親コンポーネントのparentValue変数を、子コンポーネントのchildValueプロパティに紐づけます。
<script lang="ts">
import ChildTextBox from "./ChildTextBox.svelte"; // ...（1）
let parentValue = 'Apple iPhone 16';
</script>
<div class="parent">
<h4>親コンポーネント</h4>
<input bind:value={parentValue}>
<div>→入力値: {parentValue}</div>
</div>
<div class="child">
<h4>子コンポーネント</h4>
<ChildTextBox bind:childValue={parentValue} /> <!--（2）-->
</div>
子コンポーネントの実装はリスト13の通りです。（1）のexport let～記述でchildValueプロパティを定義して、（2）で子コンポーネント内のテキストボックスと紐づけています。
<script lang="ts">
export let childValue: string; // ...（1）
</script>
<input bind:value={childValue}> <!--（2）-->
<div>→入力値: {childValue}</div>
まとめ
本記事では、Svelteで動的なWebページの更新を実現するリアクティブ機能と、Webページの入力内容を変数と紐づけるバインディング機能の利用方法を説明しました。細かい処理はSvelteが面倒を見てくれるので、プログラマーはシンプルに実装できます。次回は、Svelteにおけるコンポーネントライフサイクルについて説明します。
