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

JavaScriptのエラー名（Error.name）とは？6つの種類と取得方法を例付きで解説

JavaScriptのエラー名（Error.name）とは

JavaScriptでは、発生したエラーの種類を示すためにエラー名（name）という値が使用されます。この値は、エラーオブジェクトの name プロパティを通じて設定したり参照したりすることができます。

エラー名として返される可能性のある値は、主に以下の6種類です。

No.エラー名と説明
1EvalError
eval() 関数の実行中にエラーが発生したことを表します。
2RangeError
配列の長さなど、数値が有効な範囲外になった場合に発生します。
3ReferenceError
存在しない変数へのアクセスなど、不正な参照が行われた場合に発生します。
4SyntaxError
コードに構文上の誤りがある場合に発生します。
5TypeError
値やオブジェクトの型が想定と異なる操作を行った場合に発生します。
6URIError
encodeURI() などのURI処理関数に不適切な引数が渡された場合に発生します。

コード例

以下は、宣言前の変数にアクセスして ReferenceError を意図的に発生させ、そのエラー名を取得して表示するサンプルコードです。

<!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 {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScriptにおけるエラー名の値</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、定義前の変数にアクセスします
</h3>
<script>
    let resEle = document.querySelector(".result");
    document.querySelector(".Btn").addEventListener("click", () => {
        try {
            resEle.innerHTML = a;
        }
        catch (err) {
            resEle.innerHTML = "エラー名 = " + err.name;
        }
        let a = 44;
    });
</script>
</body>
</html>

実行結果

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

JavaScriptのエラー名（Error.name）とは？6つの種類と取得方法を例付きで解説

「CLICK HERE」ボタンをクリックすると、let a = 44; より前のタイミングで未定義の変数 a へアクセスしようとしたため、catchブロックで捕捉されたエラー名「ReferenceError」が画面に表示されます。

JavaScriptのエラー名（Error.name）とは？6つの種類と取得方法を例付きで解説

まとめ

このように、try...catch 文と err.name を組み合わせることで、発生したエラーの種類をプログラム側で判別できます。エラー名ごとに処理を分岐させれば、よりきめ細かいエラーハンドリングを実現でき、デバッグ作業の効率も大きく向上します。

  1. JavaScriptでinnerHTMLを設定する方法をわかりやすく解説

    JavaScriptでHTML要素の内容を動的に書き換えたい場合に便利なのが、innerHTMLプロパティです。innerHTMLを使えば、指定した要素の中にHTML文字列をそのまま挿入・置き換えることができます。本記事では、innerHTMLを設定する正しい構文と、実際に動作するサンプルコードを初心者向けに解説します。 innerHTMLを設定する正しい構文 innerHTMLを設定する際の正しい構文は以下のとおりです。 document.getElementById(yourIdName).innerHTML=yourValue; この構文では、まずgetElementById()メソッド

  2. JavaScriptのprompt()で入力した値を条件式で評価する方法

    prompt()で入力した値をJavaScriptの条件式で評価する JavaScriptでは、prompt()メソッドを使ってユーザーから値を入力してもらい、その値を条件式（if文）で評価することができます。この記事では、2つの数値を入力して掛け算した結果を条件判定する具体例を解説します。 ポイントは、parseInt()を使って入力された文字列を数値に変換している点です。prompt()の戻り値は常に文字列のため、そのまま計算すると意図しない結果になる可能性があります。 var firstvalue = parseInt(prompt(Enter the value1)); var sec