JavaScriptのforEach & awaitをマスター!実用的な7つの応用例

JavaScriptのforEachとawaitを使った非同期処理のサンプルコードJS
この記事は約8分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

本記事を読めば、JavaScriptのforEachとawaitを使った非同期処理ができるようになります。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

JavaScriptで非同期処理を行う際、forEachとawaitの組み合わせが非常に便利です。

この記事では、forEachとawaitの基本概念から、実用的な応用例とサンプルコードを7つ紹介します。

●JavaScriptの非同期処理とは

JavaScriptでは、時間がかかる処理を待たずに次の処理を行う非同期処理が一般的です。

非同期処理にはPromiseやasync/awaitなどの機能があります。

○forEachとawaitの基本概念

forEachは、配列の要素を順番に処理するためのメソッドです。

awaitは、Promiseが解決されるまで処理を待機させるためのキーワードです。

これを使って、非同期処理を効果的に制御することができます。

●forEachとawaitの使い方

○サンプルコード1:基本的な非同期処理

const asyncFunc = async (value) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(value);
      resolve();
    }, 1000);
  });
};

const main = async () => {
  const array = [1, 2, 3, 4, 5];

  for (const value of array) {
    await asyncFunc(value);
  }
};

main();

このサンプルコードでは、asyncFunc関数が1秒後に引数の値を出力する非同期処理を行います。

main関数内で、arrayの要素を順番に処理しています。

awaitを使って、asyncFuncの処理が終わるまで待機しています。

●forEachとawaitの応用例

○サンプルコード2:APIリクエストの連続実行

const fetch = require('node-fetch');

const fetchData = async (url) => {
  const response = await fetch(url);
  const data = await response.json();
  console.log(data);
};

const main = async () => {
  const urls = ['https://api.example.com/data1', 'https://api.example.com/data2', 'https://api.example.com/data3'];

  for (const url of urls) {
    await fetchData(url);
  }
};

main();

このサンプルコードでは、fetchData関数がAPIリクエストを非同期で行い、取得したデータを出力します。

main関数内で、urlsの要素を順番に処理し、APIリクエストを連続して実行しています。

○サンプルコード3:並列実行制御

const asyncFunc = async (value) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(value);
      resolve();
    }, 1000);
  });
};

const main = async () => {
  const array = [1, 2, 3, 4, 5];

  const promises = array.map(asyncFunc);
  await Promise.all(promises);
};

main();

このサンプルコードでは、array.mapを使って、非同期処理を並列実行しています。

Promise.allを使って、すべての非同期処理が終わるまで待機します。

○サンプルコード4:エラーハンドリング

const asyncFunc = async (value) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (value === 3) {
        reject(new Error('Error occurred'));
      } else {
        console.log(value);
        resolve();
      }
    }, 1000);
  });
};

const main = async () => {
  const array = [1, 2, 3, 4, 5];

  for (const value of array) {
    try {
      await asyncFunc(value);
    } catch (error) {
      console.error(error);
    }
  }
};

main();

このサンプルコードでは、asyncFunc関数がエラーをスローする場合があります。

main関数内で、try-catch文を使ってエラーハンドリングを行っています。

○サンプルコード5:再試行処理

const asyncFunc = async (value) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() < 0.3) {
        reject(new Error('Error occurred'));
      } else {
        console.log(value);
        resolve();
      }
    }, 1000);
  });
};

const retryAsyncFunc = async (value, retries) => {
  for (let i = 0; i < retries; i++) {
    try {
      await asyncFunc(value);
      return;
    } catch (error) {
      console.log(`Retry ${i + 1}...`);
    }
  }
};

const main = async () => {
  const array = [1, 2, 3, 4, 5];

  for (const value of array) {
    await retryAsyncFunc(value, 3);
  }
};

main();

このサンプルコードでは、asyncFunc関数がランダムにエラーをスローします。

retryAsyncFunc関数を使って、指定回数だけ再試行を行います。

○サンプルコード6:進捗表示

const asyncFunc = async (value) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(value);
      resolve();
    }, 1000);
  });
};

const main = async () => {
  const array = [1, 2, 3, 4, 5];

  for (const [index, value] of array.entries()) {
    console.log(`Processing ${index + 1}/${array.length}...`);
    await asyncFunc(value);
  }
};

main();

このサンプルコードでは、array.entries()を使って、現在のインデックスを取得し、進捗を表示しています。

○サンプルコード7:結果の整形

const asyncFunc = async (value) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(value * 2);
    }, 1000);
  });
};

const main = async () => {
  const array = [1, 2, 3, 4, 5];
  const results = [];

  for (const value of array) {
    const result = await asyncFunc(value);
    results.push(result);
  }

  console.log(results);
};

main();

このサンプルコードでは、asyncFunc関数が引数の値を2倍した結果を返します。

main関数内で、非同期処理の結果をresults配列に格納し、最後に結果を出力しています。

まとめ

以上のサンプルコードを参考に、JavaScriptのforEachとawaitを組み合わせた非同期処理の実装方法を理解していただければと思います。

注意点やカスタマイズ方法も考慮して、効果的に非同期処理を活用してください。