このページの本文へ

JavaScriptで並列処理ができる「Web Workers」 (3/5)

2010年10月13日 11時00分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

ワーカー処理の制限とデバッグ

 ワーカー内はどんな処理でも自由にできるわけではありません。Web SocketやWeb Storage、非同期通信などが使える一方で、DOMやUI操作に関する処理はできません。ワーカー内にはwindowオブジェクトやdocumentオブジェクトが存在せず(navigatorオブジェクトはあります)、alert()はもちろん、Firebugなどで使用できるconsole.log()も使えません(Firebugなどのデバッガーは使えません)。

【図4】fig4.png

console.log()などデバッグに便利なメソッドは使用できない

 これではワーカー内でエラーが発生したときのデバッグが大変です。そこデバッグしやすくするためにプログラムに以下の1行を追加し、ワーカー内でエラーが発生したときのerrorイベントを捕捉します。


ワーカーオブジェクト.addEventListener("error", function(){} , true);


 サンプル2を実行するとエラーが発生し、エラーコンソールに詳細が表示されます。

Firefox 3.6の場合

ワーカー内でエラーが発生するとFirebugコンソールに、エラーの内容と行数、ファイル名が表示される。ファイル名をクリックすると該当するファイル内容がウィンドウに表示されエラー箇所がハイライトされる

Safari 5 (WebKit系)の場合

ワーカー内でエラーが発生するとコンソールに、エラーの内容と行数、ファイル名が表示される。ファイル名をクリックすると該当するファイル内容がコンソール内に表示され赤色でハイライトされる

サンプル2[HTML]


<!DOCTYPE html>
    <head>
        <meta charset="utf-8" />
        <title>Web Workers内のコードデバッグ</title>
    </head>
    <body>
        <h1>Web Workers内のコードデバッグ</h1>
        <form action="./ww.cgi" method="get">
            <input type="button" id="sendMessage" value="ワーカーにメッセージを送信" />
        </form>
        <script>
            document.getElementById("sendMessage").addEventListener("click", function(){
                // ワーカー設定
                var myWorker = new Worker("sub.js");
                myWorker.addEventListener("message", function(event){
                    alert(event.data);
                }, true);
                // ワーカー内でのエラーを捕捉しログに出力
                myWorker.addEventListener("error", function(){} , true);
                myWorker.postMessage(100);
            }, true);
        </script>
    </body>
</html>


サンプル2[sub.js]


addEventListener("message", function(event){
    var count = event.data;
    var total = 0;
    for(var i=0; i<=count; i++){
        total = total + i;
    }
    a = new XYZ();  // ●ここでエラーが発生するようにした
    postMessage(total);
}, false);


この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています