JSでの並列処理を可能にするWeb Workerって？

皆さんどうも。最近、とにかく眠たいの谷口です。

気温が温くなってきたというのもあると思いますが、普通に寝不足気味というのもあって、最近とにかく眠たいです。毎回毎回早く寝ようと思っているのに気づいたら日を跨いでて、寝不足に寝不足を重ねています。別に何かしているというわけでもなく、やるべきことをやっていたら日を跨いでいる、といった感じなのでだいぶシンドイですね……圧倒的に時間が足りない。

とまあそれはさておき、そろそろ本題に入りましょう。
今回は、JavaScriptで並列処理を可能にするWeb Workerの仕組みと使い方について簡単に説明します。前回、同期・非同期処理を調べていた際にたまたま見つけて、個人的に気になっていたので、勉強もかねて記事にします。
それでは、早速行ってみましょう！

この記事の内容

1 Web Wokerの仕組み
2 Web Wokerの使い方
3 Web Workerの使いどころ
4 終わりに

Web Wokerの仕組み

JavaScriptは、通常シングルスレッドで処理を実行しています。そのため、並列処理を行うことはできません。
しかし、ブラウザにはメインのスレッドとは別に、ワーカースレッドというものがあります。
このワーカースレッドを作成する方法のことをWeb Workerといいます。このWeb Workerを使えば、JavaScriptでも並列処理が可能になります。

それでは、使い方を見てみましょう。

Web Wokerの使い方

Workerの作成

Workerの作成は、Workerオブジェクトをnewするだけです。

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

はい、これだけ。

Workerのコンストラクタには、JSファイルを指定します。
同じファイルを指定することもできますが、今回は分かりやすくするために、メインの処理をするindex.jsと、ワーカーで処理するworker.jsとでファイルを分けて実行します。

では実際に、ワーカースレッドで処理を行ってみましょう。

メッセージの送受信

ワーカースレッドとやり取りをしたい場合は、「メッセージ」というものを送受信します。
それでは、そのメッセージを送受信するための書き方を見てみましょう。

まずは、メッセージを送信する側の書き方です。

// index.js
worker.postMessage('Hello!');

WorkerオブジェクトのpostMessageメソッドを使用して、worker.jsにメッセージを送信します。
今回は、「Hello!」を送信しています。

次は、受信する側の書き方です。

// worker.js
self.addEventListener('message', (message) => {
    const response = message.data + 'World!';
    self.postMessage(response);
});

messageイベントを使い、メッセージを受信します。
今回は受け取った後、受け取った「Hello!」と「World!」を結合し、それをindex.jsに送信しています。

因みに、Worker内ではwindowオブジェクトは使えないため、代わりにselfを使っています。

最後に、worker.jsから受信したメッセージをコンソールに出力します。

// index.js
worker.addEventListener('message', (response) => {
    console.log(response.data);
});

Workerの終了

Workerを終了する方法は2種類あります。

まず、Workerの呼び出し元で終わらせる方法です。

// index.js
worker.terminate();

そして、Worker側で終わらせる方法です。

// worker.js
self.close();

Web Workerの使いどころ

Web Workerは便利なのですが、Workerの中ではDOMオブジェクトやWindowオブジェクトは使えない、などの制限があります。
Web Workerの制限に関して、詳しくはMDNを見てください。

そして、このような制限があることによって、Web Workerの使いどころは限られてきます。
今回の記事とは少し変わりますが、一番わかりやすい使いどころだと、canvasを使った演算処理などに使うと便利だと思います。
Web Workerを使用して、canvas上の計算をしているデモを、作成しているページがあったので、是非こちらのサイトに飛んで見てみてください。