postMessage でメッセージを送る
メインスレッドと Worker の間で通信します。
「postMessage でメッセージを送る」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
メッセージによる通信
メインスレッドと Worker は別々のメモリを持つため、メッセージを渡して通信します。postMessage メソッドでデータを送信し、message イベントで受信します。
Worker への送信
メインスレッドから worker.postMessage(data) を呼び出します。データには、数値、文字列、オブジェクト、配列など、ほとんどあらゆる値を指定できます。
const worker = new Worker('worker.js');
worker.postMessage({ task: 'sum', numbers: [1, 2, 3, 4] });ワーカーで受信する
ワーカー内でmessageイベントを処理します。送信された値はevent.dataに格納されています。
// worker.js
self.onmessage = (event) => {
const { task, numbers } = event.data;
console.log('worker received task:', task);
};返信を送信する
ワーカーは結果を計算し、独自のpostMessageを使って送り返します（selfまたは暗黙のグローバルを使用します）。
// worker.js
self.onmessage = (event) => {
const { numbers } = event.data;
const total = numbers.reduce((a, b) => a + b, 0);
self.postMessage(total); // send result back
};返信を受信する
メインスレッドに戻ったら、結果を取得するためにワーカーオブジェクトのmessageをリッスンします。
worker.onmessage = (event) => {
console.log('result from worker:', event.data);
};addEventListener形式
onmessageプロパティの代わりにaddEventListener('message', ...)を使用できます。これにより、複数のリスナーを登録できます。
worker.addEventListener('message', (event) => {
console.log('got:', event.data);
});構造化複製
メッセージは共有されるのではなく、構造化複製アルゴリズムを使ってコピーされます。オブジェクト、配列、Maps、Sets、Dates、型付き配列には対応していますが、関数、DOMノード、クラスメソッドには対応していません。
// OK to send: numbers, strings, plain objects, arrays,
// Map, Set, Date, ArrayBuffer, typed arrays.
// NOT cloneable: functions, DOM nodes, Error stacks lost.メッセージプロトコル
複数の操作を扱う場合は、ワーカーが実行内容を判断できるようにtypeフィールドを送信します。これにより、1つのワーカーを柔軟に利用できます。
// main:
worker.postMessage({ type: 'multiply', a: 6, b: 7 });
// worker.js:
self.onmessage = (e) => {
if (e.data.type === 'multiply') {
self.postMessage(e.data.a * e.data.b);
}
};リクエストを対応付ける
多数のメッセージを送信する場合は、返信とリクエストを対応付けられるようにidを付けます。ワーカーはそのidを返信に含めて返します。
// main: worker.postMessage({ id: 42, value: 'x' });
// worker: self.postMessage({ id: e.data.id, done: true });
// main can now match reply id 42 to its request.双方向通信
メッセージングは双方向かつ非同期です。ページはタスクを送り続けられ、ワーカーは部分的な結果をストリームで返せます。これらはすべてUIをブロックせずに行われます。
// Worker can report progress repeatedly:
// self.postMessage({ type: 'progress', percent: 50 });
// self.postMessage({ type: 'done', result: data });リスナーをクリーンアップする
ワーカーが不要になったら、メモリリークを避けるためにリスナーを削除してワーカーを終了します。ワーカーを繰り返し作成するシングルページアプリでは特に重要です。
worker.onmessage = null;
worker.terminate();確認問題
ワーカーのメッセージングについての理解度を確認しましょう。
まとめ
ワーカーのメッセージングについて学びました。
postMessage(data)で送信し、messageイベントで受信します。- データは
event.dataに格納されます。 - 両方の側から送信できるため、双方向通信になります。
- データは共有されず、構造化複製によってコピーされます。
- 複数のタスクには
type/idプロトコルを使用します。
次は、コピーなしでデータを扱う転送可能オブジェクトについて学びます。
よくある質問
「postMessage でメッセージを送る」レッスンは無料ですか？
はい。「postMessage でメッセージを送る」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「postMessage でメッセージを送る」で何を学びますか？
メインスレッドと Worker の間で通信します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「postMessage でメッセージを送る」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Web Worker を作成する
- postMessage でメッセージを送る
- Transferable オブジェクト
- 活用例と制限事項