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

JavaScriptのエラーオブジェクトとは？name・messageプロパティと使い方を解説

エラーオブジェクトは、スクリプトの実行中にエラーが発生した際に、JavaScriptインタプリタによって自動的にスローされるオブジェクトです。また、throw文と組み合わせることで、開発者が独自に定義した例外（ユーザー定義例外）をスローする用途にも活用できます。

エラーオブジェクトの主なプロパティ

JavaScriptのエラーオブジェクトには、以下の2つの重要なプロパティがあります。

プロパティ説明
nameエラーの名前を設定または取得します（例：ReferenceError、TypeErrorなど）。
messageエラーの内容を文字列として設定または取得します。

主なエラーの種類（nameプロパティの値）

  • Error … すべてのエラーの基底となる汎用的なエラー
  • ReferenceError … 存在しない変数を参照した場合に発生
  • TypeError … 値が期待された型でない場合に発生
  • SyntaxError … コードの構文が不正な場合に発生

JavaScriptエラーオブジェクトのサンプルコード

以下は、try...catch文を使ってエラーオブジェクトを捕捉し、その内容を画面に表示するコード例です。

コード例

<!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 Error Object</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 {
            a;
        }
        catch (err) {
            resEle.innerHTML = "Error = " + err + "<br>";
            resEle.innerHTML += "error.name = " + err.name + "<br>";
            resEle.innerHTML += "error.message = " + err.message + "<br>";
        }
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

JavaScriptのエラーオブジェクトとは？name・messageプロパティと使い方を解説

「CLICK HERE」ボタンをクリックすると、未定義の変数aを参照したことによるエラーが捕捉され、以下のようにエラー内容が出力されます。

JavaScriptのエラーオブジェクトとは？name・messageプロパティと使い方を解説

この例では、宣言されていない変数を参照しているため、err.nameには「ReferenceError」が、err.messageには「a is not defined」というメッセージが格納されます。このように、try...catch構文とエラーオブジェクトを組み合わせることで、発生したエラーの種類や詳細をプログラム側で柔軟に処理できるようになります。

  1. JavaScriptのオブジェクト初期化子とは？使い方をサンプルコードで解説

    オブジェクト初期化子とは オブジェクト初期化子（Object Initializer）は、新しく生成したオブジェクトを初期化するための式です。波括弧 {} の中に、「プロパティ名」と「それに対応する値」のペアを0個以上、カンマ区切りで列挙して記述します。 これにより、変数宣言と同時にオブジェクトの中身を簡単に定義することができます。 以下は、JavaScriptでオブジェクト初期化子を使用したサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta chars

  2. JavaScriptの「is not a constructor」エラーとは？原因と解決方法をわかりやすく解説

    JavaScriptで「TypeError: 〇〇 is not a constructor（コンストラクターではありません）」というエラーが発生するのは、コンストラクターとして呼び出せないオブジェクトや変数に対して new 演算子を使った場合です。 たとえば、数値や文字列などのプリミティブ値、あるいはアロー関数は new によるインスタンス化に対応していないため、このエラーがスローされます。 エラーが発生するコード例 以下は、数値型の変数をコンストラクターとして呼び出し、「not a constructor」エラーを発生させるサンプルコードです。 <!DOCTYPE html>