【JavaScript】Web Workers の使い方

JavaScriptで並列処理ができるWeb Workersを使って、じゃんけんプログラムを書きます。

JavaScriptという言語は、すべての処理が単一スレッドで動作するようにできています。

setTimeoutで実行される処理やXMLHttpRequestのコールバックなど、非同期で動作するものはたくさんありますが、これらも全て単一のスレッドで動作します。ですからsetTimeoutで実行される処理に時間がかかりすぎると、その間は他の処理が全て止まってしまいブラウザが固まったりするわけです。そんなJavaScriptにマルチスレッドプログラミングをもたらすのがWebWorkersです。

SONICMOOV LAB

index.html

<p class="count"></p>
<p class="hand"></p>

<script>
$(function(){

    // WebWorkersが利用できるか
    if (window.Worker) {

        // Workerの作成
        var worker = new Worker('janken.js');

        // Workerからメッセージを受け取ったら
        worker.onmessage = function(e) {
            var count = e.data.count,
                hand  = e.data.hand;

            if (count === 11) {
                $('.count').text('おしまい');
                $('.hand').remove();

                // 停止
                worker.terminate();
            } else {
                $('.count').text(count + '回戦');
                $('.hand').text(hand);
            }
        };

        // エラー処理
        worker.onerror = function(e) {
            console.log(e.message + e.filename + e.lineno);
        };

        // Workerへメッセージ送信(文字列、JSON)
        worker.postMessage(null);
    } else {
        alert('対応していません。');
    }
});
</script>

janken.js

var count  = 1,
    janken = ['グー','チョキ','パー'];

self.onmessage = function(e) {

    // メッセージの受信
    var data = e.data;

    // 他ライブラリなどを読み込む場合
    importscripts('hoge.js', 'hogehoge.js');

    setInterval(function() {
        var rand = Math.floor(Math.random() * 3);

        // メイン処理へメッセージ送信
        self.postMessage({
            count: count++,
            hand: janken[rand]
        });

        if (count === 20) {
            // 停止
            self.close();
        }
    }, 1000);
};