【JavaScript】generatorについて

HTML5 プロフェッショナル認定試験の勉強をしていた際「generator」というワードが出てきました。

今まで聞いたことがなく、実際に使用したこともありませんでした。
そこで今回はそのgeneratorについて調べてみました。

generator とは

generatorとは一体何でしょうか。

MDNには下記のように記載されています。

Generator オブジェクトはジェネレーター関数によって返され、反復可能プロトコルとイテレータープロトコルの両方に準拠しています。

どうもジェネレーター関数に返却されるようです。

そもそもジェネレーター関数とは何でしょうか？

Generator関数

Generator関数には以下のような特徴があります。

1. function* で定義される
   通常の関数と異なり、function* という形式で関数を定義します。
2. yield を使用する
   Generator関数の中で使用され、値を外部に返しつつ関数の実行を一時停止します。
3. イテレータを返す
   Generator関数を呼び出すとイテレータオブジェクトが返却され、
   next() メソッドを使ってステップごとに実行を進めます。

では実際に使用例を見ていきましょう。

使用例

まずはシンプルな例を見てみましょう。
generatorがどのような動きをするのかが分かると思います。

function* testGenerator() {
  console.log("one");
  yield 1; // 1を返し、ここで停止

  console.log("two");
  yield 2; // 2を返し、ここで停止

  console.log("three");
  yield 3; // 3を返し、ここで停止

  console.log("終了");
}

const gen = myGenerator();

console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }

解説

1. gen.next() を最初に呼ぶと myGenerator関数内の実行が開始されます。
   yield 1 に到達すると1 が返され、実行が一時停止します。
2. 次の gen.next() で前回の停止位置から再開し、次の yield に達するまで実行されます。
3. 全ての yield が実行されると done: true となり、Generator関数の実行が終了します。

次に実用例を見てみましょう。
下記の例では双方向のデータ通信の例を記載しています。

function* bidirectionalGenerator() {
  const value1 = yield "最初の値を入力してください"; // 呼び出し元から値を受け取る
  console.log("入力された値:", value1);

  const value2 = yield "次の値を入力してください";
  console.log("入力された値:", value2);

  return "完了";
}

const gen = bidirectionalGenerator();
console.log(gen.next().value); // "最初の値を入力してください"
console.log(gen.next(42).value); // "次の値を入力してください" (value1 = 42)
console.log(gen.next(99).value); // 完了 (value2 = 99)

まとめ

generator は実行を一時停止し、
次に再開する際に値やデータを渡すことができるため、
状態管理が必要なケースや大量のデータを扱う際に役立ちそうです。

実務にどう生かせるかはまだ分かりませんが、
機会があれば使っていきたいですね。

それでは。

参考文献

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/function*