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

JavaScriptのジェネレーター関数とは？yieldの仕組みと使い方を実例で解説

JavaScriptのジェネレーター関数（Generator Function）は、yieldキーワードを使って値を順番に生成できる特別な関数です。通常の関数と異なり、一度値を返してもその内部状態（実行位置や変数など）が保持されるため、次に呼び出されたときには、前回yieldを実行した直後の続きから処理を再開できます。

ジェネレーター関数を呼び出すたびに、呼び出し元へ新しい値が1つずつ返されます。この仕組みにより、大量のデータを一括生成するのではなく、必要なタイミングで少しずつ値を取り出すことが可能になります。

ジェネレーター関数の基本的な特徴

  • 関数宣言時に function* を使用して定義します。
  • yield の位置で処理が一時停止し、状態が保持されます。
  • next() メソッドを呼び出すと、次の yield まで処理が進み、結果として { value: 値, done: 真偽値 } 形式のオブジェクトが返されます。
  • done が true になると、それ以上生成する値がないことを意味します。

JavaScript ジェネレーターのサンプルコード

以下は、実際にブラウザ上で動作するジェネレーター関数のコード例です。ボタンをクリックするたびに、ジェネレーターから計算結果が順番に出力されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .sample {
        font-size: 18px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScript Generator</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、ジェネレーター関数が呼び出され、結果が順番に表示されます
</h3>
<script>
    let sampleEle = document.querySelector(".sample");
    function* generate(num) {
        yield 2 * num;
        yield 3 * num;
        yield 4 * num;
        yield 5 * num;
    }
    let Gen = generate(8);
    document.querySelector(".Btn").addEventListener("click", () => {
        sampleEle.innerHTML += Gen.next().value + "<br>";
        sampleEle.innerHTML += Gen.next().value + "<br>";
        sampleEle.innerHTML += Gen.next().value + "<br>";
        sampleEle.innerHTML += Gen.next().value + "<br>";
    });
</script>
</body>
</html>

コードの解説

この例では、引数 num を受け取るジェネレーター関数 generate() を定義しています。内部では num に 2〜5 を掛けた値を順番に yield しています。

generate(8) を呼び出すことでジェネレーターオブジェクト Gen が生成されます。この時点ではまだ関数本体は実行されておらず、最初の Gen.next() が呼ばれたときに初めて処理が開始されます。以降、next() を呼ぶたびに以下の値が順番に返されます。

  • 2 × 8 = 16
  • 3 × 8 = 24
  • 4 × 8 = 32
  • 5 × 8 = 40

実行結果

ページを表示した直後の出力：

JavaScriptのジェネレーター関数とは？yieldの仕組みと使い方を実例で解説

「CLICK HERE」ボタンをクリックした後の出力：

JavaScriptのジェネレーター関数とは？yieldの仕組みと使い方を実例で解説

ボタンをクリックすると、16・24・32・40という4つの値が順番に画面へ追加表示されます。これは、ジェネレーターが前回のyieldの位置を記憶し、そこから処理を再開していることを示しています。

まとめ

ジェネレーター関数を使うことで、処理の一時停止と再開を柔軟に制御できます。無限シーケンスの生成、遅延評価（Lazy Evaluation）、非同期処理のフロー制御など、さまざまな場面で活用できる強力な機能なので、ぜひマスターしておきましょう。

  1. JavaScriptでランダムカラーを生成する方法【サンプルコード付き】

    JavaScriptを使えば、ボタンをクリックするたびに要素の背景色をランダムに切り替えるといった動的な演出を簡単に実装できます。この記事では、jQueryと組み合わせて16進数のカラーコード（#RRGGBB）をランダムに生成し、指定した要素に適用する方法を、具体的なサンプルコードとともに解説します。 ランダムカラー生成の基本構文 JavaScriptでランダムな色を要素に適用する際の基本的な構文は次の通りです。 $("#yourIdName").css("background-color", yourCustomFunctionNameToGetR

  2. JavaScriptのgenerator.throw()メソッドの使い方を解説

    ```html generator.throw()メソッドとはgenerator.throw()メソッドは、一時停止中のyield式に対してエラーを送出するためのメソッドです。throw()が呼び出されると、ジェネレーターはあたかもyieldの位置で例外が発生したかのように実行を再開し、doneとvalueという2つのプロパティを持つオブジェクトを返します。このメソッドを使うと、ジェネレーターの外部から内部へ例外を注入できます。ジェネレーター内にtry...catchブロックが存在すれば、throw()で渡されたエラーはそのcatchブロックで捕捉されます。逆にcatchブロックがない場合は、