[JavaScript]作業効率を上げるためにデバックを身に付けよう

はじめに

JavaScriptでデバックする方法を記載しました。console.logの一つでデバックを乗り切っていたのですが、ほかの方法も知りたいと思い記事を書きました。今回の記事では、ブラウザでブレークポイントを設定する方法は省略しています。詳しく知りたい方は、下記の記事を参考にするとよいと思います。

ブレークポイントを使ったJavaScriptデバッグを整理してみた【再入門】

console API一覧

デバックで役に立つconsole APIメソッド一覧になります。

メソッド	意味
console.assert()	条件付きでエラーメッセージを出力します
console.clear()	コンソール画面をクリアする
console.count()	引数の値が呼び出された回数を出力します
console.countReset()	引数のカウンターの値をリセットします
console.dir()	指定したオブジェクトが持つプロパティの一覧をリストで出力します
console.dirxml()	指定したオブジェクトをXML/HTML要素で表示します
console.error()	エラーメッセージを出力します
console.group()	インデントを付けて出力することで階層構造を持たせます(groupEnd()で終了する)
console.info()	メッセージタイプのログ情報を出力します
console.log()	一般タイプのログ情報を出力します
console.table()	指定した配列やオブジェクトなどの構造をテーブルにして出力します
console.time()	time()～timeEnd()までの間にある処理時間を計測する
console.trace()	呼び出し元などを記録した実行過程を出力します
console.warn()	警告メッセージを出力します

throw new Error()

ソースコードの文法的エラーではなく、特定の条件時をエラーとして扱いたときがあります。
そのような場合に、throw new Error()でエラーを投げることが出来ます。
throw文でもエラーを投げることは可能ですが、Errorインスタンスを投げるのが定石らしいです。Errorのインスタンスには、messageプロパティとnameプロパティがあります。

• message　⇒　エラー内容について
• name　⇒　Errorクラスのオブジェクトクラス
  参考：JavaScript初級者から中級者になろう

利用シーンは関数に不正な値が入力された場合や、APIの戻り値が意図せぬ値になった場合などです。サンプルコードとして、引数が数値以外ならエラーを発生させる処理を載せました。

function allowNumber(val) {
  if(typeof val !== 'number') {
   throw new Error(`${val}は数値ではありません。`);
  }   
}

allowNumber('カレー');

try...catch

try...catchは異常エラーが発生したときに別の処理を実行させることが出来ます。
エラーが発生しても処理を止めたくないときや別処理を実行させたいときに有効です。

const num = 10;
try {
    //　例外が発生する可能性のある処理を記述
    num = 20;
} catch (error) {
    // 例外をキャッチしたときに実行される処理を記述
    console.log("エラーが発生しました。");
} finally {
    // 例外の発生有無に関係なく実行される処理
    console.log('ラーメン');
}

console.log("すし");

おわりに

これを機会に、console.log以外も使用してみたいと思います。