💨

BroadcastChannel を使ってブラウザのタブ間通信を行う方法

に公開
Next.js
React
初心者向け
tech

Webアプリを開発していると、同じページを複数のタブで開いたときに状態を同期させたい場面があります。
例えば、Todoアプリでタスクを追加したとき、別タブにも自動で反映させたい場合などです。

そんなときに便利なのが BroadcastChannel API です。

🔹 BroadcastChannel とは？

BroadcastChannel は、同じオリジン（URL）の別タブ・ウィンドウ・iframe間でメッセージを送受信できる Web標準のブラウザAPI です。

複数タブ間で状態をリアルタイム共有できる

サーバーを介さずブラウザ内で完結する

軽量でシンプルに使える

🔹 使い方の例（Next.js / React）

以下は Next.js の App Router 環境でのサンプルです。
2つのタブで同じページを開くと、片方で送信したメッセージがもう片方のタブに届きます。

"use client";

import { useEffect } from "react";

export default function Test() {
	useEffect(() => {
		// ✅ BroadcastChannelを作成（チャンネル名は自由）
		const channel = new BroadcastChannel("demo-channel");

		// ✅ 他のタブからメッセージを受信
		channel.onmessage = (event) => {
			//event.dataに送信されたメッセージが入る
			console.log("📩 他のタブから受信しました:", event.data);
		};

		// ✅ 3秒後にメッセージを送信
		const message = `こんにちは！`;
		const timer = setTimeout(() => {
			channel.postMessage(message);
			console.log("📤 メッセージを送信しました:", message);
		}, 3000); //0にすれば即時送信になる

		// ✅ クリーンアップ（ページを閉じたときなど）メモリリーク防止
		return () => {
			clearTimeout(timer);
			channel.close();
		};
	}, []);

	return (
		<main className="p-8">
			<h1 className="font-bold text-xl">BroadcastChannel デモ</h1>
			<p className="mt-4">コンソールを開いて確認してください 🔍</p>
			<p>このページをもう一つのタブでも開くと通信できます。</p>
		</main>
	);
}

🔹 ポイント解説

チャンネルを作成する

const channel = new BroadcastChannel("demo-channel");

"demo-channel" は任意の名前でOK

同じチャンネル名を使うタブ間でメッセージが届く

メッセージを受信する

channel.onmessage = (event) => {
	console.log("📩 他のタブから受信しました:", event.data);
};

event.data に送られた内容が入る

自分のタブが送ったメッセージは受信されない（他のタブからのみ受信）

メッセージを送信する

channel.postMessage(message);

送信したメッセージは同じチャンネルを開いている他のタブに届く

自分のタブでは受信されない点に注意

クリーンアップ

クリーンアップについてもっと詳しく

useEffect は副作用を扱うためのフックです。

クリーンアップが必要な場合

タイマー（setTimeout, setInterval）
イベントリスナー（window, document, BroadcastChannel など）
WebSocketやサブスクリプション

外部ライブラリでリソースを確保するもの

これらは useEffect がアンマウントされたときに破棄しないと、メモリリークや重複処理の原因 になるため、return でクリーンアップを行います。

channel.close();

タブを閉じるときや、不要になったときに呼ぶ

メモリリークや余計なイベント発火を防ぐ

🔹 注意点

同じタブ内では送信したメッセージは受信されない
→ 複数タブ間の同期用の API であるため

オリジンが異なるタブ間では通信できない
→ ドメイン・プロトコル・ポートが同じ必要あり

開発時は console.log で動作確認すると便利

🔹 まとめ

BroadcastChannel は タブ間通信を簡単に実装できるブラウザ API
postMessage で送信、onmessage で受信
クリーンアップは忘れずに
React / Next.js では useEffect 内で初期化すると安全

💡 次のステップとしては、Zustand などの状態管理ライブラリと組み合わせて、Todo リストのタスク同期を実装すると、実用的なリアルタイム同期アプリが作れます

下記記事の内容と組み合わせると簡単に実装できますよ！
https://zenn.dev/wakki/articles/82fbeb934b25cd

Discussion