JavaScriptで並列処理をマスター！10個のサンプルコードでプロが解説

はじめに
●JavaScriptの並列処理とは
- ○Web Workers
- ○Promise
●JavaScriptでの並列処理の効果的な活用方法
●JavaScriptの並列処理を活用した実践例
●注意点と対処法
まとめ

はじめに

この記事を読めば、JavaScriptの並列処理をマスターし、効率的なプログラムを書くことができるようになります。

JavaScriptの並列処理を使って、処理を高速化し、パフォーマンスを向上させる方法を、10個のサンプルコードを使って解説します。

●JavaScriptの並列処理とは

JavaScriptの並列処理とは、複数の処理を同時に実行することで、処理時間を短縮し、効率的なプログラムを実現する方法です。

主にWeb WorkersとPromiseを使って並列処理が実現されます。

○Web Workers

Web Workersは、JavaScriptのメインスレッドとは別のスレッドでバックグラウンドで処理を実行する機能です。

これにより、重たい処理がメインスレッドに影響を与えず、UIの更新やイベント処理が滞らないようになります。

○Promise

Promiseは、非同期処理の結果を表現するオブジェクトで、処理が完了するまでの間に他の処理を実行することができます。

Promiseを使うことで、非同期処理の扱いが容易になり、コードが読みやすくなります。

●JavaScriptでの並列処理の効果的な活用方法

JavaScriptを使用して並列処理を実行する方法にはいくつかのアプローチがあります。

ここでは、それらの中でも特に実用的な技術をサンプルコードを交えて詳しく解説します。

○サンプルコード1：Web Workersを用いたバックグラウンド処理

Web Workersを用いた並列処理の基本は、バックグラウンドでの処理実行です。

この方法では、メインスレッドの動作を妨げずに重い処理を行うことができます。

別のファイル（例えば、worker.js）にバックグラウンドで行いたい処理を記述します。

// worker.js
self.addEventListener('message', (event) => {
  const data = event.data;
  const result = data * 2; // 任意の処理を実行
  self.postMessage(result);
});

そして、HTMLファイルでWeb Workerを生成し、実際に処理を開始します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Web Workersの応用</title>
</head>
<body>
  <script>
    // Web Workerの生成
    const worker = new Worker('worker.js');

    // 結果の受信
    worker.addEventListener('message', (event) => {
      console.log('Result:', event.data);
    });

    // 処理の開始
    worker.postMessage(10);
  </script>
</body>
</html>

このコードでは、Web Workerにより、重い処理がバックグラウンドで行われ、メインスレッドは非ブロッキングであることが特徴です。

○サンプルコード2：非同期処理を扱うPromiseの基礎

JavaScriptにおける非同期処理の基本は、Promiseを使用することです。

このテクニックにより、非同期処理の管理が容易になります。

function asyncFunction(value) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (typeof value === 'number') {
        resolve(value * 2); // 成功時
      } else {
        reject(new Error('数値ではありません')); // エラー時
      }
    }, 1000);
  });
}

asyncFunction(10)
  .then((result) => {
    console.log('Result:', result); // 成功時の結果
  })
  .catch((error) => {
    console.error('Error:', error); // エラー時の処理
  });

このサンプルでは、asyncFunctionがPromiseを返し、それを.thenや.catchメソッドで処理しています。

この方法により、非同期処理の結果を効果的に扱うことができます。

○サンプルコード3：Promise.all()による複数処理の同時実行

複数の非同期処理を同時に実行し、全て完了した時点で結果を得る方法として、Promise.all()があります。

const promise1 = asyncFunction(10);
const promise2 = asyncFunction(20);
const promise3 = asyncFunction(30);

Promise.all([promise1, promise2, promise3])
  .then((results) => {
    console.log('Results:', results); // 各Promiseの結果
  })
  .catch((error) => {
    console.error('Error:', error);
  });

この方法を使うと、複数の非同期処理を並行して実行し、全ての処理が終わるのを待ってから結果を取得することができます。

