JavaScriptのyieldキーワードとは？ジェネレータ関数の基本と使い方を解説

JavaScriptにおけるyieldキーワードは、ジェネレータ関数（generator function）の実行を一時停止し、後から再開するために使用されます。yieldが評価されると、その式の値がジェネレータの呼び出し元へ返されます。

yieldキーワードの基本的な役割

通常の関数は、呼び出されると最後まで一気に実行されます。一方、ジェネレータ関数はyieldの位置で処理を中断し、次にnext()メソッドが呼ばれたタイミングで、中断した箇所から処理を再開します。この仕組みにより、必要なときに必要な分だけ値を順番に取り出すことができます。

yieldを使ったコード例

以下は、プレイヤーのランクを順番に返すジェネレータ関数の例です。

function* displayRank() {
  var selPlayers = [1, 2, 3, 4];
  for (var a = 0; a < selPlayers.length; a++) {
    yield selPlayers[a];
  }
}

ポイントとして、ジェネレータ関数を定義するときは、functionの直後にアスタリスク（*）を付けます。また、ループ内では配列の要素を正しく参照するため、インデックス変数aを使用している点にも注目してください。

ジェネレータ関数の呼び出し方

定義したジェネレータ関数は、以下のように使用します。ここでのdisplayRank()がジェネレータ関数です。

var rank = displayRank();

// value: 1
alert(rank.next());
// value: 2
alert(rank.next());
// value: 3
alert(rank.next());
// value: 4
alert(rank.next());
// value: undefined
alert(rank.next());

next()メソッドの動作

next()メソッドを呼び出すたびに、ジェネレータは次のyieldまで処理を進め、その値を含むオブジェクトを返します。返されるオブジェクトは「value」と「done」という2つのプロパティを持ちます。

• value: yieldで返された値
• done: ジェネレータの処理が完了したかどうかを示す真偽値

上記の例では、5回目のnext()呼び出しですべての要素が出力済みとなるため、valueはundefinedになります。このように、yieldとnext()を組み合わせることで、値の生成を細かく制御できるのがジェネレータの大きな特徴です。