HTML5 ウェブワーカー

HTML5 Web Workers

Web worker はバックグラウンドで実行されるJavaScriptであり、ページのパフォーマンスには影響を及ぼしません。

何が Web Worker ですか?

HTMLページでスクリプトを実行すると、スクリプトが完了するまでページの状態は応答不能になります。

Web worker はバックグラウンドで実行される独立したJavaScriptで、他のスクリプトとは独立しており、ページのパフォーマンスには影響を与えません。Web worker がバックグラウンドで動作している間でも、クリックやコンテンツの選択など、何でもできます。

ブラウザのサポート

Web workers は以下のブラウザでサポートされています：

ブラウザ	バージョン
Internet Explorer	10+
Firefox	すべてのバージョン
Chrome	すべてのバージョン
Safari	すべてのバージョン
Opera	すべてのバージョン

HTML5 Web Workers の例

以下の例では、バックグラウンドでカウントを行うシンプルなWeb workerを作成します：

<body>

<p>カウント： <output id="result"></output></p>
<button onclick="startWorker()">働き始める</button> 
<button onclick="stopWorker()">仕事をやめる</button>

<p><strong>注:</strong> Internet Explorer 9 以前の IE ブラウザは Web ワーカーをサポートしていません。</p>

<script>
var w;

function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
     document.getElementById("result").innerHTML = "申し訳ありませんが、お使いのブラウザは Web Workers をサポートしていません...";
    }
}

function stopWorker() 
{ 
    w.terminate();
    w = undefined;
}
</script>

</body>

注意： Internet Explorer 9 およびそれ以前のバージョンのブラウザは Web Workers をサポートしていません。

ブラウザが Web Worker をサポートしているかを調べる

Web worker を作成する前に、ユーザーのブラウザがサポートしているかどうかを調べます：

        if (typeof(Worker) !== "undefined") {
            // はい! Web worker サポートあり!
            // いくつかのコード.....
        } else {
            // 申し訳ありません! Web Worker 未対応
        }

Web Worker ファイルを作成する

外部のJavaScriptファイルにWeb workerを作成します。以下に示すのは "demo.js" ファイルのカウントスクリプトです：

        var i = 0;
        
        function timedCount() {
            i = i + 1;
            postMessage(i);
            setTimeout("timedCount()", 500);
        }
        
        timedCount();

上記コードの重要な部分は postMessage() メソッドです。これは HTML ページにメッセージを返送するために使用されます。

注： web workerは通常、このような単純なスクリプトではなく、よりCPUリソースを消費するタスクに使用されます。

Web Worker オブジェクトを作成する

すでにWeb worker ファイルがあるので、次はHTMLページからこれを呼び出す必要があります。

次のコードは worker の存在を確認し、存在しない場合は新しいWeb workerオブジェクトを作成し、"demo_workers.js" のコードを実行します：

        if (typeof(w) == "undefined") {
            w = new Worker("demo.js");
        }

次に、Web worker からメッセージを受信するために "onmessage" イベントリスナーを追加します：

        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };

Web Worker の終了

Web workerオブジェクトを作成すると、それが終了されるまで、メッセージのリスニングを続けます。Web worker を終了してブラウザやコンピュータのリソースを解放するには、terminate() メソッドを使用します：

        w.terminate();

完全な Web Worker の例

以下は .js ファイル内の Worker コードを含む完全なHTMLページのコードです：

        <!DOCTYPE html>
        <html>
        <head> 
        <meta charset="utf-8"> 
        <title>HTML5 Web Workers</title> 
        </head>
        <body>
        
        <p>カウント： <output id="result"></output></p>
        <button onclick="startWorker()">開始 Worker</button> 
        <button onclick="stopWorker()">停止 Worker</button>
        
        <p><strong>注意：</strong> Internet Explorer 9 及びそれ以前のバージョンのブラウザは Web Workers をサポートしていません。</p>
        
        <script>
        var w;
        
        function startWorker() {
            if (typeof(Worker) !== "undefined") {
                if (typeof(w) == "undefined") {
                    w = new Worker("demo.js");
                }
                w.onmessage = function(event) {
                    document.getElementById("result").innerHTML = event.data;
                };
            } else {
                document.getElementById("result").innerHTML = "申し訳ありませんが、あなたのブラウザはWeb Workersをサポートしていません...";
            }
        }
        
        function stopWorker() {
            w.terminate();
            w = undefined;
        }
        </script>
        
        </body>
        </html>

Web Workers と DOM

Web worker は外部ファイルであるため、以下のJavaScriptオブジェクトにはアクセスできません：

window オブジェクト
document オブジェクト
parent オブジェクト

QAセクション

Q1: Web worker はどのようにしてメッセージをHTMLページに送信しますか?

A1: postMessage() メソッドを使用してメッセージを送信します。このメッセージはHTMLページのonmessageイベントで受け取られます。

Q2: Web worker はどのブラウザでサポートされていますか?

A2: Web workers は Internet Explorer 10以上、すべての最新の Firefox, Chrome, Safari および Opera でサポートされています。

Q3: Web worker を終了するにはどうすればよいですか?

A3: terminate() メソッドを使用してWeb workerを終了し、ブラウザやコンピュータのリソースを解放できます。