【JavaScript】エラーハンドリング（try/catch/finally とエラースロー）

JavaScript

2023.07.202023.12.11

この記事は約4分で読めます。

記事内に広告が含まれています。

JavaScript で実装する際は、意図せぬエラーが起こりがちです。

try - catch 構文は多くの言語にありますが、もちろん JavaScript にも同じような書き方があります。

フロントでのエラーハンドリングはよく使うので構文を覚えておきましょう。

try/catch/finally の基本的な使い方
自分でエラーをスローする
try/catch/finally の使い所
参考リンク
おわりに

try/catch/finally の基本的な使い方

JavaScriptにおけるエラーハンドリングの中心的な概念は try/catch/finally です。

これは、プログラムの特定のセクションで発生する可能性のあるエラーを捕捉して処理するための構文です。

try ブロック内にはエラーが発生する可能性があるコードを書きます。

もしエラーが発生したら、処理はすぐに対応する catch ブロックに移行します。

最後に、finally ブロックのコードが実行されます。

try {
  console.log("これはtryブロックの中");
  throw new Error("エラー発生!"); // エラーを発生させる
} catch (error) {
  console.log("エラーをキャッチ:", error.message);
} finally {
  console.log("これはfinallyブロックの中");
}

上記のコードでは、try ブロック内でエラーをスローしています。

このエラーはすぐに catch ブロックで捕捉され、そのメッセージが表示されます。

最後に finally ブロックのメッセージが表示されます。

自分でエラーをスローする

JavaScriptでは throw ステートメントを使って自分でエラーをスローすることができます。

これにより、関数の呼び出し側に問題を通知したり、問題のある状況でプログラムの実行を停止させたりすることができます。

function divide(x, y) {
  if (y === 0) {
    throw new Error("0で割ることはできません!");
  }
  return x / y;
}

try {
  console.log(divide(10, 0));
} catch (error) {
  console.log("エラーをキャッチ:", error.message);
}

上記のコードでは、0での割り算を試みた場合にエラーをスローする divide 関数を定義しています。

このエラーは try/catch 構文を使用して捕捉され、そのメッセージが表示されます。

もちろんです、以下に「3. try/catch/finally の使い所」の章を追加します。

try/catch/finally の使い所

try/catch/finally 構文は、エラーが発生する可能性のあるコードの周りに置くことで、そのエラーを捉えて適切に処理することができます。

この構文の使い所はもちろん実装内容によりますが、一般的な使い所は覚えておいて損はないです。

外部リソースの利用 ファイルの読み書きやデータベースの操作、APIの呼び出し等、エラーが発生しやすい外部リソースとのやり取りによく使われます。
ユーザーからの入力の処理 ユーザー入力は予測不可能なことが多いです。もちろんバリデーションは実装するでしょうが、不正な値が入力された場合にエラーを捉えて適切に対応するために try/catch を使う場合があります。
特定の操作の成否の確認 一部の操作が失敗するとプログラム全体に影響を及ぼす場合、その操作を try ブロックに入れてエラーを捉え、適切なフォールバック動作を実行することがあります。

例えば、外部APIからデータを取得し、パースする処理はこのように try - catch 構文を使います。

async function fetchData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log('データの取得に失敗:', error.message);
  } finally {
    console.log('データ取得の試みが完了');
  }
}

fetchData('{ここに API Endpoint を指定}');

このコードでは、fetch 関数の呼び出しや response.json() の処理でエラーが発生する可能性があります。

このようなエラーは catch ブロックで捕捉し、適切にログに記録する必要がありますね。

最後に finally ブロックでメッセージがログに出力されます。

finallyは必ず必要というわけではないですが、絶対に実行したい処理（リソースの解放など）は確実に行えるようにしましょう。