Web Workersプログラミングの基本
ワーカを呼び出すJavaScriptスクリプト
リスト1 Web Workers呼び出しJavaScriptの基本パターン
<script type="text/javascript">
// （1）ワーカの実装チェック
if (window.Worker){
$("#stat").text("このブラウザはWeb Workersを使用できます。");
} else {
alert("このブラウザはWeb Workersを使用できません。");
}
// （2）ワーカの生成
var worker1 = new Worker("worker1.js");
// （3）ワーカに処理依頼
function send() {
var val1 = $("#val1").val();
var val2 = $("#val2").val();
worker1.postMessage({ "val1": val1, "val2": val2 });
}
// （4）ワーカ処理結果の受信(非同期）と表示
worker1.onmessage = function (e) {
$("#out").text(e.data);
}
ブラウザの対応確認
（1）では使用しているブラウザでWeb Workersが使用できるかを確認しています。なお、詳細な対応状況はcaniuse.comに記載されていますが、この連載で使用しているChromeのほか、FireFox、Safariなどの主要ブラウザでは使用できますが、IEではバージョン10.0からになります。また、スマートフォンなどモバイル版のブラウザではまだ対応にバラツキがあります。
ワーカの使用手順
- ワーカを使用する場合、最初にワーカインスタンスを生成します。生成は（2）のように、JavaScriptで記述されたワーカ（worker1.js）を引数指定して行います。インスタンスの名前（ここではworker1）はなんでもよく、また複数のワーカインスタンスを生成して並行使用することもできます。
- JavaScriptプログラムからのワーカへの処理依頼は、生成したワーカインスタンスにpostMessageメソッドを適用して行い（3）、メソッド実行と同時でワーカのバックグラウンド処理が開始されます。ワーカに渡すデータは引数に指定します。ここではJSONフォーマットのデータになっていますが、それ以外のフォーマットでも問題ありません。
- ワーカでの処理が完了すると、（4）のように.onmessageイベントで知らされ、匿名関数内でワーカからのレスポンスに対する処理を行います。匿名関数は、イベントオブジェクト（ここではe）がセットされた状態で起動され、このオブジェクトのdataプロパティ値（e.data）がワーカから返される値になります。
ここで（4）はイベント駆動型の処理なので、（3）と（4）のプログラム記述はどちらが先でも問題ありません。
ワーカスクリプト
リスト2 Web Workersスクリプトの基本パターン
onmessage = function (e) {
var dat = e.data;
// ワーカ内処理
：
：
var wval = Web Workersでの処理結果;
postMessage(wval);
}
メインのJavaScriptプログラムでpostMessageが実行されると、リスト2、Web Workersスクリプトのonmessageイベントから匿名関数が起動されます。匿名関数はイベントオブジェクト（e）がセットされた状態で起動され、プロパティdata(e.data)に渡された引数がセットされています。
Web Workersでの処理か完了から、その結果をpostMessageの引数にセットして実行すると、リスト1、（4）の匿名関数が起動されます。
