JavaScriptでブラウザのタブ間通信を完全解説！初心者向けBroadcastChannel API入門

1. タブ間通信とは？

1. タブ間通信とは？

ブラウザで複数のタブを開いたとき、あるタブで操作した内容を別のタブに知らせたいことがあります。例えば、ユーザーがログイン状態を別タブでも同期したい場合などです。このように、異なるタブ間で情報をやり取りすることを「タブ間通信」と呼びます。

2. BroadcastChannel APIの基本

2. BroadcastChannel APIの基本

BroadcastChannel APIは、同じオリジン（同じウェブサイト）内のタブ同士で簡単にメッセージを送受信できる仕組みです。従来はlocalStorageやServiceWorkerを使った方法もありましたが、BroadcastChannelはより直感的で初心者向けです。

const channel = new BroadcastChannel('my_channel');

channel.postMessage('こんにちは、他のタブ！');

上記の例では「my_channel」という名前のチャンネルを作り、メッセージを送信しています。

3. タブでメッセージを受け取る方法

3. タブでメッセージを受け取る方法

タブ側ではonmessageイベントを使ってメッセージを受け取ります。

const channel = new BroadcastChannel('my_channel');

channel.onmessage = (event) => {
  console.log('受信したメッセージ:', event.data);
};

別のタブでpostMessageした内容が、このonmessageに届きます。

4. 簡単なチャット例

4. 簡単なチャット例

タブ間通信を使って簡単なチャットを作ることもできます。ユーザーが入力したメッセージをすべてのタブに表示する例です。

const chatChannel = new BroadcastChannel('chat');

function sendMessage(msg) {
  chatChannel.postMessage(msg);
}

chatChannel.onmessage = (event) => {
  const chatBox = document.getElementById('chatBox');
  chatBox.innerHTML += '<p>' + event.data + '</p>';
};

これで、どのタブでメッセージを送っても他のタブに表示されます。

5. タブ間通信の注意点

5. タブ間通信の注意点

BroadcastChannel APIは同じオリジン内でのみ通信可能です。また、古いブラウザではサポートされていない場合があります。その場合はlocalStorageのstorageイベントを代替手段として使うことも可能です。

window.addEventListener('storage', (event) => {
  if (event.key === 'chatMsg') {
    console.log('storageイベントで受信:', event.newValue);
  }
});

// メッセージ送信
localStorage.setItem('chatMsg', 'こんにちは、タブ！');

6. タブが閉じられたときの処理

6. タブが閉じられたときの処理

タブを閉じるとBroadcastChannelも自動的に閉じられますが、明示的にclose()を呼ぶことでメモリの解放やイベント停止ができます。

const channel = new BroadcastChannel('my_channel');

// タブを閉じる前にチャンネルを閉じる
window.addEventListener('beforeunload', () => {
  channel.close();
});

これにより、不要な通信やリソース消費を防ぐことができます。

7. 実用例: フォーム入力のリアルタイム同期

7. 実用例: フォーム入力のリアルタイム同期

複数タブで同じフォームを開いている場合、入力内容をリアルタイムで同期することも可能です。例えば、ユーザー名の入力をすべてのタブで表示する例です。

const formChannel = new BroadcastChannel('form_sync');

const nameInput = document.getElementById('username');
nameInput.addEventListener('input', () => {
  formChannel.postMessage(nameInput.value);
});

formChannel.onmessage = (event) => {
  nameInput.value = event.data;
};

これで、どのタブでも同じ入力内容がすぐに反映されます。

8. まとめと応用ポイント

8. まとめと応用ポイント

BroadcastChannel APIはシンプルで直感的にタブ間通信ができるため、ログイン状態の同期やチャット、フォーム同期などに活用できます。初心者でも基本のpostMessageとonmessageさえ理解すれば、すぐに実装可能です。また、古いブラウザや互換性の問題がある場合はlocalStorageイベントを併用することで安全に通信できます。

ポイントは次の通りです：

• 同じオリジン内で通信可能
• postMessageで送信、onmessageで受信
• タブ閉鎖時はclose()でリソース解放
• 古いブラウザではlocalStorageイベントを代替手段として使用

まとめ

まとめ

本記事では、JavaScriptのBroadcastChannel APIを使ったブラウザのタブ間通信について詳しく解説しました。タブ間通信とは、同じウェブサイトの複数のタブ間で情報をリアルタイムにやり取りする仕組みで、ユーザーの操作や入力内容を別タブでも同期させることができます。従来はlocalStorageのstorageイベントやServiceWorkerを用いた方法もありましたが、BroadcastChannel APIはより直感的で初心者でも理解しやすく、ログイン状態の共有、チャット機能、フォーム入力のリアルタイム同期など幅広い用途で活用できます。 実装の基本は非常にシンプルで、まずBroadcastChannelオブジェクトを作成し、postMessageでメッセージを送信、onmessageで受信するだけです。さらに、タブを閉じる際にはclose()でチャンネルを明示的に閉じることでメモリリークや不要な通信を防げます。古いブラウザや互換性の問題がある場合は、localStorageイベントを補助的に使うことで安全にタブ間通信を実現できます。

サンプルコードでおさらい

BroadcastChannel APIを使った簡単なタブ間通信の例です。

 const channel = new BroadcastChannel('example_channel');
// メッセージ送信
channel.postMessage('タブ間通信テスト');

// メッセージ受信
channel.onmessage = (event) => {
console.log('受信したメッセージ:', event.data);
};

// タブ閉鎖時にチャンネルを閉じる
window.addEventListener('beforeunload', () => {
channel.close();
});

また、古いブラウザ向けにlocalStorageイベントを代替手段として使う例も確認しておくと便利です。

window.addEventListener('storage', (event) => {
if (event.key === 'chatMsg') {
console.log('storageイベントで受信:', event.newValue);
}
});

// メッセージ送信
localStorage.setItem('chatMsg', 'こんにちは、タブ！');

このようにBroadcastChannel APIとlocalStorageイベントを組み合わせることで、幅広いブラウザでタブ間通信を安全かつ効率的に実装できます。

応用ポイント

• 同じオリジン内のタブ間でリアルタイム通信が可能
• 基本はpostMessageで送信、onmessageで受信
• タブ閉鎖時はclose()を使ってリソース解放
• 古いブラウザではlocalStorageイベントで代替可能
• チャット機能やフォーム入力の同期など、実用的なタブ間通信にすぐ応用できる
• パフォーマンスに配慮して必要なタイミングでチャンネルを閉じることが重要