【イラスト付き】JavaScriptエラー処理【丁寧に解説】
はじめに
皆さんこんにちは。
今回は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で任意のエラーを発生させられます♪
おわりに
皆さん、お疲れ様でした。
ここまでご覧いただき、ありがとうございました。
エラーの取り扱いについて確認していただきました。
エラー処理は初心者にとってはイメージしづらく、慣れるまで苦労するかもしれません。しかしながら想定外の事象でアプリが異常終了しないように、エラー処理についても理解を深めておきましょう。
😋 これからもプログラミング学習頑張りましょう♪
Discussion