Broadcast Channel APIとは何ですか？

同じオリジンの複数のブラウザタブやウィンドウ、iframeの間でメッセージをやりとりできるAPI。ログイン状態の同期やテーマ切り替えの即時反映などに使われる。

Broadcast Channel APIのポイントは？

同一オリジンの複数タブ・ウィンドウ・iframe間でリアルタイムにメッセージを送受信できる。new BroadcastChannel('名前')で同じチャネル名を持つすべてのコンテキストに一斉配信される。ログイン状態の同期、テーマ設定の共有、データ更新の通知などに活用される

【ブロードキャストチャネルエーピーアイ】

💡 ブラウザのタブ同士がおしゃべりできる、同一サイト内のメッセージ交換窓口

📌 このページのポイント

Broadcast Channel APIのイメージ

ひよこ

複数タブ間でデータをやりとりしたいことってあるの？

ペンギン先生

よくあるよ。たとえばAタブでログアウトしたら、Bタブも自動でログアウトさせたいとか、Aタブでダークモードに切り替えたらBタブも即座に反映させたい、みたいなケースだね

ひよこ

使い方は簡単なの？

ペンギン先生

とてもシンプルだよ。送信側でnew BroadcastChannel('my-channel')を作ってpostMessage()するだけ。受信側も同じチャネル名でBroadcastChannelを作ってonmessageイベントを待つだけなんだ

ひよこ

localStorageのイベントでも似たようなことができなかったっけ？

ペンギン先生

よく知ってるね。storageイベントでもタブ間通信はできるけど、Broadcast Channelのほうが設計がクリーンなんだ。localStorageは永続化が目的で通信用じゃないし、文字列しか送れない。Broadcast Channelは構造化クローンで複雑なオブジェクトも送れるよ

ひよこ

Service Workerとも通信できるの？

ペンギン先生

できるよ。Service Workerも同じオリジンなら同じチャネルに参加できるんだ。プッシュ通知を受信したService Workerから、開いている全タブにデータを配信する、といった使い方もできるよ。マイクロフロントエンドの連携にも使われるケースが増えてきているね

まとめ：ざっくりこれだけ覚えればOK！

「Broadcast Channel API」って出てきたら「同じサイトのタブ間でメッセージをやりとりするAPI」と思えればだいたいOK！

📖 おまけ：英語の意味

「Broadcast Channel API」＝放送チャネル API

💬 Broadcastは「放送する」という意味。テレビの放送のように、1つのメッセージを複数のタブに一斉に届けるイメージだよ