0Pricing
Sveltejs Academy · レッスン

createEventDispatcherによるカスタムイベント

型付きのカスタムイベントを子コンポーネントから発行し、親で処理できるようにします。

「createEventDispatcherによるカスタムイベント」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。

カスタムイベントを使う理由

子コンポーネントはカスタムイベントを発生させ、親がそれをリッスンすることで上位に通知します。

ディスパッチャーのインポート

svelte から createEventDispatcher をインポートし、スクリプト内で 1 つ作成します。

<script>
  import { createEventDispatcher } from "svelte";
  const dispatch = createEventDispatcher();
</script>

イベントをディスパッチする

dispatch(name, detail) を呼び出してイベントを発生させます。親は on:name でリッスンします。

function save() { dispatch("save", { id: 42 }); }

親でリッスンする

カスタムイベントは DOM イベントと同じように扱います。

<Child on:save={(e) => console.log(e.detail.id)} />

イベントの詳細情報

2 番目の引数は、受け取る側で event.detail になります。

デフォルトではバブリングしない

カスタムイベントは、Svelte のコンポーネントツリーを自動的にバブリングしません。必要な場合は明示的に転送します。

型付きイベント

TypeScript を使うと、親コンポーネントでの自動補完のためにイベントに型を付けられます。

const dispatch = createEventDispatcher<{ save: { id: number } }>();

キャンセル可能なイベント

3 番目の引数として { cancelable: true } を渡すと、親が preventDefault を呼び出せるようになります。

複数のイベント

1 つのディスパッチャーから多くのイベント型を発生させられます。意図ごとに一意の名前を使用してください。

汎用的な名前を避ける

汎用的な change よりも、itemSelected のように具体的な名前を優先してください。

イベントとコールバック

イベントは上位への通知に適しています。密接に連携する場合は、コールバック props の受け渡しを検討してください。

クイックチェック

親はどのようにイベントデータを読み取りますか。

まとめ

createEventDispatcher を使って詳細情報を含む名前付きイベントを発生させ、on:eventName でリッスンします。

よくある質問

「createEventDispatcherによるカスタムイベント」レッスンは無料ですか？

はい。「createEventDispatcherによるカスタムイベント」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。

「createEventDispatcherによるカスタムイベント」で何を学びますか？

型付きのカスタムイベントを子コンポーネントから発行し、親で処理できるようにします。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Sveltejs Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「createEventDispatcherによるカスタムイベント」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSveltejs Academyレッスンでコードを書いて実行できますか？

はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. on:click、on:input、on:submit
  2. イベント修飾子：preventDefault、stopPropagation、once
  3. createEventDispatcherによるカスタムイベント
  4. on:clickによるイベントの転送
← Sveltejs Academyに戻る