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

JavaScriptのErrorクラスは拡張できる？カスタムエラーを作成する最適な方法

JavaScriptでは、組み込みのErrorクラスを継承することで、独自のカスタムエラーを作成できます。最も推奨される方法は、ES2015（ES6）以降のclass構文とextendsキーワードを使って、標準のErrorクラスを拡張した新しいカスタムエラークラスを定義することです。

カスタムエラーを利用すれば、エラーの種類を名前で判別したり、エラーコードなどの独自のプロパティを持たせたりできるため、アプリケーションの規模が大きくなっても、柔軟で分かりやすいエラーハンドリングを実現できます。

カスタムエラーの実装例

以下は、JavaScriptでErrorクラスを拡張するサンプルコードです。

<!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>Extend JavaScript Error</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to create a new error by extending the error class
</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");

    // Errorクラスを継承したカスタムエラーを定義
    class CustomError extends Error {
        constructor(message) {
            super(message);
            this.name = "Custom Error";
        }
    }

    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>

コードのポイント

  • super(message)：親クラスであるErrorのコンストラクタを呼び出し、エラーメッセージを引き継ぎます。
  • this.name = "Custom Error"：エラー名を上書きすることで、エラーの種類を識別しやすくなります。
  • throw new CustomError()：標準のErrorとまったく同じようにスローでき、try...catchブロックで捕捉できます。

出力結果

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

JavaScriptのErrorクラスは拡張できる？カスタムエラーを作成する最適な方法

「CLICK HERE」ボタンをクリックすると、次のように変化します。

JavaScriptのErrorクラスは拡張できる？カスタムエラーを作成する最適な方法

ボタンをクリックするとCustomErrorがスローされ、catchブロック内でerr.nameとerr.messageの値が画面に出力されます。また、instanceof CustomErrorを使えば、捕捉したエラーがカスタムエラーかどうかを判定することも可能です。

なお、ES5へトランスパイルする環境では、class extendsによるErrorの継承が期待どおりに動作しない場合がある点に注意してください。その場合は、constructorプロパティの明示的な設定などの工夫が必要になります。

  1. 重複ファイルを管理する最良の方法とは？初心者向け徹底ガイド

    大容量HDDの時代でも、重複ファイルは悩みの種最近のパソコンには大容量のハードディスクが搭載されており、動画や音楽ファイル、数百枚に及ぶ写真など、さまざまなデータを自由に保存できます。しかし、どれほど大容量であっても、いつか必ず空き容量が尽きてしまうものです。そんなとき、慌ててプログラムをアンインストールする必要はありません。まず試すべきなのは、重複ファイルの整理と管理です。重複ファイルとは何か？ハードディスクにファイルを保存している限り、重複ファイルは避けて通れません。気づかないうちに少しずつ蓄積していきます。例えば、デジカメやスマートフォンの写真をパソコンに取り込む際、同じ写真を別々のフォ

  2. Vsinit.dllエラーを解決する最適な方法｜原因と対処法を徹底解説

    Vsinit.dllファイルは、TrueVector Service（ZoneAlarmプログラム）に直接関連付けられた重要なファイルです。このファイルはルート証明書として機能しており、ZoneAlarmインターネットファイアウォールの中核的な要素となっています。実行されるすべてのアクションを検査・許可するために必要な証明書を保持しており、プログラムの動作に欠かせない存在です。しかし、ZoneAlarmを使用する際に、このファイルに関連するトラブルに直面するユーザーは少なくありません。 Vsinit.dllエラーの主な原因 この種のエラーは、以下のいずれかの要因によって発生すると考えられま