JavaScript のWeb Worker API の使い方についての覚え書きです。

Web Worker とは

Web Workerは、JavaScriptの処理を、バックグランドで並列に実行するための機能。

Workerへの処理命令

呼び出し元の記述例

main.jsから、Worker（worker.js）を呼び出し、処理を投げます。

index.html

<label for="input1">width: </label><input id="input1" type="number">
<label for="input2">height: </label><input id="input2" type="number">
<input id="btn" type="button" value="Area?">
<output id="output"></output>

main.js

document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('btn').addEventListener('click', function () {
    let width = document.getElementById('input1').value;
    let height = document.getElementById('input2').value;
    let output = document.getElementById('output');
    //Workerオブジェクト
    var worker = new Worker('url_hoge/worker.js');
    //workerへ処理を命令
    worker.postMessage({
      'width': width,
      'height': height
    });
    //Workerから処理結果を受信したときの処理
    worker.addEventListener('message', function (e) {
      output.textContent = e.data;
    }, false);
    //Workerからエラーを受信したときの処理
    worker.addEventListener('error', function (e) {
      output.textContent = e.message;
    }, false);
  })
})

コンストラクタ Worker()の引数で、worker側のjsのパスを指定。
postMessage()の引数がworker.jsへ渡される。~~引数には文字列しか取れないので、オブジェクトJSONに変換してから渡す。~~ 引数にはJavaScriptのあらゆるオブジェクトを指定可能。
worker.js側からの処理が返ると、messageイベントが発火する。このイベントオブジェクトのdataプロパティとして、処理結果が返される。

Worker側の記述例

全然重たい処理ではないけど、Worker側でJavaScriptを実行させてみます。

worker.js

self.addEventListener('message', function (e) {
  if (!Number(e.data.width) || !Number(e.data.height)) {
    self.postMessage('入力エラーです');
  } else {
    self.postMessage(Number(e.data.width) * Number(e.data.height));
  }
})

main.js側からの命令を受けると、worker.js側でmessageイベントが発火する。
main.jsからpostMessage()の引数として渡されたデータが、イベントオブジェクトのdataプロパティに入る。
postMessage()で、main.jsに処理結果を返す。

postMessage()

呼び出し元からWorkerへ処理を命令する、あるいは、Workerから呼び出し元へ処理結果を返す。
引数は、メッセージを受け取った側からは、messageイベントのdataプロパティでアクセスできる。

messageイベント

Worker側で呼び出し元からの処理命令を受け取ったとき、あるいは、呼び出し元側でWorkerからの処理結果を受け取ったときに発生するイベント。

errorイベント

Worker側で実行時にエラーが発生したときに発生するイベント。
エラーイベントは以下のプロパティをもつ。

message
人間が読み取れるエラーメッセージ
filename
エラーが発生したスクリプトのファイル名
lineno
スクリプトファイル内でエラーが発生した場所の行番号

Workerの終了

terminate()

worker.terminate();

呼び出し側からWorkerを終了させる。Workerは、自身の操作を完了したり、クリーンアップしたりすることなく、直ちに終了する。

close()

Worker側から自分自身を終了する。

参考