○サンプルコード4：Promise.race()で最速の処理結果を得る

複数の非同期処理の中で最も早く終わった結果だけを取得するには、Promise.race()が有効です。

const promise1 = asyncFunction(10);
const promise2 = asyncFunction(20);
const promise3 = asyncFunction(30);

Promise.race([promise1, promise2, promise3])
  .then((result) => {
    console.log('Result:', result); // 最も早く処理が完了した結果
  })
  .catch((error) => {
    console.error('Error:', error);
  });

この方法を利用することで、複数の非同期処理のうち最も早く完了するものだけの結果を取得することが可能になります。

●JavaScriptの並列処理を活用した実践例

JavaScriptでの並列処理は様々な場面で役立ちます。

ここでは、その応用方法をいくつかの実例を通じて紹介します。

○サンプルコード5：Web Workersによる画像処理の効率化

Web Workersを活用して、画像の処理を効率的に行う方法を見てみましょう。

この方法では、バックグラウンドでの画像処理により、UIの応答性を保ちながら処理を行うことが可能です。

↓↓↓HTMLファイル

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Web Workersを利用した画像処理の高速化</title>
</head>
<body>
  <input type="file" id="inputImage">
  <canvas id="outputCanvas"></canvas>
  <script src="main.js"></script>
</body>
</html>

↓↓↓main.jsファイル

const inputImage = document.getElementById('inputImage');
const outputCanvas = document.getElementById('outputCanvas');
const ctx = outputCanvas.getContext('2d');

inputImage.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const image = new Image();
  image.src = URL.createObjectURL(file);

  image.onload = () => {
    outputCanvas.width = image.width;
    outputCanvas.height = image.height;
    ctx.drawImage(image, 0, 0, image.width, image.height);

    const worker = new Worker('imageWorker.js');

    worker.addEventListener('message', (event) => {
      const imageData = event.data;
      ctx.putImageData(imageData, 0, 0);
      worker.terminate();
    });

    const imageData = ctx.getImageData(0, 0, image.width, image.height);
    worker.postMessage(imageData);
  };
});

↓↓↓imageWorker.jsファイル

self.addEventListener('message', (event) => {
  const imageData = event.data;

  for (let i = 0; i < imageData.data.length; i += 4) {
    const gray = 0.299 * imageData.data[i] + 0.587 * imageData.data[i + 1] + 0.114 * imageData.data[i + 2];
    imageData.data[i] = imageData.data[i + 1] = imageData.data[i + 2] = gray;
  }

  self.postMessage(imageData);
});

この例では、選択した画像のグレースケール変換をWeb Workerを使って非同期に行うことで、処理速度を向上させています。

○サンプルコード6：Promiseを活用した非同期APIリクエスト

外部APIとの非同期通信には、Promiseを使った方法が有効です。

この方法により、非同期処理のコードを読みやすく、管理しやすくすることができます。

function fetchData(url) {
  return fetch(url)
    .then((response) => {
      return response.json();
    })
    .catch((error) => {
      console.error("エラー発生：", error);
    });
}

const apiUrl = "https://api.example.com/data";

fetchData(apiUrl).then((data) => {
  console.log(data);
});

このコードでは、非同期でAPIリクエストを行い、結果を受け取るプロセスがPromiseによって簡潔に記述されています。

この方法により、非同期処理のフローを明確にすることができます。

○サンプルコード7：async/awaitによる非同期処理のシンプル化

JavaScriptの非同期処理をよりシンプルに記述する方法として、async/awaitを用います。

これにより、上述した非同期API通信のコードを更に簡潔にすることができます。

async function fetchData(url) {
  try {
    const response = await fetch(url);
    return response.json();
  } catch (error) {
    console.error("エラー発生：", error);
  }
}

const apiUrl = "https://api.example.com/data";

fetchData(apiUrl).then((data) => {
  console.log(data);
});

この例では、async/awaitを使うことで、非同期処理を同期処理のように直感的に記述しています。

これにより、コードの可読性と保守性が向上します。

