皆さんどうも。最近、とにかく眠たいの谷口です。
気温が温くなってきたというのもあると思いますが、普通に寝不足気味というのもあって、最近とにかく眠たいです。毎回毎回早く寝ようと思っているのに気づいたら日を跨いでて、寝不足に寝不足を重ねています。別に何かしているというわけでもなく、やるべきことをやっていたら日を跨いでいる、といった感じなのでだいぶシンドイですね……圧倒的に時間が足りない。
とまあそれはさておき、そろそろ本題に入りましょう。
今回は、JavaScriptで並列処理を可能にするWeb Workerの仕組みと使い方について簡単に説明します。前回、同期・非同期処理を調べていた際にたまたま見つけて、個人的に気になっていたので、勉強もかねて記事にします。
それでは、早速行ってみましょう!
この記事の内容
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上の計算をしているデモを、作成しているページがあったので、是非こちらのサイトに飛んで見てみてください。
終わりに
というわけで、今回はここまで。
自分の勉強も兼ねて、ということだったので、本当に簡単にしか説明できていませんが、さらっと必要そうなとこはまとめられたかなと思います。
しかし、Web Workerは調べれば調べるほど奥深いので、簡単に説明しているつもりなのに、書いてる側的にはとても難しかったです。
次の記事はいつだろうか…分かりませんが、また次の記事でお会いしましょう!