for await...of

フォーアウェイトオブ（非同期処理）

意味非同期データを順に取得

for await...ofとは？

for await...of文は、非同期イテレータの要素を順次処理するための構文です。非同期ジェネレータや他の非同期イテレータから順次値を取り出して処理を行います。

for await...ofの具体的な使い方

for await...ofを使用した非同期データの処理

async function processData() {
  const asyncIterable = {
    [Symbol.asyncIterator]() {
      return {
        i: 0,
        async next() {
          if (this.i < 3) {
            // 非同期処理を模擬（実際はAPI呼び出しなど）
            await new Promise(resolve => setTimeout(resolve, 1000));
            return { value: this.i++, done: false };
          }
          return { done: true };
        }
      };
    }
  };

  console.log('データ処理開始');
  for await (const value of asyncIterable) {
    console.log(`処理中のデータ: ${value}`);
  }
  console.log('データ処理完了');
}

processData();

👇出力結果

データ処理開始
処理中のデータ: 0
処理中のデータ: 1
処理中のデータ: 2
データ処理完了

この例では、for await...of文を使用して非同期イテレータからデータを順次取得し処理します。各データの取得には1秒かかると仮定し、処理の進行状況をコンソールに出力します。

for await...ofに関するよくある質問

Q. for await...ofの使用場面は？

A. for await...ofは、非同期イテレータや非同期ジェネレータからの値を順次処理する場合に使用します。APIからのデータストリームの処理や、大量のデータを非同期に処理する際に便利です。

Q. 通常のforループとの違いは？

A. for await...ofは非同期イテレータを扱うために設計されており、各イテレーションが非同期に完了するのを待ちます。通常のforループは同期的に動作し、非同期データを直接扱うことはできません。

Q. エラーハンドリングはどうする？

A. for await...ofループ内でエラーが発生した場合、try-catch文を使用してエラーをキャッチできます。また、ループ全体を async 関数内に配置することで、関数レベルでのエラーハンドリングも可能です。

for await...ofが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのfor await...ofやコールバック、非同期、async、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。