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

JavaScriptでカスタムエラーを作成する方法【サンプルコード付き】

JavaScriptでは、組み込みのErrorクラスを継承することで、アプリケーション固有のカスタムエラーを簡単に定義できます。カスタムエラーを活用すると、エラーの種類や原因を明確に区別でき、デバッグやエラーハンドリングの精度が大きく向上します。

カスタムエラーの基本

カスタムエラーを作成するには、ES6のclass構文でErrorクラスをextendsし、コンストラクタ内でsuper()を呼び出してエラーメッセージを親クラスに受け渡します。さらに、this.nameに独自のエラー名を設定することで、標準のErrorオブジェクトと明確に区別できるようになります。

実装例

以下は、JavaScriptでカスタムエラーを実装するサンプルコードです。「CLICK HERE」ボタンをクリックするとCustomErrorがスローされ、そのエラー名とメッセージが画面に表示されます。

<!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>Custom Errors in JavaScript</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to create a custom error and display it
</h3>
<script>
    let resEle = document.querySelector(".result");
    let sampleEle = document.querySelector(".sample");
    let BtnEle = document.querySelector(".Btn");
    class CustomError extends Error {
        constructor(message) {
            super(message);
            this.name = "CustomError";
        }
    }
    function test() {
        throw new CustomError("New Error thrown");
    }
    BtnEle.addEventListener("click", () => {
        try {
            test();
        }
        catch (err) {
            resEle.innerHTML += "err.name = " + err.name + "<br>";
            resEle.innerHTML += "err.message = " + err.message + "<br>";
        }
    });
</script>
</body>
</html>

コードのポイント

  • class CustomError extends Error：組み込みのErrorクラスを継承して、独自のエラークラス「CustomError」を定義しています。
  • super(message)：親クラス（Error）のコンストラクタにメッセージを渡すことで、標準的なエラー情報として扱えるようにしています。
  • this.name = "CustomError"：エラー名を明示的に設定し、通常のErrorオブジェクトとの判別を容易にしています。
  • try〜catch構文：test()関数内でthrowされたカスタムエラーを捕捉し、err.nameとerr.messageの内容を画面に出力します。

出力結果

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

JavaScriptでカスタムエラーを作成する方法【サンプルコード付き】

そして、「CLICK HERE」ボタンをクリックすると、カスタムエラーが生成され、エラー名とメッセージが以下のように表示されます。

JavaScriptでカスタムエラーを作成する方法【サンプルコード付き】

  1. JavaScriptのWeakSetとは？特徴と主要メソッド、サンプルコードをわかりやすく解説

    JavaScriptのWeakSet（ウィークセット）は、オブジェクトを格納するためのコレクションです。Setと同様に、同じオブジェクトを重複して保存することはできません。WeakSetの主な特徴弱い参照で保持する：WeakSet内のオブジェクトへの参照が他に存在しなくなると、ガベージコレクションによって自動的にメモリから解放されます。そのため、メモリリークを防ぎたい場面で役立ちます。オブジェクトのみ格納可能：数値や文字列などのプリミティブ値は追加できません。列挙できない：Setのようなsizeプロパティや反復処理の仕組みを持たず、格納されている要素の一覧を取得することはできません。WeakS

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

    JavaScriptでは、一度catch句で捕捉した例外を、throw文によって再度スロー（再スロー）することが可能です。再スローを活用すれば、エラーのログ記録や一部の後処理を実行したうえで、最終的なエラー処理を上位の呼び出し元に委譲するといった、柔軟なエラーハンドリング設計が実現できます。 JavaScriptでエラーを再スローするコード例 以下は、入力された数値の大きさに応じてエラーを処理するか、再スローするかを切り替えるサンプルコードです。 <!DOCTYPE html> <html lang="en"> <head> <