JavaScriptで効率良いデバックのためにErrorオブジェクトを使ってエラーメッセージの作成と出力をする方法

JavaScriptで効率良いデバックのためにErrorオブジェクトを使ってエラーメッセージの作成と出力をする

JavaScritpのエラーはその状況を踏まえて、ブラウザ側が出力してくれるものと考えていませんか?

実は、特定の条件の時に私たち開発者側でエラーを出力させることが可能です。

これは、私たちが想定している方法とは異なる処理結果が発生してしまった時などに役立ちます。

実は、new Error()インスタンスを活用して、特定の条件の時に私たち開発者側でエラーを出力させることが可能です。

これは、私たちが想定している方法とは異なる処理結果が発生してしまった時などに役立ちます。

エラー発生後の処理

new Error オブジェクトの有無に限らず、JavaScriptでエラーが発生した場合は、その後の処理は実行されません。もし、エラーの有無に関わらず以後の処理を継続させたい場合はtry{}catch()構文を利用した方法を選択する必要があります。

まずは、関連するメソッド・プロパティ・構文を紹介します。

メソッド

メソッド意味返り値
new Error(エラー内容)Errorインスタンスを生成 Errorオブジェクト
Errorオブジェクトの仕様

プロパティ

プロパティ意味返り値
Errorインスタンス.messageエラー内容文字列
Errorインスタンス,messageの仕様

構文

構文意味
throw ErrorErrorインスタンスで作成したエラー内容を投げる
throw Error

サンプルコード

サンプルコードとして、new Error()でエラーメッセージを作成した上で、特定の条件に合致した時だけコンソール上にエラーコードを出力する関数を用意しました。具体的な内容は以下の通りです。

  • 引数の型を確認する
  • 引数の値が数字でない時はnew Error()でエラー内容を作成し、throw errorでエラー内容を出力する
  • 引数の値が数字の時はその値を利用したメッセージをconsole.log()で出力する
JavaScript
function targetFunction(value) {
  if (typeof value !== 'number') {
    // エラーを生成する
    const error = new Error(`「${value}」はNumberではありません`);
    // エラーを投げる
    throw error; //console.error(error.message);でも可能
  }

  console.log(`「${value}」は数値です`);
}

下記の様なコードを開発者ツール上で合わせてコンソールで実行してみてください。

JavaScript
// 関数に数値を渡す(エラーなし)
targetFunction(1);
JavaScript
// 関数に文字列を渡す(エラーが発生する)
targetFunction('User');

処理に違いが出ていることを確認してください。

インストラクター