sharedworkerとは？初心者向けに仕組みと使い方をわかりやすく解説共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

sharedworkerとは何か

この節では sharedworker の基本をやさしく解説します。SharedWorker はウェブアプリの中で複数のタブやウィンドウから同じデータや処理を共有できる仕組みです。通常のウェブワーカー Worker は1つのページに結びついて動きますが、SharedWorker は同じ origin の別のページからも接続できます。これにより、ユーザーが複数のタブで開いていても、データの重複や計算の重複を避けられます。

どういう仕組みで動くのか

SharedWorker はバックグラウンドで動く別のスクリプトです。新しいページが同じ origin からこの SharedWorker に接続すると、接続ごとに port が渡されます。各ページは port を使ってメッセージを送り合い、共通のデータを扱うことができます。

使い方の基本

実際の使い方は以下のような流れです。まず共有用のファイルを用意します。 // shared.js のようなファイル

各ページからは次のように接続します。

<span>var myWorker = new SharedWorker('shared.js');

var port = myWorker.port;

port.start();

port.postMessage('hello');

Worker 側では

onconnect = function(e) {

var port = e.ports[0];

port.onmessage = function(event) {

// ここでメッセージを処理

};

port.start();

};

SharedWorker と Worker の違い

通常の Worker はページごとに独立して動きます。SharedWorker は同じ origin の複数のタブから共有されます。つまり、アプリ内の通知やデータの同期を、複数タブで一元管理したいときに便利です。

<th>比較項目

SharedWorker	Worker	DedicatedWorker
接続先	同じ origin の複数タブ	そのページのみ	そのページのみ
データ共有	可能	原則不可	原則不可

使い方のポイントと注意点

対応ブラウザ を確認しましょう。最新の主要ブラウザではサポートされていますが、古いブラウザでは動作しないことがあります。

同じ origin からのアクセスでのみ共有できます。サードパーティのドメイン間での共有はできません。

データの整合性を保つため、複数のページからのメッセージを適切に処理する設計が大切です。

実例と実装の注意点

実務では 同一 origin のページからのみ接続する設計が基本です。 port を使ってメッセージを受け取り、複数のポートからの通信を整理します。識別子をページごとに付けると、どのタブからのメッセージかを判別しやすくなります。

よくある質問

Q1: SharedWorker はブラウザのメモリを多く使いますか？

A: 状況次第ですが、適切に使えば効率化につながります。

Q2: すべてのブラウザで動きますか？

A: 主要ブラウザはサポートしていますが、古いバージョンでは動作しない場合があります。

まとめ

sharedworker は 複数のタブ間でデータを共有・同期するための強力なツール です。適切に使えば、ユーザー体験をスムーズにし、ネットワーク通信の重複を減らすことができます。初心者は最初は小さな機能から試し、徐々に応用を広げると良いでしょう。

sharedworkerの同意語

SharedWorker: ブラウザ内で複数のタブやウィンドウから同じワーカーを共有して利用できる、Web Worker の一種です。各ページ間でメッセージをやり取りしつつ、データを共有できます。
共有ワーカー: SharedWorker の日本語表現。複数のページが同一のワーカーを共同で使う仕組みを指します。
SharedWorker API: SharedWorker を作成・制御するための API。例えば new SharedWorker(...) のように開始し、ポートを介して通信します。
ウェブ共有ワーカー: ウェブ環境で利用する共有型のワーカーの表現。英語名の別表現として使われることがあります。
複数タブで共有されるワーカー: 同一の SharedWorker を複数のタブで同時に利用できる性質を強調する表現です。
同一オリジン間の共有ワーカー: 同じオリジン内のページ間で共有して動作するワーカーを指します。セキュリティは同一オリジンの前提です。
複数ウィンドウで共有できる Web Worker: 複数のウィンドウで同じワーカーを共有して動作させることができる Web Worker の特徴を説明する表現です。
共有型 Web Worker: Web Worker の一種で、複数のページ間で共有可能なタイプを意味します。

sharedworkerの対義語・反対語

専用ワーカー: 1つのブラウザ文脈（タブ/ウィンドウ）に対して専用に作成され、他のページと共有されないワーカーのこと。
個別ワーカー: ページごとに独立して作られるワーカーで、他のページのワーカーとは共有されない性質を指す表現。
単独ワーカー: 各タブ・ウィンドウで別個に動作するワーカーで、同時に複数のページで別々に動くことを意味する語。
非共有ワーカー: 共有機能を持たない、個別に存在するワーカーのことを強調する表現。
独立ワーカー: 他のワーカーと干渉せず、独立して処理を行うワーカーの性質を示す語。

sharedworkerの共起語

