JavaScriptの非同期イテレーションを制御するためのfor await…of

作成日 2024.12.24
javascript その他
javascript

非同期処理を簡潔に記述するための新しい方法として、`for await…of`ループがJavaScriptに導入されました。この構文を使用することで、非同期データを順番に取得し、処理することが容易になります。本記事では、`for await…of`を使用した非同期イテレーションの基本から応用までを詳しく解説します。

1. 非同期イテレーションとは？
2. 基本的な構文
3. 非同期ジェネレーターとの組み合わせ
4. 非同期イテレーションを利用したAPIリクエストの処理
5. 非同期イテレーションでのエラーハンドリング
6. `for await…of`と`Promise.all`の使い分け
7. 非同期イテレーションの利点
8. 非同期イテレーションでのパフォーマンス
9. 非同期ジェネレーターの活用方法
10. 非同期イテレーションの注意点
11. まとめ

非同期イテレーションとは？

非同期イテレーションとは、非同期処理を繰り返し実行し、その結果を順次取得していくことを意味します。`for await…of`は、非同期のイテラブル（`async`ジェネレーターや`AsyncIterable`）を反復処理するための構文です。

基本的な構文

`for await…of`の基本構文は、非同期の反復可能オブジェクト（例えば、`AsyncIterable`）に対して使用されます。`await`は`for`ループ内で非同期操作を待機し、その結果を反復処理します。

async function fetchData() {
  const data = [1, 2, 3, 4, 5];
  for await (let value of data) {
    console.log(value); // 各値を順に表示
  }
}
fetchData();

非同期ジェネレーターとの組み合わせ

非同期ジェネレーターは、`async function*`を使って非同期にデータを生成する関数です。`for await…of`と組み合わせることで、非同期の反復処理が可能になります。

async function* generateData() {
  yield 1;
  yield 2;
  yield 3;
}

async function processData() {
  for await (let value of generateData()) {
    console.log(value); // 1, 2, 3が順に表示される
  }
}
processData();

非同期イテレーションを利用したAPIリクエストの処理

非同期APIリクエストを順番に処理する際にも、`for await…of`を活用できます。例えば、複数のAPIエンドポイントから非同期にデータを取得する場合に、非常に役立ちます。

async function* fetchAPIData() {
  const urls = ["https://api.example.com/endpoint1", "https://api.example.com/endpoint2"];
  for (let url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    yield data;
  }
}

async function processAPIData() {
  for await (let data of fetchAPIData()) {
    console.log(data); // 各APIから取得したデータを順に表示
  }
}
processAPIData();

非同期イテレーションでのエラーハンドリング

非同期イテレーションでは、`try…catch`を使ってエラーハンドリングを行うことができます。非同期操作の中でエラーが発生した場合でも、エラー処理を行いながらデータを取得できます。

async function* fetchDataWithErrorHandling() {
  const urls = ["https://api.example.com/valid", "https://api.example.com/invalid"];
  for (let url of urls) {
    try {
      const response = await fetch(url);
      const data = await response.json();
      yield data;
    } catch (error) {
      console.error(`Error fetching data from ${url}:`, error);
    }
  }
}

async function processDataWithErrorHandling() {
  for await (let data of fetchDataWithErrorHandling()) {
    console.log(data); // 有効なデータを順に表示
  }
}
processDataWithErrorHandling();

`for await…of`と`Promise.all`の使い分け

複数の非同期処理を並行して処理する場合、`Promise.all`を使用することもできますが、`for await…of`を使用すると順番に処理される点が異なります。どちらを使うかは状況に応じて使い分ける必要があります。

async function parallelFetch() {
  const urls = ["https://api.example.com/endpoint1", "https://api.example.com/endpoint2"];
  const promises = urls.map(url => fetch(url).then(res => res.json()));
  const results = await Promise.all(promises);
  console.log(results); // 並行して全てのデータを表示
}

async function sequentialFetch() {
  const urls = ["https://api.example.com/endpoint1", "https://api.example.com/endpoint2"];
  for await (let url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data); // 順番にデータを表示
  }
}