0Pricing
JavaScript Academy · レッスン

ジェネレーター関数、yield、小さなパイプライン

function*でジェネレーター関数を書き、yieldで値を遅延生成します。for...ofやnext()で動かし、小さなパイプラインを組み合わせます。

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

ジェネレーターを使う理由

目標：ジェネレーターで値を遅延生成します。

  • function*でジェネレーターを定義します
  • yieldで値を1つずつ生成します
  • 取り出すにはfor...ofまたはnext()を使います
  • 小さなパイプライン（mapのような処理）を組み合わせます
ジェネレーター関数、yield、小さなパイプライン — イラスト1

function* と yield

ジェネレーターは function* と yield を使用します。反復処理は最後の yield から再開されます。

// A basic generator that yields 1..n lazily
function* countTo(n) {
  for (let i = 1; i <= n; i = i + 1) {
    yield i; // pause here and give i to the caller
  }
}

for (const x of countTo(3)) {
  console.log("value:", x);
}
ジェネレーター関数、yield、小さなパイプライン — イラスト2

手動で next() を呼び出す

next() は yield を順に進め、完了すると最終的に done: true を返します。

// You can also drive a generator manually with next()
const it = countTo(2);

console.log(it.next()); // { value: 1, done: false }
console.log(it.next()); // { value: 2, done: false }
console.log(it.next()); // { value: undefined, done: true }
ジェネレーター関数、yield、小さなパイプライン — イラスト3

偶数を遅延評価で処理する

ジェネレーターは、大きな配列をあらかじめ作成せずに、偶数のような単純な ストリーム を扱うのに適しています。

// Yield even numbers up to n (inclusive)
function* evensUpTo(n) {
  for (let i = 0; i <= n; i = i + 1) {
    if (i % 2 === 0) {
      yield i;
    }
  }
}

console.log("evens 0..6:", [...evensUpTo(6)]);
ジェネレーター関数、yield、小さなパイプライン — イラスト4

遅延 map パイプライン

小さな処理を組み合わせます。1つのジェネレーターを別のジェネレーターに渡して、遅延パイプラインを構築します。

// map() as a generator: transform values lazily
function* map(iterable, fn) {
  for (const v of iterable) {
    yield fn(v);
  }
}

const doubled = map(countTo(4), function (x) { return x * 2; });
console.log("doubled:", [...doubled]);
ジェネレーター関数、yield、小さなパイプライン — イラスト5

よい習慣

ヒント:

  • ジェネレーター関数を呼び出すと イテレーターを取得できます（最初にすべて実行されるわけではありません）。
  • yield は一時停止し、return はシーケンスを終了します。
  • 完了すると、ジェネレーターは使い果たされた状態になります。新しいイテレーターが必要な場合は、もう一度関数を呼び出してください。
ジェネレーター関数、yield、小さなパイプライン — イラスト6

ジェネレーターの戻り値クイズ

簡単な確認: ジェネレーター関数は何を返しますか？

ジェネレーター関数、yield、小さなパイプライン — イラスト7

まとめ

まとめ: function* を定義し、値を遅延的に yield し、for...of または next() で消費し、小さなジェネレーターパイプラインを組み合わせて単純な変換を行います。

ジェネレーター関数、yield、小さなパイプライン — イラスト8

よくある質問

「ジェネレーター関数、yield、小さなパイプライン」レッスンは無料ですか？

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

「ジェネレーター関数、yield、小さなパイプライン」で何を学びますか？

function*でジェネレーター関数を書き、yieldで値を遅延生成します。for...ofやnext()で動かし、小さなパイプラインを組み合わせます。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「ジェネレーター関数、yield、小さなパイプライン」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

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