Web Worker による非同期関数の実行

はじめに

この実験では、Web Worker を使用して長時間実行される関数を非同期で実行する方法を学びます。この実験の目的は、開発者に関数を別のスレッドで実行する方法を教え、関数の実行中に UI をブロックしないようにすることです。この実験では、Web Worker を作成して関数を実行する方法の実際の例を示します。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/ToolsandEnvironmentGroup(["Tools and Environment"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/loops("Loops") javascript/BasicConceptsGroup -.-> javascript/obj_manip("Object Manipulation") javascript/AdvancedConceptsGroup -.-> javascript/async_prog("Asynchronous Programming") javascript/AdvancedConceptsGroup -.-> javascript/template_lit("Template Literals") javascript/ToolsandEnvironmentGroup -.-> javascript/debugging("Debugging") subgraph Lab Skills javascript/variables -.-> lab-28606{{"非同期で関数を実行する"}} javascript/data_types -.-> lab-28606{{"非同期で関数を実行する"}} javascript/arith_ops -.-> lab-28606{{"非同期で関数を実行する"}} javascript/comp_ops -.-> lab-28606{{"非同期で関数を実行する"}} javascript/loops -.-> lab-28606{{"非同期で関数を実行する"}} javascript/obj_manip -.-> lab-28606{{"非同期で関数を実行する"}} javascript/async_prog -.-> lab-28606{{"非同期で関数を実行する"}} javascript/template_lit -.-> lab-28606{{"非同期で関数を実行する"}} javascript/debugging -.-> lab-28606{{"非同期で関数を実行する"}} end

Web Worker を使った非同期関数の実行

UI をブロックすることなく関数を実行するには、Web Worker を使って関数を別のスレッドで実行します。方法は以下の通りです。

実行する関数の文字列化されたバージョンを内容とする Blob オブジェクト URL を使って Worker を作成します。
関数を呼び出した結果を即座に返します。
onmessage と onerror イベントを待ち、ワーカーから返されたデータを解決するか、エラーを投げる Promise を返します。

const runAsync = (fn) => {
  const worker = new Worker(
    URL.createObjectURL(new Blob([`postMessage((${fn})());`]), {
      type: "application/javascript; charset=utf-8"
    })
  );
  return new Promise((resolve, reject) => {
    worker.onmessage = ({ data }) => {
      resolve(data);
      worker.terminate();
    };
    worker.onerror = (error) => {
      reject(error);
      worker.terminate();
    };
  });
};

runAsync に渡される関数はクロージャを使用しないでください。なぜならすべてが文字列化されてリテラルになるからです。したがって、すべての変数と関数は内部で定義する必要があります。以下にいくつかの例を示します。

const longRunningFunction = () => {
  let result = 0;
  for (let i = 0; i < 1000; i++)
    for (let j = 0; j < 700; j++)
      for (let k = 0; k < 300; k++) result = result + i + j + k;

  return result;
};

runAsync(longRunningFunction).then(console.log); // 209685000000
runAsync(() => 10 ** 3).then(console.log); // 1000
let outsideVariable = 50;
runAsync(() => typeof outsideVariable).then(console.log); // 'undefined'

まとめ

おめでとうございます！あなたは非同期で関数を実行する実験を完了しました。あなたの技術を向上させるために、LabExでさらに多くの実験を練習することができます。