Web Worker を作成する
処理用のバックグラウンドスレッドを起動します。
「Web Worker を作成する」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
Web Workers を使う理由
JavaScript は単一のメインスレッドで実行されます。時間のかかる計算を行うとすべてが停止し、UI が固まり、クリックにも反応しなくなります。Web Workers はバックグラウンドスレッドでスクリプトを実行するため、ページの応答性を保てます。
Worker の作成
Worker コンストラクターにスクリプト URL を渡すと、Worker を起動できます。ブラウザがそのファイルを読み込み、別のスレッドで実行します。
const worker = new Worker('worker.js');
// The code in worker.js now runs on its own thread.Worker スクリプト
Worker ファイルは通常の JavaScript ですが、独自のグローバルスコープで実行されます（window も document もありません）。通信にはメッセージだけを使用します。
// worker.js
console.log('worker started');
// This runs off the main thread.2つの独立したグローバル
メインページと Worker は、それぞれ独自のグローバルスコープとメモリを持ちます。変数を直接共有することはできず、メッセージを介してデータのコピーを交換します。
- メインスレッド：
window、DOM、UI - Worker スレッド：
self、計算処理、DOM なし
Worker 内の self
Worker 内では、グローバルオブジェクトは self（DedicatedWorkerGlobalScope）です。これにハンドラーを登録したり、API を呼び出したりできますが、通常は self を暗黙的に扱えます。
// worker.js
self.addEventListener('message', (e) => {
console.log('worker got:', e.data);
});モジュール Worker
type: 'module' オプションを渡すと、ES モジュールの import を使う Worker を作成できます。これにより、Worker から他のモジュールを簡単にインポートできます。
const worker = new Worker('worker.js', { type: 'module' });
// Inside worker.js you can now use import statements.スクリプトのインポート（クラシック）
クラシック（非モジュール）Worker では、importScripts を使って追加のスクリプトを Worker のスコープに同期的に読み込みます。
// Inside a classic worker:
importScripts('math-utils.js', 'helpers.js');
// Their globals are now available in the worker.Worker の終了
メインスレッドからは worker.terminate() を使い、Worker 内からは self.close() を使って Worker を停止します。これによりスレッドとメモリが解放されます。
// From the main thread:
worker.terminate();
// From inside the worker:
// self.close();Worker エラーの処理
Worker で error イベントを監視すると、内部で発生したキャッチされていない例外を捕捉できます。イベントにはメッセージ、ファイル名、行番号が含まれます。
worker.addEventListener('error', (e) => {
console.log('worker error:', e.message, 'at line', e.lineno);
});同一オリジン要件
Worker スクリプトは、ページと同じオリジンから配信する必要があります（または Blob URL を使用します）。任意のクロスオリジン URL から Worker を直接読み込むことはできません。
// Same-origin file path - works:
const w1 = new Worker('/js/worker.js');
// You can also build one from a Blob URL when needed.Dedicated と Shared の違い
Worker は Dedicated であり、作成したページ専用です。SharedWorker は同じオリジンにある複数のページから利用できます。このコースでは Dedicated Worker を扱います。
確認問題
Web Workers の作成についての理解度を確認します。
まとめ
Web Workers の作成方法を学びました。
new Worker('worker.js')でバックグラウンドスレッドを起動します。- Worker は独自のグローバル（
self）を持ち、DOM は利用できません。 - インポートには
type: 'module'を使い、クラシック Worker ではimportScriptsを使います。 terminate()/self.close()で停止します。- Worker は同一オリジンである必要があります。
次は、スレッド間のメッセージ通信です。
よくある質問
「Web Worker を作成する」レッスンは無料ですか？
はい。「Web Worker を作成する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「Web Worker を作成する」で何を学びますか？
処理用のバックグラウンドスレッドを起動します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「Web Worker を作成する」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Web Worker を作成する
- postMessage でメッセージを送る
- Transferable オブジェクト
- 活用例と制限事項