📑

Web Workersの学習メモ

2023/06/15に公開

JavaScript

テックギーク

webworkers

tech

Web Workersについて、MDN Web Docsを参考に学習した際のメモ書き。

Web Workersとは

Web Workersはブラウザの持つ仕組み（API）で、JavaScriptの処理を別スレッドで実行することができます。処理ごとに複数のスレッドを立てて非同期に実行できるため、重い処理実行するときなどに有効。

実装する機能

Web Workersの機能として、２つの数字を受け取って乗算した結果を返す機能を実装する。
アプリの構成としては、計４つのインプットフィールドがあり、フォームをサブミットしたら、１と２の入力内容の乗算、3と4の入力内容の乗算結果をそれぞれ返す。
worker1とworker2のWeb Workerを作成して同時に処理を実行する。

実装

index.html

<body>
  <div>Web Workers</div>
  <form id="myform">
    First number: <input type="number" id="first"><br>
    Second number: <input type="number" id="second"><br>
    Third number: <input type="number" id="third"><br>
    Fourth number: <input type="number" id="fourth"><br>
    <input type="submit" value="送信">
  </form>
  <span id="result"></span><br>
  <span id="result2"></span><br>
  <script src="main.js"></script>
</body>

main.js

document.addEventListener("DOMContentLoaded", () => {
  const form = document.getElementById("myform");
  const first = document.getElementById("first");
  const second = document.getElementById("second");
  const third = document.getElementById("third");
  const fourth = document.getElementById("fourth");
  const result = document.getElementById("result");
  const result2 = document.getElementById("result2");

  if (window.Worker) {
    const myWorker = new Worker("worker.js");
    const myWorker2 = new Worker("worker.js");

    form.onsubmit = (e) => {
      e.preventDefault();
      myWorker.postMessage([first.value, second.value]);
      myWorker2.postMessage([third.value, fourth.value]);
      console.log("Message posted to worker");
    };

    // もちろんイベントリスナーでもOK
    // form.addEventListener('submit', (e) => {
    //   e.preventDefault();
    //   myWorker.postMessage([first.value, second.value]);
    //   myWorker2.postMessage([third.value, fourth.value]);
    //   console.log('Message posted to worker');
    // });

    myWorker.onmessage = (e) => {
      console.log(e.data);
      result.textContent = e.data;
      console.log("Message received from worker");
    };

    myWorker2.onmessage = (e) => {
      console.log(e.data);
      result2.textContent = e.data;
      console.log("Message received from worker");
    };
  }
});

worker.js

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);
};

Web Workersとは

実装する機能

実装

Discussion