こんにちは。Webチームのジョンです。
今回はWEBワーカーについて、記事を書きました。
WEBワーカーとは
WEBワーカーは独立しているJavascriptでバックグラウンドに走るスクリプトになります。一般的にはJavascriptはシングルスレッドプログラミング言語のため同時に複数スクリプトを走らせることができません。でもWEBワーカーを使うことでJavascriptのメインプロセスをブロックすることなしで複数のスクリプトを実行することができます。
WEBワーカーの基本的な使い方
demo_workers.js
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
main_script.js
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event){
console.log(event.data);
};
- まず、WEBワーカーに実行したいスクリプトを作り、
demo_worker.jsファイルに保存しました。 - メインのスクリプトに
new Worker()でWEBワーカーのインスタンスを作り、WEBワーカーに実行したいスクリプトのファイルを第一引数に設定する。 - WEBワーカーのインスタンスに
onmessageイベントを付けてWEBワーカーから送られたメッセージをメインスクリプトに受け取りconsole.logで出す。
外部ファイルを使わずに
- まずWEBワーカーに実行したいスクリプトを文字列として変数に格納する。
encodeURIComponentファンクションを使い、スクリプトの文字列のデータＵＲＩを作成します
const workerCode = ` var i = 0; function timedCount() { i = i + 1; postMessage(i); setTimeout("timedCount()",500); } timedCount(); `; const workerURI = `data:text/javascript;charset=utf-8,${encodeURIComponent(workerCode)}`;blobを使うこともできます
const workerBlob = new Blob([workerCode], { type: 'text/javascript' }); const workerURL = URL.createObjectURL(workerBlob);後は、基本の使い方と全く同じになります。
// encodeURIComponentを使った場合 const w = new Worker(workerURI); // blobを使った場合 // const worker = new Worker(workerURL); w.postMessage('Hello, worker!'); w.onmessage = function(event){ console.log(event.data); };
まとめ
インラインでWEBワーカーのコードを書くのは便利ですがデメリットとメリットがあります。スクリプトを文字列にしないといけないため、管理しにくくなりますし、IDEのコードハイライトや文法チェック、リント等が効かなくなります。その時は別のJavascriptファイルに入れた方がいいと思います。
小さいコードであればインラインで書いても問題ないですが、そもそもWEBワーカーを使うべきなのか？という問題も出てきます。
いろいろWEBワーカーの書き方がありますが、結局自分のユースケースによってどれを一番ふさわしいのかを自分で判断しないといけないです。
