StoreによるEvent Busパターン
writable storeを使ってグローバルなイベントバスを実装し、疎結合な通信を実現します。
「StoreによるEvent Busパターン」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
イベントバス
イベントバスは、疎結合な通信のためのグローバルな発行・購読チャネルです。
writableで実装する
最新のイベントを保持するwritableストアは、シンプルなバスとして機能します。
const bus = writable(null);
export function emit(event) { bus.set(event); }
export function on(fn) { return bus.subscribe(e => { if (e) fn(e); }); }ユースケース
あるコンポーネントがトーストイベントを発行し、別のコンポーネントが購読してアプリ全体にトーストを表示します。
疎結合化
送信側と受信側は互いをインポートせず、どちらもバスに依存します。
型安全性
安全に購読できるように、イベントを判別可能なユニオン型として型付けします。
type Event = { type: "toast"; text: string } | { type: "logout" };一度だけ購読する
コンポーネント内で$構文を使い、自動購読解除できるようにラップします。
複数のバス
1つの巨大なチャネルになるのを避けるため、appBus、modalBus、audioBusのようにドメインごとに分割します。
アンチパターン
イベントバスを使いすぎると、データフローが暗黙的になります。所有者が明確な場合は、直接のpropsやストアを優先します。
リプレイのセマンティクス
writableストアは最新の値だけを保持します。イベント履歴全体が必要な場合は、配列ストアを使います。
外部イベント
イベントバスは、window resizeやキーボードショートカットなどのブラウザーイベントをラップすることもできます。
テスト
テストではイベントを発行し、購読側が適切に応答することをアサートできます。
クイックチェック
イベントバスの利点は何ですか。
まとめ
writableストアを使ってシンプルなイベントバスを構築します。発行と購読によって、横断的な通信を疎結合にします。
よくある質問
「StoreによるEvent Busパターン」レッスンは無料ですか？
はい。「StoreによるEvent Busパターン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「StoreによるEvent Busパターン」で何を学びますか？
writable storeを使ってグローバルなイベントバスを実装し、疎結合な通信を実現します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「StoreによるEvent Busパターン」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Storeアーキテクチャ：機能モジュール
- StoreによるEvent Busパターン
- 楽観的UI更新
- Storeの履歴によるUndo/Redo