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

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

はじめに

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を組み合わせた非同期処理の実装方法を理解していただければと思います。

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