【ITニュース解説】Svelte Events & Bindings Tutorial: Master Parent-Child Communication

Svelteのコンポーネントは、アプリケーションを構成する個々の部品であり、これらの部品が互いに連携し、情報交換を行うことが不可欠である。このコンポーネント間の情報伝達は「コンポーネント間コミュニケーション」と呼ばれ、Svelteでは主に三つの方法で実現される。一つは親から子へデータを渡す「Props」、もう一つは子から親へメッセージを送る「Events」、そして親と子でデータを双方向に同期する「Bindings」である。本解説では、特にイベントとバインディングに焦点を当て、子から親への情報伝達と状態の共有のメカニズムを詳しく説明する。

まず、Svelteプロジェクトの基本的な構成について確認しておく。SvelteKitを利用するアプリケーションでは、src/routesディレクトリはアプリケーションの各ページを格納する場所であり、特にsrc/routes/+page.svelteがメインのエントリーポイントとなるページである。一方、src/libディレクトリは、アプリケーション内で繰り返し使用される汎用的なコンポーネント（例えばボタンや入力フォームなど）を配置する場所として使われる。本解説における各例のコンポーネントはsrc/libに格納され、src/routes/+page.svelteでそれらの動作が検証される構成である。

次に、子コンポーネントから親コンポーネントへ情報を伝えるための「イベント」について説明する。Propsは親から子へのデータ受け渡し（下方向の通信）には適しているが、子が親に「何か特別なことが起きた」と通知したい場合、例えばボタンがクリックされたり、フォームが送信されたりといった状況ではイベントが用いられる。Svelte 5におけるイベントの実装は、親コンポーネントが子コンポーネントに対し、実行してほしい特定の処理をまとめた「コールバック関数」をプロパティとして渡す形で行われる。子コンポーネントは、そのプロパティとして受け取ったコールバック関数を、特定のイベントが発生したタイミングで呼び出すことで、親コンポーネントに通知する。 具体的な例を挙げる。ChildButton.svelteという子コンポーネントで、let { onHello } = $props();と記述することで、親からonHelloという名前のプロパティ（期待されるのは関数）を受け取ることを示す。ボタンがクリックされたときに実行されるhandleClick関数内で、onHello?.();を呼び出す。この?.はオプションチェイニングという構文で、onHelloプロパティが実際に渡されている場合にのみ関数を呼び出す安全な方法である。一方、親コンポーネントの+page.svelteでは、function handleHello() { alert("Child says hello!"); }のように、子が実行すべき具体的な処理を記述した関数を定義し、<ChildButton onHello={handleHello} />という形で、そのhandleHello関数を子コンポーネントのonHelloプロパティとして渡す。これにより、子がonHelloを呼び出すと、親のhandleHello関数が実行され、親は子の行動を認識できるようになる。 イベントは単なる通知だけでなく、データを添えて親に送ることも可能である。フォーム送信の例では、NameForm.svelteという子コンポーネントでlet { onSubmit } = $props();とコールバックプロパティを宣言する。フォームが送信される際に実行されるsubmitForm関数内で、onSubmit?.({ name });のように、フォームに入力された名前をオブジェクトとしてコールバック関数に渡す。親コンポーネントでは、<NameForm onSubmit={handleSubmit} />としてhandleSubmit関数を渡し、このhandleSubmit関数は子から送られたデータ（例: { name }）を引数として直接受け取ることが可能である。また、フォームのon:submit|preventDefault={submitForm}という記述にある|preventDefault修飾子は、フォームが送信されたときに通常発生するページの再読み込みを防ぎ、アプリケーションがページ遷移なしで動作し続ける（シングルページアプリケーションの動作）ために使われる。

