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

JavaScriptのジェネレーター関数とは？仕組みと使い方をわかりやすく解説

ジェネレーター関数（Generator Functions）とは

ジェネレーター関数は、関数の実行を途中で中断し、後から再開できる特殊な関数です。通常の関数は一度呼び出されると最後まで処理が走りますが、ジェネレーター関数ではyieldキーワードを使って処理を一時停止し、必要なタイミングで再び続きから実行できます。

この特性を活かすことで、以下のようなメリットがあります。

  • フロー制御の管理：コードの実行順序を柔軟にコントロールできる
  • 非同期処理の簡単なキャンセル：実行はいつでも一時停止できるため、非同期操作を容易に中断できる

ジェネレーター関数の書き方

ジェネレーター関数を定義するには、functionキーワードのあとにアスタリスク（*）を付ける点がポイントです。アスタリスクの位置は次のいずれの書き方でも動作します。

function *myFunction() {}
// または
function* myFunction() {}
// または
function*myFunction() {}

どの記述スタイルでも意味は同じですが、チームで開発する場合はコーディング規約で統一しておくと良いでしょう。

実装例

ここでは、実際にジェネレーター関数を使ったサンプルコードを見てみましょう。yieldで値を順番に返し、next()メソッドを呼び出すたびに処理が再開される仕組みです。

<html>
  <body>
    <script>
      function* display() {
        var num = 1;
        while (num < 5)
          yield num++;
      }
      var myGenerator = display();

      document.write(myGenerator.next().value);
      document.write("<br>"+myGenerator.next().value);
      document.write("<br>"+myGenerator.next().value);
      document.write("<br>"+myGenerator.next().value);
      document.write("<br>"+myGenerator.next().value);
    </script>
  </body>
</html>

出力結果

1
2
3
4
undefined

コードの解説

この例では、display()というジェネレーター関数内でwhileループにより1から4までの数値を順番にyieldしています。

next()メソッドを呼び出すと、ジェネレーターは直前のyield位置から処理を再開し、{ value: 値, done: 真偽値 }というオブジェクトを返します。上記の出力結果を見ると、4回目まではnumの値（1〜4）が取得できますが、5回目のnext()ではループ条件を満たさず処理が完了するため、valueはundefinedになります。

まとめ

ジェネレーター関数を使うと、「中断と再開」を伴う処理をシンプルに記述できます。特に、イテレーターの実装や非同期処理の制御などで威力を発揮します。アスタリスクとyieldという2つの要素さえ押さえれば、すぐに使い始められるので、ぜひ自分のコードでも試してみてください。

  1. JavaScriptのPromiseとは？非同期処理の基本をわかりやすく解説

    JavaScriptのPromiseとは？Promise（プロミス）は、JavaScriptで非同期処理を扱うためのオブジェクトです。Promiseが生成された時点では、最終的な結果の値はまだ確定していません。処理が完了した将来のタイミングで、成功または失敗の結果を受け取ることができます。これにより、APIからのデータ取得やファイル読み込みなど、時間のかかる処理を効率的に記述できます。Promiseの3つの状態Promiseは、必ず以下の3つの状態のいずれかを持ちます。pending（待機）：初期状態。処理がまだ完了していない状態です。fulfilled（履行）：処理が正常に完了し、結果の値が

  2. JavaScriptの部分関数（Partial Function）とは？仕組みと実装例をわかりやすく解説

    部分関数（Partial Function）とは、既存の関数を引数として受け取り、それに加えて別の型の引数も同時に受け取れるようにする仕組みです。まず渡された引数の一部を使い、残りの引数を受け取る新しい関数を返します。そして、返された関数が呼び出されるときに、あらかじめ固定しておいた引数とそのときに渡された引数をすべて組み合わせて、元の親関数が実行されます。 この手法は「部分適用（Partial Application）」とも呼ばれ、関数型プログラミングの基本的なテクニックのひとつです。共通する引数を先に束縛しておくことで、処理の再利用性やコードの可読性を高めることができます。 コード例 以下