○サンプルコード8：Promiseチェインによる複数非同期処理の効率的な管理

複数の非同期処理を連鎖的に行う場合、Promiseチェインが非常に有効です。

この方法を用いることで、処理の流れを明確かつ効率的に管理することが可能です。

function asyncTask1() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("タスク1完了");
      resolve("タスク1の結果");
    }, 1000);
  });
}

function asyncTask2(resultFromTask1) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("タスク2完了");
      resolve(resultFromTask1 + "、タスク2の結果");
    }, 1000);
  });
}

asyncTask1()
  .then((result1) => {
    return asyncTask2(result1);
  })
  .then((result2) => {
    console.log("最終結果：", result2);
  });

このサンプルでは、一連の非同期処理をPromiseチェインで結びつけ、タスクが完了するごとに次のタスクを実行しています。

この手法は、複数の非同期処理が依存関係にある場合に特に有効です。

○サンプルコード9：Promiseによるエラーハンドリングの実装

JavaScriptにおけるPromiseは、エラー処理にも優れています。

ここでは、エラーが発生する可能性のある処理をPromiseでどのように扱うかを紹介します。

function mightFail() {
  return new Promise((resolve, reject) => {
    const success = Math.random() > 0.5;

    setTimeout(() => {
      if (success) {
        resolve("成功");
      } else {
        reject(new Error("エラー発生"));
      }
    }, 1000);
  });
}

mightFail()
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error("失敗：", error.message);
  });

このサンプルでは、成功と失敗がランダムに発生する処理をPromiseで管理しており、成功時とエラー時の処理が明確に区別されています。

○サンプルコード10：Web WorkersとPromiseを利用した並行処理の実装

JavaScriptでの並行処理を効率化するために、Web WorkersとPromiseを組み合わせる方法を見てみましょう。

// main.js
function runWorker() {
  return new Promise((resolve, reject) => {
    const worker = new Worker("worker.js");

    worker.onmessage = (event) => {
      resolve(event.data);
    };

    worker.onerror = (error) => {
      reject(error);
    };

    worker.postMessage("処理開始");
  });
}

runWorker()
  .then((result) => {
    console.log("結果：", result);
  })
  .catch((error) => {
    console.error("エラー：", error.message);
  });

// worker.js
self.onmessage = (event) => {
  const result = performSomeHeavyTask();
  self.postMessage(result);
};

この例では、Web Workersを使ってバックグラウンドで重い処理を行い、Promiseを通じて処理結果またはエラーをメインスレッドに返しています。

この組み合わせにより、並行処理の効率化とエラーハンドリングの両方を実現できます。

●注意点と対処法

Promiseやasync/await、Web Workersを使用する際の注意点や対処法について説明します。

○エラー処理の重要性

非同期処理では、エラーが発生しやすいため、エラー処理を適切に行うことが重要です。

Promiseであれば、.catch()を使ってエラーをハンドルしましょう。async/awaitの場合は、tryとcatchを使ってエラーを捉えることができます。

○過剰な並列処理の回避

並列処理を行いすぎると、リソースが逼迫し、パフォーマンスが低下することがあります。

適切な並列処理の数を把握し、必要に応じて制限をかけることが重要です。

○Web Workersの制限

Web Workersは、分離されたスレッドで実行されるため、DOM操作やwindowオブジェクトの利用ができません。

そのため、Web Workersで実行する処理は、UIに関与しない重い処理に限定して利用しましょう。

○Promiseチェインの適切な管理

Promiseチェインが長くなりすぎると、コードが複雑になりがちです。

適切な関数分割やasync/awaitを使ってコードをシンプルに保ちましょう。

まとめ

JavaScriptにおける非同期処理と並列処理は、パフォーマンス向上やユーザー体験の改善に役立ちます。

本記事では、Promiseやasync/await、Web Workersを使ったサンプルコードを紹介し、それぞれのカスタマイズ方法や注意点について説明しました。

これらの知識を活用して、効率的なアプリケーション開発を行いましょう。