【JavaScript】try-catch-finally の使い方と注意点

はじめに

JavaScriptでプログラムを書いていると、思わぬエラーに遭遇することがあります。

そんな場面で役立つのが、try-catch-finally 構文です。
「エラーが発生してもプログラム全体が止まらないようにする」 という意味でも、非常に大切な考え方です。

本記事では、

• try-catch の基本的な書き方
• finally が何のためにあるか
• よくあるミスや注意点

について解説します。

1. try-catch の基本構文

try {
  // エラーが起きるかもしれない処理
} catch (error) {
  // エラー発生時の対応
}

✅ 例

try {
  const data = JSON.parse('{ invalid json }');
  console.log(data);
} catch (error) {
  console.error('パースに失敗しました:', error.message);
}

ポイント：

• try の中でエラーが発生すると、処理は catch に移ります
• エラーを無視せず、console.error() などで状況をログに残すのが一般的です

2. finally の意味と使い方

finally は、エラーの有無にかかわらず最後に必ず実行されるブロックです。

try {
  // 何らかの処理
} catch (error) {
  // エラー時の処理
} finally {
  // 絶対に実行される処理
}

✅ 例

try {
  console.log('処理開始');
  throw new Error('テストエラー');
} catch (error) {
  console.warn('エラー発生:', error.message);
} finally {
  console.log('後処理を行います');
}

出力結果：

処理開始  
エラー発生: テストエラー  
後処理を行います

🔧 finally がよく使われる場面

✅ ローディング画面の表示解除（フロントエンドの場合）

非同期でデータを取得する処理では、処理の成功・失敗にかかわらず読み込み表示を解除したいことがあります。

setLoading(true);

try {
  const res = await fetch('/api/data');
  const data = await res.json();
  setData(data);
} catch (error) {
  console.error('データ取得に失敗しました');
} finally {
  setLoading(false); // 成功しても失敗しても、読み込み状態を終了
}

3. 非同期処理では try-catch が効かないケースに注意

❌ よくある誤解：「try に入れておけば安心」

try {
  setTimeout(() => {
    throw new Error('非同期エラー');
  }, 1000);
} catch (error) {
  console.log('エラー発生:', error.message); // ← 呼ばれない！
}

このコードでは catch は呼ばれません。

🔍 理由
setTimeout の中の処理は「後から実行される」非同期処理です。
この非同期処理が実行されるタイミングでは、既に try の範囲（スコープ）を抜けているため、エラーを捕まえることができません。

💬 補足：
try は「その場で実行される処理」にしか効果がありません。
setTimeout のような処理は、関数の外に「タイマーとして登録」され、後から別の場所で動くイメージです。

✅ 解決策：非同期処理には Promise の .catch() や async/await を使おう

✔ Promise の .catch()を使う例

new Promise((_, reject) => {
  setTimeout(() => {
    reject(new Error('非同期エラー'));
  }, 1000);
})
  .catch((error) => {
    console.error('失敗:', error.message);
  });

✔ async/await と try-catch の組み合わせ

async function fetchData() {
  try {
    const res = await fetch('/api/data');
    const data = await res.json();
    console.log('取得成功:', data);
  } catch (error) {
    console.error('データ取得に失敗:', error.message);
  }
}

4. まとめ

用語	役割
try	エラーが出るかもしれない処理を書く
catch	エラーが出たときの処理を書く
finally	エラーの有無に関係なく、最後に必ず実行される処理を記述する

おわりに

try-catch-finally は、エラー処理だけでなく「安全にコードを実行するための土台」 です。

• try-catch で想定外の挙動を防ぐ
• finally で必ず行いたい後処理を記述する

この構文を理解しておくことで、コードの信頼性と保守性をより高めることができます。

本記事が参考になれば幸いです。