メモ:ワーカーのリファレンスドキュメントや追加のガイドについては、ウェブワーカー API のトップページをご覧ください。

if (window.Worker) {  // …}

const myWorker = new Worker("worker.js");

メモ:webpack、Vite、Parcel などのバンドラーでは、import.meta.url に対して相対的に解決される URL をWorker() コンストラクターに渡すことを推奨しています。例えば、次のようにします。

const myWorker = new Worker(new URL("worker.js", import.meta.url));

こうすることで、パスは現在の HTML ページではなく現在のスクリプトを基準とするため、バンドラーは、名前変更などの最適化を安全に行うことができます（そうしないと、worker.js の URL がバンドラーが管理していないファイルを指す可能性があり、バンドラーは仮定を立てることができなくなるためです）。

[first, second].forEach((input) => {  input.onchange = () => {    myWorker.postMessage([first.value, second.value]);    console.log("メッセージがワーカーに渡されました");  };});

onmessage = (e) => {  console.log("Message received from main script");  const workerResult = `Result: ${e.data[0] * e.data[1]}`;  console.log("Posting message back to main script");  postMessage(workerResult);};

myWorker.onmessage = (e) => {  result.textContent = e.data;  console.log("メッセージをワーカーから受信しました");};

メモ:メインのスクリプトスレッドでonmessage およびpostMessage() を使用するときはWorker オブジェクトにぶら下げなければなりませんが、ワーカー内ではそのようにする必要はありません。これは、ワーカー内ではそれ自身が実質的なグローバルスコープになるためです。

メモ:メッセージをメインスレッドとワーカーの間でやりとりするとき、共有されるのではなく、複製または「移譲」（移動）されます。詳しい解説は、ワーカーとのデータ転送の詳細をご覧ください。

myWorker.terminate();

importScripts(); /* 何もインポートしない */importScripts("foo.js"); /* "foo.js" をインポート */importScripts("foo.js", "bar.js"); /* 2 つのスクリプトをインポート */importScripts(  "//example.com/hello.js",); /* 他のオリジンのスクリプトをインポートすることができる */

メモ:スクリプトは順不同にダウンロードされることがありますが、実行はimportScripts() に渡したファイル名の順に行います。これは同期的に行われます。すべてのスクリプトの読み込みと実行が行われるまでimportScripts() から戻りません。

メモ:共有ワーカーが複数の閲覧コンテキストからアクセスできる場合、すべての閲覧コンテキストはまったく同じオリジン (プロトコル、ホスト、ポート番号が同じ) になります。

メモ:Firefox では、共有ワーカーはプライベートウィンドウとそれ以外に読み込まれた文書間で共有することができません (Firefox バグ 1177621)。

const myWorker = new SharedWorker("worker.js");

メモ:ポート接続を開始するためにstart() メソッドを使用するとき、双方向の通信が必要である場合は親スレッドとワーカーの両方で呼び出さなければなりません。

squareNumber.onchange = () => {  myWorker.port.postMessage([squareNumber.value, squareNumber.value]);  console.log("メッセージがワーカーに渡されました。");};

onconnect = (e) => {  const port = e.ports[0];  port.onmessage = (e) => {    const workerResult = `Result: ${e.data[0] * e.data[1]}`;    port.postMessage(workerResult);  };};

myWorker.port.onmessage = (e) => {  result2.textContent = e.data;  console.log("メッセージをワーカーから受信しました");};

Content-Security-Policy: script-src 'self'

function emulateMessage(vVal) {  return eval(`(${JSON.stringify(vVal)})`);}// テスト// テスト #1const example1 = new Number(3);console.log(typeof example1); // objectconsole.log(typeof emulateMessage(example1)); // number// テスト #2const example2 = true;console.log(typeof example2); // booleanconsole.log(typeof emulateMessage(example2)); // boolean// テスト #3const example3 = new String("Hello World");console.log(typeof example3); // objectconsole.log(typeof emulateMessage(example3)); // string// テスト #4const example4 = {  name: "Carina Anand",  age: 43,};console.log(typeof example4); // objectconsole.log(typeof emulateMessage(example4)); // object// テスト #5function Animal(type, age) {  this.type = type;  this.age = age;}const example5 = new Animal("Cat", 3);alert(example5.constructor); // Animalalert(emulateMessage(example5).constructor); // Object

const myWorker = new Worker("my_task.js");myWorker.onmessage = (event) => {  console.log(`Worker said : ${event.data}`);};myWorker.postMessage("ali");

postMessage("I'm working before postMessage('ali').");onmessage = (event) => {  postMessage(`Hi, ${event.data}`);};

function QueryableWorker(url, defaultListener, onError) {  const worker = new Worker(url);  const listeners = {};  this.defaultListener = defaultListener ?? (() => {});  if (onError) {    worker.onerror = onError;  }  this.postMessage = (message) => {    worker.postMessage(message);  };  this.terminate = () => {    worker.terminate();  };}

this.addListeners = (name, listener) => {  listeners[name] = listener;};this.removeListeners = (name) => {  delete listeners[name];};

// This functions takes at least one argument, the method name we want to query.// Then we can pass in the arguments that the method needs.this.sendQuery = (queryMethod, ...queryMethodArguments) => {  if (!queryMethod) {    throw new TypeError(      "QueryableWorker.sendQuery は 1 つ以上の引数が必要です",    );  }  worker.postMessage({    queryMethod,    queryMethodArguments,  });};

worker.onmessage = (event) => {  if (    event.data instanceof Object &&    Object.hasOwn(event.data, "queryMethodListener") &&    Object.hasOwn(event.data, "queryMethodArguments")  ) {    listeners[event.data.queryMethodListener].apply(      instance,      event.data.queryMethodArguments,    );  } else {    this.defaultListener.call(instance, event.data);  }};

const queryableFunctions = {  getDifference(a, b) {    reply("printStuff", a - b);  },  waitSomeTime() {    setTimeout(() => {      reply("doAlert", 3, "seconds");    }, 3000);  },};function reply(queryMethodListener, ...queryMethodArguments) {  if (!queryMethodListener) {    throw new TypeError("reply - takes at least one argument");  }  postMessage({    queryMethodListener,    queryMethodArguments,  });}// This method is called when main page calls QueryWorker's postMessage// method directlyfunction defaultReply(message) {  // do something}

onmessage = (event) => {  if (    event.data instanceof Object &&    Object.hasOwn(event.data, "queryMethod") &&    Object.hasOwn(event.data, "queryMethodArguments")  ) {    queryableFunctions[event.data.queryMethod].apply(      self,      event.data.queryMethodArguments,    );  } else {    defaultReply(event.data);  }};

<!doctype html><html lang="en-US">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width" />    <title>MDN Example - Queryable worker</title>    <script>      // QueryableWorker instances methods:      //   * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc.): calls a Worker's queryable function      //   * postMessage(string or JSON Data): see Worker.prototype.postMessage()      //   * terminate(): terminates the Worker      //   * addListener(name, function): adds a listener      //   * removeListener(name): removes a listener      // QueryableWorker instances properties:      //   * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly      function QueryableWorker(url, defaultListener, onError) {        const instance = this;        const worker = new Worker(url);        const listeners = {};        this.defaultListener = defaultListener ?? (() => {});        if (onError) {          worker.onerror = onError;        }        this.postMessage = (message) => {          worker.postMessage(message);        };        this.terminate = () => {          worker.terminate();        };        this.addListener = (name, listener) => {          listeners[name] = listener;        };        this.removeListener = (name) => {          delete listeners[name];        };        // This functions takes at least one argument, the method name we want to query.        // Then we can pass in the arguments that the method needs.        this.sendQuery = (queryMethod, ...queryMethodArguments) => {          if (!queryMethod) {            throw new TypeError(              "QueryableWorker.sendQuery takes at least one argument",            );          }          worker.postMessage({            queryMethod,            queryMethodArguments,          });        };        worker.onmessage = (event) => {          if (            event.data instanceof Object &&            Object.hasOwn(event.data, "queryMethodListener") &&            Object.hasOwn(event.data, "queryMethodArguments")          ) {            listeners[event.data.queryMethodListener].apply(              instance,              event.data.queryMethodArguments,            );          } else {            this.defaultListener.call(instance, event.data);          }        };      }      // 独自の「照会可能な」ワーカー      const myTask = new QueryableWorker("my_task.js");      // 独自の「リスナー」      myTask.addListener("printStuff", (result) => {        document          .getElementById("firstLink")          .parentNode.appendChild(            document.createTextNode(`The difference is ${result}!`),          );      });      myTask.addListener("doAlert", (time, unit) => {        alert(`Worker waited for ${time} ${unit} :-)`);      });    </script>  </head>  <body>    <ul>      <li>        <a                   href="#"          >What is the difference between 5 and 3?</a        >      </li>      <li>        <a href="#"          >Wait 3 seconds</a        >      </li>      <li>        <a href="#">terminate() the Worker</a>      </li>    </ul>  </body></html>

const queryableFunctions = {  // 例 #1: 2 つの値の差を得る  getDifference(minuend, subtrahend) {    reply("printStuff", minuend - subtrahend);  },  // 例 #2: 3 秒待つ  waitSomeTime() {    setTimeout(() => {      reply("doAlert", 3, "seconds");    }, 3000);  },};// システム関数function defaultReply(message) {  // メインページが queryableWorker.postMessage() メソッドを直接呼び出したときに限り実行される、デフォルトの PUBLIC 関数  // 何らかの処理}function reply(queryMethodListener, ...queryMethodArguments) {  if (!queryMethodListener) {    throw new TypeError("reply - not enough arguments");  }  postMessage({    queryMethodListener,    queryMethodArguments,  });}onmessage = (event) => {  if (    event.data instanceof Object &&    Object.hasOwn(event.data, "queryMethod") &&    Object.hasOwn(event.data, "queryMethodArguments")  ) {    queryableFunctions[event.data.queryMethod].apply(      self,      event.data.queryMethodArguments,    );  } else {    defaultReply(event.data);  }};

// 32MB の「ファイル」を作成し、 0 から 255 までの連続した値で埋めます。 – 32MB = 1024 * 1024 * 32const uInt8Array = new Uint8Array(1024 * 1024 * 32).map((v, i) => i);worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);

<!doctype html><html lang="en-US">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width" />    <title>MDN Example - Embedded worker</title>    <script type="text/js-worker">      // MIME タイプが text/js-worker であるため、このスクリプトは JS エンジンに解釈されません。      const myVar = 'Hello World!';      // ワーカーの残りのコードをここに置きます。    </script>    <script>      // MIME タイプが text/javascript であるため、このスクリプトは JS エンジンに解釈されます。      function pageLog(sMsg) {        // フラグメントを使用します。ブラウザーのレンダリングや再フローを 1 回だけにします。        const frag = document.createDocumentFragment();        frag.appendChild(document.createTextNode(sMsg));        frag.appendChild(document.createElement("br"));        document.querySelector("#logDisplay").appendChild(frag);      }    </script>    <script type="text/js-worker">      // MIME タイプが text/js-worker であるため、このスクリプトは JS エンジンに解釈されません。      onmessage = (event) => {        postMessage(myVar);      };      // ワーカーの残りのコードをここに置きます。    </script>    <script>      // MIME タイプが text/javascript であるため、このスクリプトは JS エンジンに解釈されます。      // 以前は blob を構築していましたが、現在は Blob を使用します。      const blob = new Blob(        Array.prototype.map.call(          document.querySelectorAll("script[type='text/js-worker']"),          (script) => script.textContent,        ),        { type: "text/javascript" },      );      // すべての "text/js-worker" スクリプトを含む、新たな document.worker プロパティを生成します。      document.worker = new Worker(window.URL.createObjectURL(blob));      document.worker.onmessage = (event) => {        pageLog(`Received: ${event.data}`);      };      // ワーカーを起動します。      window.onload = () => {        document.worker.postMessage("");      };    </script>  </head>  <body>    <div></div>  </body></html>

function fn2workerURL(fn) {  const blob = new Blob([`(${fn.toString()})()`], { type: "text/javascript" });  return URL.createObjectURL(blob);}

self.onmessage = (event) => {  const userNum = Number(event.data);  self.postMessage(fibonacci(userNum));};function fibonacci(num) {  let a = 1;  let b = 0;  while (num > 0) {    [a, b] = [a + b, a];    num--;  }  return b;}

<!doctype html><html lang="en-US">  <head>    <meta charset="UTF-8" />    <title>Fibonacci number generator</title>    <style>      body {        width: 500px;      }      div,      p {        margin-bottom: 20px;      }    </style>  </head>  <body>    <form>      <div>        <label for="number"          >Enter a number that is a zero-based index position in the fibonacci          sequence to see what number is in that position. For example, enter 6          and you'll get a result of 8 — the fibonacci number at index position          6 is 8.</label        >        <input type="number" />      </div>      <div>        <input type="submit" />      </div>    </form>    <p></p>    <script>      const form = document.querySelector("form");      const input = document.querySelector('input[type="number"]');      const result = document.querySelector("p#result");      const worker = new Worker("fibonacci.js");      worker.onmessage = (event) => {        result.textContent = event.data;        console.log(`Got: ${event.data}`);      };      worker.onerror = (error) => {        console.log(`Worker error: ${error.message}`);        throw error;      };      form.onsubmit = (e) => {        e.preventDefault();        worker.postMessage(input.value);        input.value = "";      };    </script>  </body></html>

メモ:あるメソッドがワーカーで利用できるかどうかは、サイトhttps://worker-playground.glitch.me/ を使ってテストできます。例えば、Firefox 84 でサイトにEventSource と入力すると、サービスワーカーではサポートされていないが、専用ワーカーや共有ワーカーではサポートされていることがわかります。

メモ:ワーカーで使用できる関数の完全なリストは、ワーカーで使用できる関数とインターフェイスでご覧ください。

Help improve MDN

This page was last modified on⁨2025年7月22日⁩ byMDN contributors.