活用例と制限事項
Worker が役立つ場面と、できないことを理解します。
「活用例と制限事項」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
ワーカーが得意な処理
Web Workersは、UIを停止させてしまうようなCPU負荷の高い処理で力を発揮します。
- 画像と動画の処理
- 大きなファイル（CSV、JSON）の解析
- 暗号処理とハッシュ計算
- 物理計算、データ分析、シミュレーション
DOMにはアクセスできない
最大の制限は、ワーカーからDOMを操作できないことです。documentもwindowもありません。ワーカーはデータを計算して送り返し、メインスレッドがUIを更新します。
// Inside a worker:
// document.querySelector(...) -> ReferenceError
// Workers have no DOM at all.利用できるもの
ワーカーでは、fetch、setTimeout、WebSocket、IndexedDB、crypto、型付き配列など、多くの便利なAPIを利用できます。そのため、データの取得や保存も別スレッドで問題なく行えます。
// Inside a worker this is valid:
// const res = await fetch('/data.json');
// const json = await res.json();
// self.postMessage(json);構造化複製の制限
メッセージは構造化複製によってコピーされることを思い出してください。関数、DOMノード、メソッドを持つクラスのインスタンスは送信できず、シリアライズ可能なデータだけを送信できます。
// Cannot be sent:
// worker.postMessage(() => {}); // function - fails
// worker.postMessage(document.body); // DOM node - fails起動とメッセージングのコスト
ワーカーの作成とメッセージのシリアライズにはオーバーヘッドがあります。小さなタスクでは、メッセージングのコストがメリットを上回ることがあります。ワーカーは、規模の大きい処理を継続的に行う場合に効果を発揮します。
ワーカーを維持する
タスクごとに新しいワーカーを起動するのは非効率的です。長期間稼働するワーカーを再利用して多数のメッセージを送るか、並列処理のために少数のワーカーで構成したプールを維持します。
// Reuse one worker for many tasks:
const worker = new Worker('worker.js');
function run(task) {
worker.postMessage(task);
}
// Avoid: new Worker(...) on every single call.ワーカープール
複数のCPUコアを利用するには、複数のワーカーを作成してタスクを分散させます。アイドル状態のワーカーを追跡し、受信した処理を空いているワーカーに割り当てます。
const pool = [];
for (let i = 0; i < 4; i++) {
pool.push(new Worker('worker.js'));
}
// Round-robin or queue tasks across the pool.メモリを共有する
高度な用途では、SharedArrayBufferを使ってスレッド間でメモリを直接共有できます（安全にアクセスするにはAtomicsを使用します）。特別なクロスオリジン分離ヘッダーが必要で、誤用もしやすいため注意が必要です。
// Requires COOP/COEP headers to be enabled.
// const shared = new SharedArrayBuffer(1024);
// Atomics.add(view, 0, 1); // safe concurrent updateエラーの分離
ワーカーで捕捉されなかったエラーがページをクラッシュさせることはありません。ワーカーのerrorイベントとして通知されるため、ログを記録するかワーカーを再起動する処理を実装してください。
worker.onerror = (e) => {
console.log('worker failed:', e.message);
// optionally recreate the worker here
};ワーカーを使わない場面
タスクが単純な場合、頻繁にDOMを更新する必要がある場合、またはネットワークの待機がほとんどの場合は、ワーカーを使わないでください。非同期のfetchはすでにブロックしないためです。ワーカーは本当にCPU負荷が高い処理に使用します。
全体を組み立てる
Web Workersは、DOMへの直接アクセスや簡単なデータ共有と引き換えに、真の並列処理を実現します。負荷の高い計算に使用し、メッセージで通信し、ワーカーを再利用し、大きなバッファーを転送してアプリを高速かつスムーズに保ちましょう。
確認問題
ワーカーの用途と制限についての理解度を確認しましょう。
まとめ
ワーカーの用途と制限について学びました。
- CPU負荷の高い処理に適していますが、DOMにはアクセスできません。
- 多くのAPI（fetch、IndexedDB、crypto）を利用できます。
- メッセージは構造化複製されるため、関数やDOMノードは送信できません。
- 起動コストを分散するため、ワーカーまたはワーカープールを再利用します。
- エラーはワーカー内に隔離されます。
Web Workersの学習はこれで終了です。次はIndexedDBです。
よくある質問
「活用例と制限事項」レッスンは無料ですか？
はい。「活用例と制限事項」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「活用例と制限事項」で何を学びますか？
Worker が役立つ場面と、できないことを理解します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「活用例と制限事項」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。