Firefox 3.1のWeb Workersでマルチスレッド・プログラミング

杉山貴章（オングス）
2009-01-15 17:00:00
Firefox 3.1に追加される新機能「Web Workers」を利用すれば、JavaScriptでも複数の処理を同時に実行することができるようになる。今回は、そのWeb Workersを使用する簡単な例を紹介する。
最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

Web Workersの使用例

　ウェブサイトでJavaScriptを使用する場合、通常ならばスクリプトの実行中はページの表示処理が止まってしまうため、あまり長い時間のかかる処理を行うのは好ましくない。その点Web Workersを利用すればバックグラウンドでスクリプトを実行しながら、同時に他の処理を継続するできるため、ユーザに対して素早くレスポンスを返すことが可能となる。

　リスト1およびリスト2はWHATWGのドラフトに掲載されたWeb Workersの使用例である。find-primenumber.htmlではworker.jsを指定してWorkerオブジェクト作成し、worker.jsでは素数を計算し続ける。

リスト1 find-primenumber.html - Web Workersの使用例



  
    
    Web Workersの使用例
  
  
    
最大の素数を計算中:

リスト2 worker.js - 素数を計算するJavaScript

var n = 1;
search: while (true) {
  n += 1;
  for (var i = 2; i <= Math.sqrt(n); i += 1) {
    if (n % i == 0) {
      continue search;
    }
  }
  // 素数を発見
  postMessage(n);
}

　この例ではfind-primenumber.htmlでworker.jsを指定してWorkerオブジェクト作成している。したがって、worker.jsの処理はメインのスレッドとは別のスレッドで動作することになる。worker.jsでは素数を計算し、発見する度にその値をpostMessage()で通知する。find-primenumber.htmlではmessageイベント経由でその値を受け取って表示しているというわけだ。

　通常ならばJavaScriptの実行中はページの表示処理が止まってしまうため、このような長時間計算を続けるスクリプトは使うことができない。その点Web Workersを利用すれば、スクリプトの実行中も他の処理を継続できるため、ユーザに対して素早くレスポンスを返すことが可能となる。

　Firefox 3.1にはまだ完全には実装されていないが、WHATWGのドラフトではWeb Workersをより便利に活用するためのインタフェースがいくつか定義されている。例えばWorkerスレッド内でlocalStorageへのアクセスやopenDatabase()メソッドによるローカルデータベースへのアクセスなどを行えるようにするWorkerUtilsなどだ。このようなAPIが整備されることよって、スレッドセーフで行える処理の充実が期待できる。マルチスレッドは、今後のJavaScriptを語る上で重要なキーワードとなるだろう。

　さて、約半年に渡って続けてきた本連載も今回で最終回となる。ウェブ開発者をサポートするツールという観点から、Firefox 3の新機能や便利なアドオン、HTML 5の新機能などについて紹介してきた。本連載がウェブアプリケーション開発を行う上で少しでも役に立てば幸いだ。

  • コメント（1件）
#1 anonymous   2009-02-22 21:48:02
新機能なしでも既存機能だけでほぼ実現できた。


  
    
    Web Workers?
    <script>
      var n = 2147483647;
      w(search);
      function search(){ 
        s: while (true) {
          n ++;
          for (var i = 2; i <= Math.sqrt(n); i++) {
            if (n % i == 0) {
              continue s;
            }
          }
          document.body.innerHTML = n;
          w(arguments.callee);
          return;
        }
    }
    function w(f){
        setTimeout(f, 0);
    }
    </script>
  • 新着記事
  • 特集
  • ブログ