Web Workers チートシート

Web Workers は、ユーザーインターフェースを妨げることなくバックグラウンドスレッドでスクリプトを実行するシンプルな手段を提供します。

バックグラウンドスレッド処理

メイン（クライアント）スレッド

const worker = new Worker('worker.js');

worker.onmessage = function (event) {
  console.log('ワーカーから受信:', event.data);
};

worker.postMessage('メインスレッドからのメッセージ！');

メッセージには、構造化複製アルゴリズム (Structured Clone Algorithm) でサポートされる任意のデータ型（オブジェクト、配列、文字列、数値、Blob、型付き配列など）を使用できます。

ワーカースレッド

// worker.js の内部
self.onmessage = function (event) {
  console.log('ワーカー内で受信:', event.data);
  self.postMessage({ msg: 'ワーカーからの応答' });
};

MessageEvent の構造

bubbles: false
cancelBubble: false
cancelable: false
clipboardData: undefined
currentTarget: Worker
data: "Hello"             // 転送されたペイロードデータ
defaultPrevented: false
eventPhase: 0
lastEventId: ""
origin: ""
ports: []
returnValue: true
source: null
srcElement: Worker
target: Worker
timeStamp: 1344821022383
type: "message"

これらのフィールドは、onmessage 内の MessageEvent オブジェクトで利用可能なプロパティを示しています。