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);
 };