Web Worker: ブラウザが提供するバックグラウンドで動くスレッドの仕組み。SharedWorker を理解するうえでの基本形のひとつです。
DedicatedWorker: 特定のページだけで使う専用の Web Worker。複数のページ間で共有はされません。
SharedWorker: 同一オリジンの複数のページが同時に接続できる、共有可能な Web Worker。複数のウィンドウやタブでデータを共有できます。
MessagePort: Worker とページ、または別のポート同士の非同期通信の入口。通信はここを介して行います。
postMessage: データを送る基本の手段。ポートを介して他のスコープへメッセージを渡します。
onconnect: SharedWorker 側で新しい接続を受け取るイベント。接続ごとにポートを取得して通信を開始します。
onmessage: 受信したメッセージを処理するイベント。通信の受け取り時に呼び出されます。
SharedWorkerGlobalScope: SharedWorker が動作するグローバル実行環境。onconnect などのイベントハンドラが定義されます。
port: 接続ごとに割り当てられる通信チャネル（MessagePort）。このポートを通じてデータをやり取りします。
MessageChannel: 2本のポートを使って独立した双方向通信を作る仕組み。複数クライアント間の通信を補助します。
origin: ウェブページの出身元。SharedWorker は同一オリジンのページ間でのみ共有可能です。
same-origin policy: 同一オリジンポリシー。SharedWorker の共有範囲は同一オリジン内に限定されます。
複数タブ: 同じ SharedWorker に複数のタブが接続可能。タブ間で状態を共有するのに役立ちます。
クロスページ通信: 複数のページ/タブ間でデータをやり取りする技術。SharedWorker はこれを実現する手段のひとつです。
ライフサイクル: 接続の有無やページ表示状況に応じて SharedWorker の存続時間や状態が変化します。
ブラウザ互換性: 主なブラウザ（Chrome、Edge、Firefox など）での対応状況を確認します。
同時実行: 複数のタブが同時に実行して、並列処理を行える点を支えます。
非同期処理: メッセージの送受信は基本的に非同期で行われます。
JavaScript: SharedWorker は JavaScript API を使って実装・利用する技術です。

sharedworkerの関連用語

SharedWorker: 複数のブラウザ文脈（同じオリジンの別ウィンドウやiframeなど）から同じワーカーに接続できる Web Worker の一種。1つのワーカーを共有して複数のタブやフレームで協調して処理を行える。
Web Worker: UI（メインスレッド）とは別のバックグラウンドスレッドで JavaScript を実行する仕組み。長時間処理をオフロードしてページの応答性を維持する。
DedicatedWorker: 特定のページや文脈に専用に割り当てられる Web Worker。複数の文脈で共有されず、単一の文脈内でのみ使用される。
ServiceWorker: バックグラウンドで動作する特殊な Worker。キャッシュ管理、プッシュ通知、バックグラウンド同期などを実現する。ページの文脈とは独立して動くことが多い。
onconnect: SharedWorker へ新しい接続が来たときに呼ばれるイベント。イベントオブジェクトから接続用のポートを取得して通信を開始する。
MessagePort: 別の文脈間でメッセージの送受信を行うためのポート。port.postMessage と onmessage でデータをやり取りする。
MessageChannel: 2つの互いにつながった MessagePort を作成する手段。双方向通信をセットアップする際に使われる。
postMessage: データを別の文脈へ送る基本的な API。データは Structured Clone Algorithm によって複製される。
onmessage: 受信したメッセージを処理するイベントハンドラ。ポートを経由したデータ受信にも使われる。
WorkerGlobalScope / self: ワーカーのグローバル実行環境。self はそのグローバルオブジェクトを指す。
Clients API / self.clients: 接続しているクライアントの集合へアクセスする API。全クライアントへの通知などが可能。
Client: SharedWorker に接続している各ブラウザ文脈を表すオブジェクト。接続元情報や ID などを含む場合がある。
Transferable objects: 転送可能オブジェクト。ArrayBuffer や MessagePort などをコピーせず“移動”させてデータを高速に共有できる。
Structured Clone Algorithm: postMessage で渡すデータを複製するアルゴリズム。関数や DOM ノードは渡せないなどの制約がある。
Same-origin policy / 同一オリジンポリシー: SharedWorker への接続は原則として同一オリジンからのみ可能。クロスオリジン接続は基本的に不可。
Lifecycle / ライフサイクル: 接続中のクライアントが存在する間は存続し、全クライアントが切断されると終了する可能性がある。
Use cases / 使いどころ: 複数タブ間のデータ共有、状態の同期、イベントの通知、共有リソースの管理などに適している。
Differences: SharedWorker vs DedicatedWorker: SharedWorker は複数の文脈から共有されるのに対し、DedicatedWorker は単一の文脈専用。
Differences: SharedWorker vs ServiceWorker: SharedWorker はページの文脈内で動作するのに対し、ServiceWorker はバックグラウンドで動作する点が異なる。
BroadcastChannel API: 同一オリジン内の複数の文脈間でメッセージを放送する別の通信手段。用途によっては代替となる。
DOM access restrictions: ワーカー内からは DOM に直接アクセスできない。UI 操作は主スレッドで行う必要がある。
Debugging / DevTools: ブラウザの開発者ツールでワーカーをデバッグ可能。専用のタブやコンソールが提供されることが多い。
Browser compatibility: 主要な現代ブラウザでサポートされているが、Safari の実装状況はバージョン依存で異なることがある。