【例外処理】JavaScript try-Catch文の基本と例外を対処する方法を解説します。

本記事は、「JavaScriptを使っているけど、エラーが起きるとどう対処すればいいか分からない…」と思いつつ

UIHACK 編集長

・例外処理を実現するための、try-catch文の書き方が分からない人
・予期しないエラーの対処法
・try-catch文の注意点

上記のような、悩みや疑問を持っている、プログラミングを勉強したい人向けに現役エンジニアが解説します。

この記事では、JavaScriptの「Try-Catch文」の基本的な使い方から、予期せぬエラーや例外に対処するポイントまでを詳しく解説します。

プログラミング未経験の方でも、読みやすい内容なので、本記事を読んで未来に向けて、一歩を踏み出しましょう。

それでは、ご一読ください！

JavaScriptの例外処理とは何ですか？

JavaScriptの例外処理は、プログラムの中で予期せぬエラーや問題が起きた時に、そのエラーをきちんと処理する方法です。プログラムを書く時に、いろんな理由でエラーが起きる可能性があるんです。

例えば、入力したデータがおかしい場合や、他のプログラムと通信できなかったり、うっかり変な値を使ったりすることが考えられます。

この例外処理をtry-catch文という形で行います。tryブロックには、エラーが起きるかもしれないコードを書きます。そして、もしエラーが起きたらcatchブロックの中に書いた処理が実行されるんです。これでエラーを検知して、適切な対応をすることができます。

JavaScriptのtry-catchの基本と使い方

プログラム内で予期せぬエラーや例外が発生した場合に、そのエラーを捕捉し、適切な処理を行うことができます。

UIHACK 編集長

以下に、JavaScriptのtry-catchの基本と使い方を説明します。

try-catchの実装の手順

try {
    // エラーが発生する可能性のあるコードを記述
    const salutation = "こんにちは、" + myname + "です。";
    console.log( salutation );
} catch(e) {
     // エラーが発生した場合の処理を記述
    console.log( e.message );
}

try-catchのコードの説明：

tryブロック内の最初の行では、定数salutationを定義しています。この行では、mynameという変数が使われていますが、myname変数が定義されていない場合、エラーが発生する可能性があります。

console.log(salutation);は、salutation変数の内容をコンソールに出力する行です。ただし、この行は、tryブロック内にあるため、もしエラーが発生した場合にはこの行までの処理が中断されます。

catchブロックは、tryブロック内でエラーが発生した場合に実行される部分です。eという変数は、エラーオブジェクトを受け取るための変数で、エラーに関する情報が格納されます。

console.log(e.message);は、エラーオブジェクトのmessageプロパティに格納されているエラーメッセージをコンソールに出力する行です。

JavaScriptのthrow文を使ったエラーハンドリング

throw文は、プログラムの実行中に意図的に例外を発生させるために使用されるJavaScriptの文です。throw文を使うことで、開発者が自らエラーを発生させ、例外処理のテストや特定の条件下での動作を確認できます。

throw文の実装の手順

function divideNumbers(a, b) {
    if (b === 0) {
        throw "ゼロで割ることはできません。";
    }
    return a / b;
}

try {
    const result = divideNumbers(10, 0);
    console.log(result); // この行は実行されません
} catch (error) {
    console.log("エラーが発生しました：", error); // "ゼロで割ることはできません。"と表示される
}

UIHACK 編集長

解説

この例では、divideNumbersという関数を定義しています。関数の引数bが0の場合に、throw文によって例外を発生させています。tryブロック内で関数を呼び出していますが、引数に0を渡しているため、例外が発生します。その後、catchブロックで例外がキャッチされ、エラーメッセージが表示されます。

try-catchの中にtry-catch？ネストされた例外処理について

JavaScriptでは、try-catchの中に別のtry-catchをネスト（入れ子にする）ことができます。ネストされた例外処理は、より複雑なエラーハンドリングを行う際に役立ちます。

ネストされた例外処理の実装の手順

try {
    try {
        const num = 10 / 0; // ゼロで割るエラーを意図的に発生させる
    } catch (innerError) {
        console.log('内側のエラーが発生しました：', innerError.message);
    }

    const name = undefined;
    const greeting = "こんにちは、" + name + "です。"; // nameが未定義のため、TypeErrorが発生する
    console.log(greeting);
} catch (outerError) {
    console.log('外側のエラーが発生しました：', outerError.message);
}

