Wikimore

Web Worker API

はじめに

JavaScriptは基本的にシングルスレッドで動作します。これはメインスレッドが重い処理を実行している間、ユーザーインターフェースがフリーズしてしまう可能性があるという問題があります。Web Worker APIはこの問題を解決するための技術で、バックグラウンドでJavaScriptを実行するための標準的な方法を提供します。

Web Workerの基本

Web Workerは、メインスレッドとは別のバックグラウンドスレッドでJavaScriptコードを実行できるようにします。これにより、複雑な計算や時間のかかる処理をメインスレッドをブロックすることなく実行できます。

main.js

(メインスレッド)

// Workerを作成
const myWorker = new Worker('worker.js');

// Workerにメッセージを送信
myWorker.postMessage({number: 1000000});

// Workerからのメッセージを受信
myWorker.onmessage = function(e) {
  console.log('計算結果: ' + e.data.result);
};

// エラーハンドリング
myWorker.onerror = function(error) {
  console.error('Worker error: ' + error.message);
};

worker.js

(ワーカースレッド)

// メインスレッドからのメッセージを受信
self.onmessage = function(e) {
  const number = e.data.number;
  
  // 時間のかかる計算（例：素数判定）
  let result = findPrimes(number);
  
  // 結果をメインスレッドに送り返す
  self.postMessage({result: result});
};

// 指定した数値までの素数を見つける関数
function findPrimes(max) {
  const primes = [];
  for (let i = 2; i <= max; i++) {
    let isPrime = true;
    for (let j = 2; j <= Math.sqrt(i); j++) {
      if (i % j === 0) {
        isPrime = false;
        break;
      }
    }
    if (isPrime) primes.push(i);
  }
  return primes.length; // 素数の数を返す
}

通信の仕組み

Web Workerとメインスレッド間の通信は、postMessage()メソッドとonmessageイベントハンドラを使用して行います。データは値のコピーとして渡され、共有されません。

機能	メインスレッド	ワーカースレッド
メッセージ送信	`worker.postMessage(data)`	`self.postMessage(data)`
メッセージ受信	`worker.onmessage = function(e) {...}`	`self.onmessage = function(e) {...}`
エラー処理	`worker.onerror = function(e) {...}`	`self.onerror = function(e) {...}`
終了	`worker.terminate()`	`self.close()`

Web Workerの種類

専用Worker (Dedicated Worker)

一つのスクリプトからのみ利用可能なワーカーです。最も一般的なタイプのワーカーです。

// メインスクリプト
const dedicatedWorker = new Worker('worker.js');
dedicatedWorker.postMessage('Hello from main thread');

共有Worker (Shared Worker)

複数のスクリプト（ウィンドウ、タブ、フレームなど）から利用可能なワーカーです。

// メインスクリプト
const sharedWorker = new SharedWorker('shared-worker.js');
sharedWorker.port.start(); // 通信を開始
sharedWorker.port.postMessage('Hello from window 1');

// shared-worker.js
self.onconnect = function(e) {
  const port = e.ports[0]; // 接続してきたポートを取得
  
  port.onmessage = function(e) {
    // メッセージを受信し処理
    port.postMessage('Received: ' + e.data);
  };
  
  port.start(); // 通信を開始
};

Web Workerの制限事項

Workerでは利用できないAPIがいくつかあります。

利用できないもの	理由
DOM操作 (`document`, `window`)	UIスレッドのみが担当
親ページの変数・関数へのアクセス	別スレッドで実行されているため
`alert()`, `confirm()`	ユーザーインタラクションはメインスレッドのみ

代わりに、Workerでは以下のAPIが利用可能です：

利用可能なAPI	例
Web Worker固有API	`self`, `postMessage()`
XMLHttpRequest	ネットワークリクエスト
WebSocket	双方向通信
タイマー	`setTimeout()`, `setInterval()`
Application Cache	オフラインアクセス
インポート機能	`importScripts()`

Transferable Objectsによる効率的なデータ転送

大量のデータを扱う場合は、データのコピーではなく所有権の移転によって効率的に通信できます。

// メインスレッド
const arrayBuffer = new ArrayBuffer(1024 * 1024 * 32); // 32MB
// データの所有権をWorkerに移転
worker.postMessage({ data: arrayBuffer }, [arrayBuffer]);
// このあとarrayBufferは使用できなくなる（長さが0になる）
console.log(arrayBuffer.byteLength); // 0

// Workerスレッド
self.onmessage = function(e) {
  const receivedBuffer = e.data.data;
  console.log(receivedBuffer.byteLength); // 33554432 (32MB)
  
  // 処理後、メインスレッドに所有権を戻す
  self.postMessage({ result: receivedBuffer }, [receivedBuffer]);
};

Web Workerのユースケース

Web Workerは以下のような場面で特に有用です：

画像・音声・動画処理
データの解析と加工
複雑な計算処理
大量のJSON処理
暗号化・復号化処理

実用的な例：画像処理