JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのジェネレーター関数とは？yieldの仕組みと実用例をわかりやすく解説

ジェネレーター（Generators）とは

JavaScriptには、ジェネレーター関数（Generator Functions）とジェネレーターオブジェクト（Generator Objects）が用意されています。ジェネレーター関数は通常の関数とよく似ていますが、値を返す際に「return」ではなく「yield」キーワードを使用する点が大きな特徴です。

yieldキーワードが実行されると、関数の処理はその時点で一時停止し、呼び出し元へ値を返します。その後、再び呼び出されたときには停止した箇所の続きから処理を再開できるという強力な機能を持っています。

基本的な構文

ジェネレーター関数を定義するには、functionキーワードの後にアスタリスク（*）を付けます。

function* generator() {
   yield 1;
   yield 2;
}

実行例：カウントダウンを生成する

次の例では、ジェネレーター関数を使って自然数10、9、8を順番に出力しています。各数字を個別に記述する代わりに、必要な回数だけnext()メソッドを呼び出すことで、柔軟に値を取り出せます。

<html>
<body>
<script>
   function* number() {
      var num = 10;
      while (true) {
         yield num--;
      }
   }

   var gen = number();
   document.write(gen.next().value);
   document.write("</br>");
   document.write(gen.next().value);
   document.write("</br>");
   document.write(gen.next().value);
</script>
</body>
</html>

実行結果

10
9
8

ポイントまとめ

  • 関数宣言時に function* のようにアスタリスクを付けることでジェネレーター関数になる
  • yield で処理を一時停止し、値を呼び出し元に返す
  • next() メソッドを呼ぶたびに、停止した位置から処理が再開される
  • 戻り値は { value: 値, done: 真偽値 } 形式のオブジェクトで、.value で実際の値を取得できる
  • 無限ループと組み合わせても、必要な分だけ値を段階的に取り出せるため安全

このようにジェネレーター関数は、逐次的に値を生成したい場合や、遅延評価（Lazy Evaluation）を行いたい場合に非常に便利な仕組みです。

  1. JavaScriptの高階関数とは？基本概念とサンプルコードをわかりやすく解説

    高階関数とは？JavaScriptでは、関数はオブジェクトとして扱われます。そのため、関数を別の関数に引数として渡したり、関数の戻り値として別の関数を返したりすることが可能です。JavaScriptの関数は「第一級関数（ファーストクラス関数）」と呼ばれ、変数・オブジェクト・配列などに自由に格納できるという特徴を持っています。そして、関数を引数として受け取る、戻り値として返す、あるいはその両方を行う関数のことを「高階関数（Higher Order Function）」と呼びます。代表的な高階関数には、map()、filter()、reduce()、forEach()などがあります。これらを活用す

  2. JavaScriptのファーストクラス関数とは？特徴と使い方を実例で解説

    ファーストクラス関数（第一級関数）とは？ JavaScriptでは、関数もオブジェクトの一種として扱われます。そのため、関数を別の関数の引数（パラメータ）として渡したり、関数の中で別の関数を戻り値として返したりすることが可能です。 このような性質を持つことから、JavaScriptの関数はファーストクラス関数（第一級関数）と呼ばれています。つまり、関数は変数・オブジェクト・配列などに自由に格納できる「値」だということです。 さらに、関数を引数として受け取る、関数を戻り値として返す、あるいはその両方を行う関数は高階関数（Higher Order Function）と呼ばれます。 ファーストクラ