JavaScriptの例外処理 try-catch-finally文とthrow Error の使い方

try-catch-finally

こんにちはフロントエンドエンジニアのまさにょんです!

今回は、JavaScriptの例外処理 try-catch-finally文とthrow new Error()の使い方について解説していきます。

JavaScriptの例外処理 try-catch-finally文の使い方

JavaScript の例外処理 try-catch-finally文や throw Error の投げ方などは、基本の考え方を理解すれば簡単です。

ポイントは、次のとおりです。

  1. try-ブロックに通常の処理を記述する。
    • try-ブロックの中で、失敗でエラーとして処理したい箇所ではthrow new Error() を使用する!
  2. catch-ブロックに異常系の処理を記述する。
  3. 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!

神聖グンマー帝国の逆襲🔥

神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ!!!!!

最近の投稿