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

JavaScriptのErrorオブジェクト「name」プロパティの使い方と実例

JavaScriptにおけるErrorオブジェクトのnameプロパティは、発生したエラーの名前（種類）を読み取ったり、独自のエラー名を設定したりするために使用されます。エラーハンドリングを行う際に、どのような種類のエラーが発生したのかを判別するのに非常に役立ちます。

主なエラー名の一覧

JavaScriptには、あらかじめ定義されている標準的なエラー名がいくつか存在します。

  • Error — 汎用的なエラー
  • SyntaxError — 構文エラー
  • ReferenceError — 存在しない変数や参照のエラー
  • TypeError — 型が期待と異なる場合のエラー
  • RangeError — 値が有効な範囲外の場合のエラー
  • EvalError — eval() 関数に関するエラー
  • URIError — URIの不正な処理によるエラー

Error nameプロパティのコード例

以下は、Errorのnameプロパティを使用して、発生したエラーの名前を画面に表示するサンプルコードです。

<!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 Error name Property</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、エラー名が表示されます
</h3>
<script>
    let sampleEle = document.querySelector(".sample");
    document.querySelector(".Btn").addEventListener("click", () => {
        try {
            confrm("Are you sure");
        } catch (e) {
            sampleEle.innerHTML = "Error: " + e.name;
        }
    });
</script>
</body>
</html>

JavaScriptのErrorオブジェクト「name」プロパティの使い方と実例

実行結果

このコードでは、意図的に未定義の関数 confrm() を呼び出しています。try...catch ブロックによって例外が捕捉され、catch節で受け取ったエラーオブジェクト e の name プロパティを参照することで、エラーの種類を取得しています。

「CLICK HERE」ボタンをクリックすると −

JavaScriptのErrorオブジェクト「name」プロパティの使い方と実例

この例の場合、存在しない関数を呼び出しているため、「Error: ReferenceError」という結果が表示されます。このように、name プロパティを使えば、エラーメッセージだけでなくエラーの種類も簡単に確認でき、デバッグや条件分岐によるエラー処理に活用できます。

  1. JavaScriptで配列内オブジェクトのプロパティ名を置き換える方法

    JavaScriptでオブジェクト配列のプロパティ名を置き換える方法 JavaScriptでは、map()メソッドを活用することで、配列に含まれる各オブジェクトのプロパティ名を別の名前に簡単に置き換えることができます。map()は元の配列を変更せずに新しい配列を生成するため、安全かつ効率的なデータ変換処理に適しています。 以下は、オブジェクト配列のプロパティ名 name を fullName に置き換えるサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta

  2. JavaScriptにおけるES6のプロパティ省略記法（ショートハンド）の使い方

    ES6（ECMAScript 2015）では、オブジェクトのキー名と、その値として代入したい変数名が同じである場合、値の指定を省略し、キー名だけを記述するだけで済む「プロパティ省略記法（Property Shorthand）」が使えます。この記法により、コードがより簡潔で読みやすくなります。以下に、JavaScriptでのプロパティ省略記法の実装例を示します。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <