[JavaScript] これだけ押さえておけばOK！try-catchの便利な使い方まとめ9選

フロントエンド開発やバックエンド開発など、JavaScriptでコーディングする場合「try-catch」構文は必ずといっていいほど利用されています。

今回は、このtry-catch文の便利な使い方をご紹介します。

全ての例外をcatchする

みなさんがよく利用している一般的な使い方は下記の通りです。

try {
    // hogehoge
} catch {
    // hogehoge
}

これは、「構文エラー」や「ランタイムエラー」、「カスタムエラー」など全ての例外をキャッチします。

ただ、このままの状態だと実際の本番利用で問題が発生した場合、例外の特定が困難なケースも存在します。

特定の例外をcatchする

特定の例外をcatchしたい場合は、catch内で条件を指定します。

try {
    // hogehoge
} catch (error) {
    if (error instanceof TypeError) {
        // hogehoge
    }
}

または、switch文を利用して、条件のエラーにマッチした処理を行います。

try {
    // hogehoge
} catch (error) {
    switch (error.constructor) {
        case TypeError:
            break;
        case RangeError:
            break;
        default:
            break;
    }
}

error.constructorでは、中核となる7つのエラーを得ることができます。

• EvalError
  • グローバル関数「eval()」に関して発生するエラー
• InternalError
  • JavaScriptエンジンで内部エラーが発生した時に発生するエラー
• RangeError
  • 数値や引数が有効範囲外の場合に発生するエラー
• ReferenceError
  • 不正な参照先から値を取得した際に発生するエラー
• SyntaxError
  • 構文エラー
• TypeError
  • 変数や引数の型が有効ではない場合に発生するエラー
• URIError
  • encodeURI()やdecodeURI()に不正な引数が渡された際に発生するエラー

非同期処理時の例外をcatchする

非同期処理の例外をcatchする場合は、Promiseを使って例外処理を行う必要があります。

const sample = () => {
    return new Promise((resolve, reject) => {
        reject(new Error('Exception error occured.'));
    });
}

sample().catch(
    (error) => console.log(error.message)
);

Promiseでは、reject状態のオブジェクトの処理をcatch内で行うことができます。
ですので、try-catchをわざわざ書く必要性がありません。

非同期でエラーとなった場合はcatchメソッドで処理されます。

もし、try-catchで表現したい場合は、下記のようにasync/await を利用して処理します。

const sample = async () => {
    throw new Error('Exception error occured.');
}

const result = async () => {
    try {
        await sample();
        // hogehoge
    } catch (error) {
        // hogehoge
    }
};

result();

async/await を使って非同期処理をする場合は try-catchも非同期処理する必要があります。

finally を使ってcatch後の処理を行う

ファイル読み書きやDB読み書きなど、リソースのオープン/クローズを行う処理の場合、finally を利用してリソースをクローズします。

const browser = await puppeteer.launch();
try {
    // hogehoge
} catch(error) {
    // hogehoge
} finally {
    browser.close();
}

例外をThrowする

例外をスローする場合は下記のように行います。

function sample(b) {
    if (b === 1) {
        throw new Error("Error occured.");
    }
    return b;
}

上記は通常通り、スローするケースであり、try-catchのcatch側で取得したい場合は、下記のようになります。

try {
    // hogehoge
    throw new Error('Error occuerd.');
} catch (error) {
    console.log (error);
}

そもそも例外のスローはどういった時に使うかというと、任意のタイミングで特定のエラーを発生させたい場合に利用します。

try-catch内でThrowすると、catchの引数「error」にthrowで投げた値が格納されます。

例外エラーに対して付加情報を渡す

例外エラーに任意の値を渡すことができます。

try {
    const msg = 'A000001'
    const code = '403'
    throw new Error('Error occuerd.${msg}:${code}')
} catch (error) {
    // hogehoge
}

例外スローのメッセージ内に出力したい変数を盛り込みます。そうすることで、エラーがより特定しやすくなります。

例外の再スロー

入れ子となったtry-catch文に対して、子try-catch内の例外を親try-catch側に渡したい場合は、子catchブロックないでthrowしてあげます。

try {
    try {
        throw new Error('Exception error occured.');
    } catch (error) {
        throw error;
    }
} catch (error) {
    // hogehoge
}

上記のように入れ子側のcatchブロックでthrowしてあげることで、親側のcatchブロック側でエラーを拾ってくれます。

例外エラーをcatchして無視するテクニック

コードのデバッグ中など、例外エラーを無視したい場合があります。
その場合は、catchブロックの中身を「空」にするテクニックがあります。

try {
    // hogehogehoge
} catch {
    // 何も記述しない
}

基本的には、空にすることはおすすめしません。もし、本番稼働時にエラーが発生してもキャッチせず、その後の処理に影響が発生する可能性があります。

window.onerror を使ったcatch処理

try-catchを利用せずに例外をcatchする方法としてwindow.onerrorを使った方法があります。

このwindow.onerrorを用いること、スクリプト内でcatchできなかった例外を検知して通知してくれます。

window.onerror = function(message, source, lineNo, ColNo, error) {
    // hogehoge
}

• message : エラーメッセージ
• source : エラーが発生したファイルのURL
• lineNo : エラーが発生した箇所の行番号
• colNo : エラーが発生した箇所の列番号
• error : エラーオブジェクト

ただし、古いブラウザではエラーオブジェクトが取得できないので、注意が必要です。

最後に

今回は、JavaScriptでの例外処理を行うためのTipsを9選紹介しました。

これをすべて習得しておけば、基本的な例外処理はすべて問題ないと思います。

是非、ご参考までに。