次に、親と子で同じデータを双方向に同期させるための「バインディング」について説明する。イベントが一方向の通知であるのに対し、バインディングは、親と子が同じデータを共有し、どちらか一方がデータを変更すると、もう一方にも即座にその変更が反映される仕組みを提供する。 バインディングは主に二つの要素によって実現される。一つは$bindable()で、これは子コンポーネントのプロパティを双方向バインディング可能として指定するために使用される。通常、プロパティは親から子への一方的なデータフロー（親が設定し、子だけが参照する）を持つが、$bindable()を使用することで、子もそのプロパティの値を更新できるようになる。例えば、let { text = $bindable() } = $props();のように宣言する。もう一つはbind:<property>というSvelteの特別な構文であり、これは親コンポーネントの変数と、HTML要素の特定のプロパティ（例: value、checked）や、子コンポーネントの$bindableプロパティを連結するために用いられる。 具体的な例として、テキスト入力フィールドのバインディングを考える。TextInput.svelteという子コンポーネント内で、let { text = $bindable() } = $props();と宣言し、<input bind:value={text} />と記述する。これにより、入力フィールドに入力されたテキストがtextプロパティに自動的に反映される。親コンポーネントの+page.svelteでは、let name = $state('');という状態変数を定義し、<TextInput bind:text={name} />のように子コンポーネントを配置する。このbind:text={name}が双方向バインディングを確立し、子が入力フィールドに入力したテキストは即座に親のname変数に反映され、同時に、もし親がname変数を変更すれば、子の入力フィールドの表示も同期して更新される。 チェックボックスの例でも同様に、CheckBox.svelteの子コンポーネントでlet { checked = $bindable() } = $props();と宣言し、<input type="checkbox" bind:checked={checked} />とする。親コンポーネントではlet accepted = $state(false);という状態変数を定義し、<CheckBox bind:checked={accepted} />と記述することで、チェックボックスのオン/オフの状態が親のaccepted変数と常に同期するようになる。

イベントとバインディングのどちらを選択すべきかについては、アプリケーションの具体的な状況に応じて判断する必要がある。イベントは、ボタンのクリックやフォームの送信のような、一度きりのアクションや通知に適している。「何か特定の出来事が起こった」という通知が必要な場合にイベントを使うのが適切である。一方、バインディングは、テキスト入力フィールド、トグルスイッチ、チェックボックス、スライダーなど、親と子の間で状態を常にリアルタイムで同期させておきたい場合に適している。親と子の両方が同じデータを参照し、互いに更新する必要がある場合にバインディングを使うのが効果的である。

Svelteのイベントとバインディングを利用する際には、いくつかの注意点が存在する。まず、コールバック関数の名前は厳密に大文字と小文字が区別されるため、子でonHelloと宣言したならば、親も正確にonHelloとしてプロパティを渡す必要がある。また、コールバックプロパティを宣言しただけでは何も実行されず、子が特定のタイミングでonHello?.()のように実際に呼び出すことで初めて機能することに注意が必要である。バインディングは、Svelteが内部的にサポートしている特定のHTML要素のプロパティ（例えばbind:value、bind:checked、bind:openなど）や、子コンポーネントの$bindableプロパティに対してのみ有効であり、任意のプロパティにbind:を使っても期待通りに動作しない場合がある。さらに、バインディングは強力な機能だが、すべてをバインディングで処理しようとすると、状態の管理が複雑になる可能性がある。一般的には、フォームの入力フィールドやトグルなど、リアルタイムの同期が必要な箇所にはバインディングを使用し、より大きな「保存」や「送信」といったアクションにはイベントを使用するのが良い実践とされている。最後に、$derivedで定義された値は計算結果であり、読み取り専用であるため、それに対してバインディングを試みても機能しない。バインディングは$stateや$bindableプロパティのような、変更可能な状態変数に対してのみ適用できる。

結論として、Svelteにおけるコンポーネント間のコミュニケーションは、Props、イベント（コールバックプロパティ経由）、そしてバインディングの三つの主要な方法によって確立される。Propsは親から子への一方的なデータ伝達、イベントは子から親への通知やデータ送信、そしてバインディングは親と子の間でのデータの双方向同期をそれぞれ担当する。これらのコミュニケーションパターンを深く理解し、状況に応じて適切に使い分けることで、Svelteアプリケーション内のデータフローを効率的に管理し、機能的なコンポーネントを構築することが可能となる。これらの基礎を習得することで、実際のアプリケーション開発におけるコンポーネント間の連携に関する課題の大部分に対処できるようになる。さらに進んだ学習としては、イベントの転送（イベントフォワーディング）や、より柔軟なコンポーネント設計のための高度なパターンも存在する。