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

JavaScriptでエラーを再スローすることはできる？基本と実装方法を解説

JavaScriptでは、一度catch句で捕捉した例外を、throw文によって再度スロー（再スロー）することが可能です。再スローを活用すれば、エラーのログ記録や一部の後処理を実行したうえで、最終的なエラー処理を上位の呼び出し元に委譲するといった、柔軟なエラーハンドリング設計が実現できます。

JavaScriptでエラーを再スローするコード例

以下は、入力された数値の大きさに応じてエラーを処理するか、再スローするかを切り替えるサンプルコードです。

<!DOCTYPE html>
<html lang="en">
<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 {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>Re-throw errors in JavaScript</h1>
<input type="number" class="num" />
<button class="Btn">CHECK</button>
<div class="result"></div>
<h3>Enter a number bigger than 40 to re throw error;</h3>
<script>
    let BtnEle = document.querySelector(".Btn");
    let resEle = document.querySelector(".result");
    BtnEle.addEventListener("click", () => {
        let a = document.querySelector(".num").value;
        try {
            throw a;
        }
        catch (err) {
            resEle.innerHTML = "Error thrown = " + err + "<br>";
            if (a < 40) {
                resEle.innerHTML += "Error handled : Value less than 40";
            } else {
                resEle.innerHTML += "Value more than 40 rethrowing error";
                throw err;
            }
        }
    });
</script>
</body>
</html>

コードの解説

「CHECK」ボタンをクリックすると、入力フィールドの値を取得し、tryブロック内で意図的にthrowしています。catchブロックでは、まずスローされた値を画面に表示したうえで条件分岐を行います。値が40未満の場合はその場でエラーを処理して完了し、40以上の場合はthrow err;によって例外を再スローします。再スローされた例外はこのコード内では捕捉されないため、コンソールに未処理エラーとして出力されます。

出力結果

上記のコードを実行すると、以下のような画面が表示されます。

JavaScriptでエラーを再スローすることはできる？基本と実装方法を解説

40未満の値を入力して「CHECK」ボタンをクリックした場合：

JavaScriptでエラーを再スローすることはできる？基本と実装方法を解説

40より大きい値を入力して「CHECK」ボタンをクリックした場合：

JavaScriptでエラーを再スローすることはできる？基本と実装方法を解説

まとめ

このように、catchブロック内でthrow文を使えば例外を簡単に再スローできます。エラーの内容を確認・記録しつつ、処理できないケースだけ上位層に伝えたい場合などに有効なテクニックなので、ぜひ活用してみてください。

  1. JavaScriptの「for...in」ステートメントとは？オブジェクトのプロパティをループ処理する方法を解説

    JavaScriptのfor...in文は、オブジェクトが持つすべてのプロパティ（列挙可能なプロパティ）を順番に取り出して処理するためのループ構文です。オブジェクト内の各キー（プロパティ名）にアクセスしながら、対応する値を取得したい場合に非常に便利です。for...inの基本的な構文for (let 変数名 in オブジェクト) { // 各プロパティに対して実行したい処理 }ループ変数には、各反復ごとにオブジェクトのプロパティ名（キー）が文字列として代入されます。値そのものを取得するには、「オブジェクト[変数名]」のようにブラケット記法を使ってアクセスします。サンプルコード以下は、for

  2. 【図解付き】JavaScriptにおけるオブジェクトの等価性をわかりやすく解説

    JavaScriptでは、文字列・数値・真偽値などのプリミティブ型はその「値」に基づいて比較されます。一方、オブジェクト(ネイティブオブジェクトでも独自に定義したカスタムオブジェクトでも)は「参照」に基づいて比較されます。 「参照による比較」とは、複数のオブジェクトがメモリ上の同じ場所を指しているかどうかを判定するという意味です。つまり、プロパティの中身が完全に一致していても、別々に生成された2つのオブジェクトは等しいとみなされません。 押さえておきたいポイント プリミティブ型: 値が同じであれば == や === の比較で true になる オブジェクト型: 同じインスタンス(同一の参照