UIHACK 編集長

解説

この例では、ネストされたtry-catchを使って2つのエラーを処理しています。最初のtry-catchブロックでゼロ除算のエラーをキャッチしてメッセージを表示し、次に内側のtryブロックでname変数が未定義のために発生するTypeErrorをキャッチしてメッセージを表示しています。

JavaScriptのtry-catch-finally文の役割と使い方

try-catch-finally文は、エラーハンドリングに使用される構文で、予期せぬエラーに対処するための重要な仕組みです。tryブロック内のコードを評価し、エラーが発生した場合はcatchブロックでエラーを処理します。そして、最後にfinallyブロックが実行されます。finallyブロックはエラーの発生にかかわらず、必ず実行される部分です。

try-catch-finally文の実装の手順

function divideNumbers(a, b) {
    try {
        if (b === 0) {
            throw new Error("ゼロで割ることはできません。");
        }
        return a / b;
    } catch (error) {
        console.log("エラーが発生しました：", error.message);
    } finally {
        console.log("処理が終了しました。");
    }
}

console.log(divideNumbers(10, 2)); // 処理が終了しました。 5
console.log(divideNumbers(10, 0)); // エラーが発生しました： ゼロで割ることはできません。 処理が終了しました。

UIHACK 編集長

解説

この例では、divideNumbersという関数を定義しています。tryブロック内でゼロ除算のエラーを意図的に発生させ、catchブロックでエラーをキャッチしてメッセージを表示しています。また、finallyブロックでは、最後に「処理が終了しました。」と表示されます。

非同期処理とtry-catch文の挙動について

非同期処理とtry-catch文の挙動について説明します。

非同期処理とは

非同期処理は、JavaScriptにおいて非同期的に実行されるコードのことを指します。通常、JavaScriptはコードを上から順に実行するので、非同期処理を行わない場合、ある処理が完了するまで次の処理が実行されません。

しかし、非同期処理を使うことで、時間のかかる操作や待機が必要な操作を行いながら、他の処理を続けることができます。非同期処理の代表的な例は、タイマー処理、ネットワークリクエスト、ファイルの読み込みなどです。

非同期処理とtry-catch文の挙動

非同期処理では、try-catch文の挙動が少し異なります。try-catch文は、同期的な処理のエラーハンドリングに適していますが、非同期処理のエラーハンドリングには完全には適合しません。これは、非同期処理のコールバック関数は別のコンテキストで実行されるためです。

UIHACK 編集長

例えば、以下のような非同期処理の場合を考えてみます。

try {
    setTimeout(function () {
        const result = 10 / 0;
        console.log(result);
    }, 1000);
} catch (error) {
    console.log('エラーが発生しました：', error.message);
}

このコードでは、1秒後にエラーが発生するような非同期処理をsetTimeout関数で実行しています。しかし、try-catchブロックでエラーをキャッチすることはできません。

なぜなら、setTimeoutの中の処理は1秒後に実行され、すでにtry-catchブロックは実行が終わってしまっているためです。

非同期処理のエラーハンドリングの方法

非同期処理のエラーハンドリングでは、try-catch文を直接使う代わりに、非同期処理内でエラーをキャッチするための適切な手法を使用する必要があります。一般的な方法は、非同期処理内でエラーを発生させるときに、エラーオブジェクトをコールバック関数の引数として渡すことです。

UIHACK 編集長

例えば、上記の非同期処理を適切にエラーハンドリングする方法は次のようになります。

setTimeout(function () {
    try {
        const result = 10 / 0;
        console.log(result);
    } catch (error) {
        console.log('エラーが発生しました：', error.message);
    }
}, 1000);

JavaScriptの例外処理についての結論とまとめ

UIHACK 編集長

今回は、JavaScriptの例外処理についてご紹介しました。
それでは、最後にもう一度、おさらいしましょう。

もう一度、最初から【例外処理】JavaScript try-Catchでエラーや例外を対処する方法を解説します。を読む↑

JavaScriptの「配列の書き方がイマイチ分からない」方は次の記事もあわせて参照ください。

2023年7月18日 【初心者向け】JavaScript配列の基本と要素の追加・削除・検索方法まで解説する

JavaScriptの「条件分岐の文法や書き方についてイマイチ分からないと」方は次の記事もあわせて参照ください。

2023年7月18日 【もう迷わない】JavaScriptのif文と条件式の使い方！else文や三項演算子も解説してるよ