こんにちはフロントエンドエンジニアのまさにょんです!
今回は、JavaScriptの例外処理 try-catch-finally文とthrow new Error()
の使い方について解説していきます。
目次
JavaScriptの例外処理 try-catch-finally文の使い方
JavaScript の例外処理 try-catch-finally文や throw Error の投げ方などは、基本の考え方を理解すれば簡単です。
ポイントは、次のとおりです。
- try-ブロックに通常の処理を記述する。
- try-ブロックの中で、失敗でエラーとして処理したい箇所では
throw new Error()
を使用する!
- try-ブロックの中で、失敗でエラーとして処理したい箇所では
- catch-ブロックに異常系の処理を記述する。
- finally-ブロックに 処理の「成功/失敗」(Success/Error)に関わらず、実行する処理を記述する!
try-catch-finally文をCodeで表現すると、次のとおりです。
let robotama = null
// 1. try-ブロック => 通常の処理を記述する
try {
// 1-1. 変数robotamaに、idプロパティは存在しない。
let id = robotama.id;
// 2. catch-ブロック => 異常系の処理インターファイスを記述する
} catch (error) {
// Error-Objectから、Error-メッセージだけを出力している
console.log(error.message);
// Error-Level で Error-Objectをそのまま出力している
console.error(error);
// 3. finally-ブロック => Success か Error かに関わらず、実行する処理を記述する!
// finally-ブロックの中に書いたコードは、 try および catch ブロックの後で常に実行されます。
} finally {
console.log('神聖グンマー帝国、万歳!');
}
出力結果は、次の画像のようになります。
console.log(error.message)
では、エラーメッセージをログ出力しており、
console.error(error)
では、エラーレベルでエラーインスタンスを出力しています。
throw new Error の使い方
throw new Error()
の使い方のSampleCodeは、次のとおりです。
条件文に合致しないものはthrow new Error()
で意図的に Errorを発生させています。
const SaitamaNoSpy = {
id: 1,
robotama: 'ロボ玉',
like: 'ひまたね',
yama: '富士山',
from: 'さいたまー共和国',
}
const Gunmar = {
id: 2,
robotama: 'ジョニー・ジョコビッチ (JoJo)',
like: '焼きまんじゅう',
yama: '赤城山',
from: '神聖グンマー帝国',
}
const GunmarCheck = (key, val) => {
// 1. try-ブロック => 通常の処理を記述する
try {
// 1-1. グンマーの民かどうかを試すブロック
if (key == 'from' && val !== '神聖グンマー帝国') {
const error1 = new Error('お前、グンマーじゃないな・・・');
alert(error1.message);
throw error1;
}
if (key == 'yama' && val !== '赤城山') {
const error2 = new Error('グンマー帝国の山は、赤城山だ!');
alert(error2.message);
throw error2;
}
if (key == 'like' && val !== '焼きまんじゅう') {
const error3 = new Error('故郷の味は、焼きまんじゅう!');
alert(error3.message);
throw error3;
}
// 1-2. 無事に、グンマーの民、Checkをクリアしたらここまで来れる!
// throw new Error で、catch-ブロックに飛ばなければ、ここの console.logが出力される。
console.log(key, val);
// 2. catch-ブロック => 異常系の処理インターファイスを記述する
} catch (error) {
// Error-Objectから、Error-メッセージだけを出力している
console.warn(error.message);
// Error-Level で Error-Objectをそのまま出力している
console.error(error);
}
}
for (const key in SaitamaNoSpy) {
const val = SaitamaNoSpy[key];
GunmarCheck(key, val);
}
for (const key in Gunmar) {
const val = Gunmar[key];
GunmarCheck(key, val);
}
出力結果は、次の画像のとおりです。
グンマーの民かどうかを試す try-ブロックで、条件文に引っかかったものは、throw new Error()
されており、
catch-ブロックで、Warnレベルや Errorレベルの出力を実行しています。
JavaScript書籍 Ver. 中級-上級者向け
JavaScript書籍 Ver. 初級者向け
プログラミング学習・エンジニア転職関連の情報
自宅で現役エンジニアから学べる『TechAcademy』 (エンジニア転職保証)
『GEEK JOBキャンプ』スピード転職コース(無料)
【IT道場】入校時0円! 就職目的プログラミングスクール
エンジニア転職なら100%「自社開発」求人に強い【クラウドリンク】
『techgym』 (Python特化・無料)
Twitterやってます!Follow Me!
神聖グンマー帝国の逆襲🔥
神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ!!!!!