0Pricing
JavaScript Academy · レッスン

非同期イテレーター — for await...ofとasyncジェネレーター

asyncジェネレーターとfor await...ofで時間をかけて到着する値を利用します。Symbol.asyncIteratorと簡単な非同期パイプラインを学びます。

「非同期イテレーター — for await...ofとasyncジェネレーター」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン3/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全3レッスンが含まれています。

非同期反復が必要な理由

目標: 後から到着する可能性のある値を消費します。

  • for await...of は非同期イテラブルを反復します
  • async function* は非同期ジェネレーターを作成します
  • Symbol.asyncIterator はオブジェクトを非同期イテラブルとして示します
  • 小さな非同期 map の例
非同期イテレーター — for await...ofとasyncジェネレーター — イラスト1

async function* と for await...of

非同期ジェネレーター（async function*）は値を yield し、for await...of がその値を消費します。

// Use an async generator to yield values (could be delayed in real apps)
(async function () {
  async function* countAsync(n) {
    for (let i = 1; i <= n; i = i + 1) {
      // In real code you could await a delay or I/O here
      yield i;
    }
  }

  for await (const x of countAsync(3)) {
    console.log("async value:", x);
  }
})();
非同期イテレーター — for await...ofとasyncジェネレーター — イラスト2

手動で非同期 next() を呼び出す

非同期イテレーターの next() は、{ value, done } に解決される promise を返します。

// Drive an async iterator manually with await it.next()
(async function () {
  async function* two() {
    yield "A";
    yield "B";
  }
  const it = two();
  console.log(await it.next()); // { value: "A", done: false }
  console.log(await it.next()); // { value: "B", done: false }
  console.log(await it.next()); // { value: undefined, done: true }
})();
非同期イテレーター — for await...ofとasyncジェネレーター — イラスト3

オブジェクトの Symbol.asyncIterator

[Symbol.asyncIterator]() を追加して非同期イテレーターを返すと、オブジェクトを for await...of で扱えるようになります。

// Mark a plain object as async-iterable via Symbol.asyncIterator
(async function () {
  const AsyncTwice = {
    from: function (a, b) {
      return {
        a: a, b: b,
        [Symbol.asyncIterator]: async function () {
          let step = 0;
          return {
            next: async function () {
              if (step === 0) { step = 1; return { value: a, done: false }; }
              if (step === 1) { step = 2; return { value: b, done: false }; }
              return { value: undefined, done: true };
            }
          };
        }
      };
    }
  };

  for await (const v of AsyncTwice.from("X", "Y")) {
    console.log("from object:", v);
  }
})();
非同期イテレーター — for await...ofとasyncジェネレーター — イラスト4

非同期 map パイプライン

非同期ジェネレーターを組み合わせて、各処理を await する小さなパイプラインを構築します。

// Async map: transform values lazily while awaiting work
(async function () {
  async function* countAsync(n) {
    for (let i = 1; i <= n; i = i + 1) {
      yield i;
    }
  }

  async function* asyncMap(iterable, fn) {
    for await (const v of iterable) {
      // fn can be async; await its result
      const out = await fn(v);
      yield out;
    }
  }

  const doubled = asyncMap(countAsync(4), async function (x) {
    // simulate async transform (no real delay for demo)
    return x * 2;
  });

  const collected = [];
  for await (const v of doubled) {
    collected.push(v);
  }
  console.log("doubled async:", collected);
})();
非同期イテレーター — for await...ofとasyncジェネレーター — イラスト5

よい習慣

ヒント:

  • for await...of には 非同期イテラブル（Symbol.asyncIterator）が必要です。
  • async function* を使うと、非同期ジェネレーターを簡単に定義できます。
  • 各 next() は await されます。応答性を保つため、処理は小さくしてください。
非同期イテレーター — for await...ofとasyncジェネレーター — イラスト6

非同期イテラブルの基本クイズ

簡単な確認: 非同期イテラブルに必要な条件です。

非同期イテレーター — for await...ofとasyncジェネレーター — イラスト7

まとめ

まとめ: async function* と yield を使って非同期ジェネレーターを作成します。for await...of でループするか、next() を手動で await します。ヘルパージェネレーターを使って小さな非同期パイプラインを構築します。

非同期イテレーター — for await...ofとasyncジェネレーター — イラスト8

よくある質問

「非同期イテレーター — for await...ofとasyncジェネレーター」レッスンは無料ですか？

はい。「非同期イテレーター — for await...ofとasyncジェネレーター」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全3レッスンが含まれています。

「非同期イテレーター — for await...ofとasyncジェネレーター」で何を学びますか？

asyncジェネレーターとfor await...ofで時間をかけて到着する値を利用します。Symbol.asyncIteratorと簡単な非同期パイプラインを学びます。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/3です。

「非同期イテレーター — for await...ofとasyncジェネレーター」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 反復可能プロトコルとfor...of
  2. ジェネレーター関数、yield、小さなパイプライン
  3. 非同期イテレーター — for await...ofとasyncジェネレーター
← JavaScript Academyに戻る