HTML Web Workers を利用する - シンプルな Web Workers の作成 - HTML

HTML Web Workers を利用するコードを紹介します。

概要

HTML Web Workers を利用すると、JavaScriptでマルチスレッド処理や非同期処理を実装できます。この記事ではシンプルなHTML Web Workers のコードを紹介します。

プログラム

コード

下記のコードを記述します。

SimpleWebWorker.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script type="text/javascript">
    function ExecWorker() {
      var worker = new Worker('task.js');

      worker.onmessage = onMessage;

      var obj = {
        value1: 25,
        value2: 4
      };

      worker.postMessage(obj); 
    }

    function onMessage(e) {
      var elem = document.getElementById('output');
      elem.innerText = e.data;
    }
  </script>
</head>
<body>
  <a href="#" onclick="ExecWorker();">実行</a>
  <div id="output"></div>
</body>
</html>

task.js

onmessage = function (e) {
    console.log(e.data.value1);
    console.log(e.data.value2);

    var result = e.data.value1 + e.data.value2;
    postMessage(result);    
}

解説

HTMLページ側

HTMLページのJavasScriptから紹介します。

    function ExecWorker() {
      var worker = new Worker('task.js');

      worker.onmessage = onMessage;

      var obj = {
        value1: 25,
        value2: 4
      };

      worker.postMessage(obj); 
    }

    function onMessage(e) {
      var elem = document.getElementById('output');
      elem.innerText = e.data;
    }

下記のコードにより、新しいWebWorkerを作成します。

  var worker = new Worker('task.js');

Workerのonmessage にイベントハンドラをセットします。このコードにより、Workerから postMessage でメッセージが送信されると、onMessage関数が呼び出される動作になります。

  worker.onmessage = onMessage;

Workerに渡す値を準備します。今回は複数の値を渡すため、オブジェクトを用意します。

  var obj = {
    value1: 25,
    value2: 4
  };

postMessageメソッドを呼び出し、Web Workerを開始します。引数にWorkerに渡す変数やオブジェクトを与えます。

  worker.postMessage(obj);

Worker からpostMessageで値が送信されると、下記のonMessage関数が呼び出されます。今回の例では "output" のIDの枠にWorkerから返却された値を表示します。~

  function onMessage(e) {
    var elem = document.getElementById('output');
    elem.innerText = e.data;
  }

Web Workers側

onmessage = function (e) {
    console.log(e.data.value1);
    console.log(e.data.value2);

    var result = e.data.value1 + e.data.value2;
    postMessage(result);    
}

Web Workerssが呼び出されると上記のコードが実行されます。呼び出し元からの変数やオブジェクトは引数e の dataに格納されます。呼び出し元から渡された値をコンソールに表示し、その後2つの和をとり、呼び出し元へ返却します。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。

[実行]リンクをクリックします。Web Workerによって、計算された結果が画面に表示されます。

デバッグツール等でコンソールの表示を確認します。呼び出し元から与えた値が、Web Worker で正しく取得できていることも確認できます。

補足

WorkerのJavaScriptファイルは今回は下記の記述をしましたが、addEventListener を利用した記述でも同じ動作になります。

例 : onmessage を利用するコード

onmessage = function (e) {
    console.log(e.data.value1);
    console.log(e.data.value2);

    var result = e.data.value1 + e.data.value2;
    postMessage(result);    
}

例 : addEventListener を利用するコード

self.addEventListener('message', function (e) {
    console.log(e.data.value1);
    console.log(e.data.value2);

    var result = e.data.value1 + e.data.value2;
    postMessage(result);   
}, false);

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

掲載日: 2016-09-28

目次