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

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

```html

generator.throw()メソッドとは

generator.throw()メソッドは、一時停止中のyield式に対してエラーを送出するためのメソッドです。throw()が呼び出されると、ジェネレーターはあたかもyieldの位置で例外が発生したかのように実行を再開し、doneとvalueという2つのプロパティを持つオブジェクトを返します。

このメソッドを使うと、ジェネレーターの外部から内部へ例外を注入できます。ジェネレーター内にtry...catchブロックが存在すれば、throw()で渡されたエラーはそのcatchブロックで捕捉されます。逆にcatchブロックがない場合は、エラーはそのまま呼び出し元へ伝播します。

next()との違い

  • next() … ジェネレーターを通常どおり再開し、yield式の評価結果として指定した値を渡します。
  • throw() … yieldの位置で例外を発生させて再開します。異常系のフロー制御やエラーハンドリングのテストに便利です。

コード例

以下は、JavaScriptでgenerator.throw()を使用するサンプルコードです。「数値を表示」ボタンでnext()により数値を順に取得し、「エラーをスロー」ボタンでthrow()により例外を注入しています。

<!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;
    }
    .result,.sample {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
    .result {
        color: red;
    }
</style>
</head>
<body>
<h1>JavaScriptのgenerator.throw()メソッド</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">数値を表示</button>
<button class="Btn">エラーをスロー</button>
<h3>上のボタンをクリックすると、数値の表示またはエラーのスローが行われます</h3>
<script>
    let BtnEle = document.querySelectorAll(".Btn");
    let resEle = document.querySelector(".result");
    let sampleEle = document.querySelector(".sample");
    function* increment() {
        let num = 0;
        while (true) {
            try {
                yield num++;
            }
            catch (err) {
                resEle.innerHTML = "エラー = " + err + "<br>";
            }
        }
    }
    let inc = increment();
    BtnEle[0].addEventListener("click", () => {
        sampleEle.innerHTML = inc.next().value + " ";
    });
    BtnEle[1].addEventListener("click", () => {
        inc.throw(new Error("何らかのエラーが発生しました"));
    });
</script>
</body>
</html>

実行結果

上記のコードをブラウザーで開くと、次のような画面が表示されます。

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

「数値を表示」ボタンを数回クリックすると、クリックするたびにnext()が呼び出され、0から順に数値が表示されていきます。

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

続いて「エラーをスロー」ボタンをクリックすると、throw()によって送出されたエラーがジェネレーター内のcatchブロックで捕捉され、画面にエラーメッセージが表示されます。

JavaScriptのgenerator.throw()メソッドの使い方を解説
  1. JavaScriptのmap()メソッド徹底解説！基本構文からReactでの活用例まで

    プログラマーはコードの重複を避けることを好みます。コードの繰り返しが増えるほど保守性が低下し、プログラムの実行速度も遅くなります。そのため、JavaScriptにはデータセットを反復処理するためのさまざまなメソッドが用意されています。 その中の一つがmap()メソッドです。このメソッドは既存の配列をループ処理し、配列内のすべての要素に対して特定の関数を実行します。 このガイドでは、JavaScriptのmap()関数の使い方について解説します。実際によく使われる3つの具体例を通じて、map()関数の活用方法を学んでいきましょう。 map()関数とは？ JavaScriptのmap()メ

  2. JavaScript alert()メソッドの使い方を徹底解説！基本構文から実践例まで

    JavaScriptのalert()メソッド（Window.alert()とも呼ばれます）は、ユーザーにアラートダイアログボックスを表示するためのメソッドです。省略可能なメッセージ引数を受け取り、OKボタン付きのメッセージをユーザーに表示します。alert()は、処理が成功したことをユーザーに知らせたり、エラーを表示したりする場面でよく使われます。また、alert()は開発ツールとしても便利です。例えば、フォーム送信を処理する関数の中にalert()を配置することができます。一般的には、event.preventDefault()が呼び出された後にalert()を配置します。おさらいすると、e