Zenn
🙆‍♀️

【イラスト付き】JavaScriptエラー処理【丁寧に解説】

2024/09/02に公開
JavaScript
tech

はじめに

皆さんこんにちは。

今回はJavaScriptのエラー処理についてご紹介します。

JavaScriptではエラーの対応にtry-catchとthrowを使います。これらを活用し、エラーが発生しても問題ないプログラムを作成します。

こんな人にオススメ

  • 初めてJavaScriptに触れる方
  • JavaScriptのエラー処理に関する基本的な文法を把握したい

初めて学習する方にも分かるように、丁寧に解説していきます。
プログラミングに慣れてきた方も、是非一度目を通していただけると嬉しいです。

😋 エラー処理を入れて異常終了しないようにします♪

try-catch

まずポイントをチェック

  • try-catchを使うことで異常終了を避けられる
  • tryブロックに本来やりたいことを記述
  • catchブロックにエラー時の対応を記述

try-catchはエラー発生時の対応を記述することができます。また、エラーによる異常終了を避け正常処理に復帰することができます。

try-catchの書き方

  • tryブロックには正常処理を記述
  • catchブロックにはエラー時の対応を記述
    • catchブロックの右側にはエラー情報をもつオブジェクトが代入される
    • エラーメッセージはこのオブジェクト内のmessageプロパティに格納されている
try {
    正常処理
} catch (e) {
    エラー処理
}

tryブロックには正常処理、つまり本来やりたいことを記述します。tryブロックだからと特別な記述は必要ないので、これまで記述してきた処理をまるっとtryブロックに移動させるイメージです。

catchブロックにはエラー時の対応を記述します。エラー時の対応内容は要件によって様々であるため、決まった記述はありません。

🍕 例えば、エラー発生時に画面にダイアログを表示し、ユーザーに次の行動を指示するといった使い方ができます。

最後に処理フローについて整理します。エラーが発生しなかった場合、catchブロックの処理は実行されません。tryブロックでエラーが発生した場合のみ、catchブロックが実行されます。catchブロック実行後は正常処理に復帰するので、catchブロック直後の処理から再開します。

try {
    console.log('やりたいこと');
    console.lo('エラーが起きる');
    console.log('実行されない');
} catch (e) {
    alert(e.message); // エラーが起きる と表示される
}

😋 try-catchがあれば異常終了を避けられます♪

throw

まずポイントをチェック

  • エラーを意図的に発生させられる
  • 独自のエラーメッセージを指定することができる

throwを使うと意図的にエラーを発生させることができます。

🍕 例えば、年齢が負の数になる場合はエラーとして扱うなど、想定外の結果になるような場合に意図的にエラーとして扱いたいことがあります。

throwの書き方

  • throwキーワードの後ろにnew Errorと記述することで、エラーを発生
  • new Errorの引数にエラーメッセージを指定
    • エラーメッセージは任意
throw new Error('エラーメッセージ');

try-catchで対応しない場合そのまま異常終了してしまうので、注意が必要です。

try {
    throw new Error('意図的なエラー');
} catch (e) {
    alert(e.message); // 意図的なエラー と表示される
}

😋 throwで任意のエラーを発生させられます♪

おわりに

皆さん、お疲れ様でした。
ここまでご覧いただき、ありがとうございました。

エラーの取り扱いについて確認していただきました。
エラー処理は初心者にとってはイメージしづらく、慣れるまで苦労するかもしれません。しかしながら想定外の事象でアプリが異常終了しないように、エラー処理についても理解を深めておきましょう。

😋 これからもプログラミング学習頑張りましょう♪

参考リンク集（MDN Web Docs のリンク）

try…catch：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/try…catch
Error：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Error
throw：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/throw

Discussion