例外処理のtry…catch構文 | async関数の実装 | JavaScript 超完全入門 基本から発展までのすべて

2024.09.21
スポンサーリンク
スポンサーリンク
amazon
スマイルSALE
--:--:--
～
ad. 価格範囲を指定して商品を探せます

例外処理のtry...catch構文とは？

try...catch構文は、JavaScriptでエラー（例外）が発生した場合に、そのエラーを受け取って処理するための構文です。

通常、エラーが発生するとプログラムはその場で停止してしまいます。しかし、try...catchを使用すると、エラー発生時にも適切な処理を行い、プログラムを安全に継続できます。

try...catchの基本構文

tryブロックにはエラーが発生する可能性のある処理を書き、catchブロックにはエラーが発生した場合の処理を書きます。

基本的な例


try {
    const result = unknownFunction();
    console.log(result);
} catch (error) {
    console.log("エラーが発生しました");
    console.log(error.message);
}

実行結果


エラーが発生しました
unknownFunction is not defined

この例では、存在しない関数を呼び出しているためエラーになりますが、catchブロックが実行されるため、プログラムは異常終了しません。

try・catchの流れ

構文 役割
try 通常の処理を書く。エラーが発生する可能性があるコードを実行する。
catch エラーが発生した場合だけ実行される。

async関数でのtry...catch

async関数では、await中にエラーが発生することがあります。そのような場合もtry...catchで簡単に処理できます。

fetchでエラー処理を行う例


async function fetchData() {
    try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();

        console.log(data);
    } catch (error) {
        console.log("データの取得に失敗しました");
        console.log(error.message);
    }
}

fetchData();

実行結果（通信エラーが発生した場合の例）


データの取得に失敗しました
Failed to fetch

通信エラーやネットワーク障害が発生した場合でも、catchで適切に処理できます。

Promise.allと組み合わせる例

複数の非同期処理を同時に実行する場合にも、try...catchを利用できます。

Promise.allを使った例


async function fetchMultipleData() {
    try {
        const [data1, data2] = await Promise.all([
            fetch("https://api.example.com/data1").then(res => res.json()),
            fetch("https://api.example.com/data2").then(res => res.json())
        ]);

        console.log(data1);
        console.log(data2);

    } catch (error) {
        console.log("データ取得に失敗しました");
    }
}

fetchMultipleData();

実行結果（成功時の例）


{ ...data1... }
{ ...data2... }

どれか1つのPromiseが失敗すると、catchが実行されます。

finallyを使う

finallyは、エラーの有無に関係なく必ず実行されます。後片付けなどの処理を書くときによく利用されます。

finallyの例


try {
    console.log("処理開始");
} catch (error) {
    console.log("エラー");
} finally {
    console.log("終了処理");
}

実行結果


処理開始
終了処理

エラーが発生した場合でも、finallyは必ず実行されます。

例外処理のベストプラクティス

ポイント 内容
必要な場所だけで使う すべての処理をtry...catchで囲むのではなく、エラーが発生する可能性が高い処理だけで使用する。
エラー内容を記録する error.messageやerrorを出力して原因を確認しやすくする。
ユーザーにも通知する 必要に応じて画面上に分かりやすいエラーメッセージを表示する。
finallyを活用する ファイルを閉じる処理や画面の更新など、必ず実行したい処理を書く。

まとめ

  • try...catchはエラーを安全に処理するための構文である。
  • tryに通常処理、catchにエラー処理を書く。
  • async/awaitと組み合わせることで非同期処理のエラーも簡単に扱える。
  • finallyを使うと、エラーの有無に関係なく処理を実行できる。
  • 適切な例外処理を行うことで、安定したプログラムを作成できる。

スポンサーリンク