Javascript マルチスレッド処理技術 WebWorkerのサンプル

WebWorker とは、HTML5 API の１つで、Javascript を並列計算するために標準で用意されている規格です。 通常 Javascript は CPU の１つのスレッドで演算を行うため、もし時間のかかる演算の場合にはその演算が終わるまで次の命令を受け付けません。 一方、WebWorker を利用すると、予め処理を定義しておいた「Worker」を任意のタイミングで呼び出すことで、重い演算のマルチスレッド処理が可能となります。 つまり、昨今のマルチコア搭載マシンで、 Javascript を利用した演算を効率的に行うことができるわけです。

WebWorker の使い方

マルチスレッド処理と聞くと難しく感じますが、WebWorkerを実装するのは非常に簡単です。 ライブラリを別途読み込む必要すらありません。 次の４つを行います。

１．Worker クラスのオブジェクトを宣言
２．Worker に変数を送る
３．Worker で行う処理を定義
４．Worker から処理結果を受けとる

４つとも簡単なので、 次に具体的なプログラムソースを示します。

１．Worker クラスのオブジェクトを宣言

var worker = new Worker("Worker で実行する処理を記述するファイル名");

これだけです。本サンプルでは、Worker で実行する処理を記述する外部ファイル名を「worker_test.js」とします。 もちろん、オブジェクト名「worker」は任意です。

２．Worker に変数を送る

worker.postMessage( 変数名 ); //Worker に 変数を渡す

これだけです。 「worker」は１で宣言した Worker クラスのオブジェクト名で、「postMessage」は Worker クラスオブジェクトのメソッドです。 「postMessage」に引数を設定することで、外部で実行する処理にパラメータを送ることができます。 引数には普通の変数だけでなく、配列やオブジェクト（連想配列）を与えることもできます。 オブジェクトを引数として与えた例は次のとおりです。

var AA = {n:1, l:2, m:3}; //Worker に渡すオブジェクトを宣言
worker.postMessage(AA);	  //Worker に オブジェクトを渡す

３．Worker で行う処理を定義

１で指定したファイルに、２で与えたパラメータを利用して Worker で実行する処理を記述します。

worker_test.js

onmessage = function(event) {
    var AA = event.data;  
    //ここに処理を記述する
    var results = AA;
    postMessage(results);
}

「event.data」には、２の「postMessage」の引数で設定した変数が格納されています。 さらに、「postMessage」関数を用いて処理の結果を呼び出したオブジェクトに返します。 上の例では、動作確認を目的としているので、受けた変数を何も処理をせずにそのまま返しています。

４．Worker から処理結果を受けとる

３の「postMessage」関数の引数で指定した変数を元のプログラムで受け取ります。 変数が返されると、Worker クラスオブジェクトのメソッド「onmessage」が呼び出されます。

worker.onmessage = function(event) {
	var BB = event.data;
}

「event.data」には、３の「postMessage」の引数で設定した変数が格納されています。 受けた処理後のデータをあとは煮るなり焼くなりするだけです。

WebWorker のサンプルプログラム

下のボタンを押すと、データを Worker に送った後に処理を行い、 さらに Worker から受け取ったデータを出力しています。

サンプルプログラムのソース

上記サンプルプログラムは、「メイン」と「worker_test.js」の２つのソースから成り立ちます。

メインのソース

var worker = new Worker("worker_test.js");
worker.onmessage = function(event) {//ワーカーから受け取り
	var BB = event.data;
	document.getElementById("output").innerHTML = "n = " + BB.n + "
l = " + BB.l + "
m = " + BB.m;
}
function pushButton (){  //ボタンをクリックした際の処理
	var AA = {n:1, l:2, m:3};
	worker.postMessage(AA);		 // ワーカに数値を渡す
};

worker_test.js

onmessage = function(event) {
    var AA = event.data; // event.data
    //ここに処理を記述する
    var results = AA;
    postMessage(results);
}

参考ページ

・HTML5のWeb Workersを使ってみた（コイケアキヨシ blog）
・Webworker の例：HTML5による物理シミュレーション～水素原子の波動関数ビューア～