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ワーカーの書き方がありますが、結局自分のユースケースによってどれを一番ふさわしいのかを自分で判断しないといけないです。

Photoruction工事中！

Photoructionの開発ブログです！

WEBワーカーを外部ファイルを使わずにインラインで実行し方

WEBワーカーとは

WEBワーカーの基本的な使い方

外部ファイルを使わずに

まとめ