【JavaScript入門】例外処理文：try catch文

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

例外処理文：try catch文

　JavaScript には、通常の条件分岐（if、switch）以外に「例外処理文」を用いて処理の流れを制御する仕組みがあります。プログラムで予期しないエラーが発生したときに、そのまま停止させるのではなく、エラーメッセージを出力したり、別の処理を実行することで後続への影響を抑えるのが「try...catch 文」の目的です。さらに、自分で明示的にエラーを発生させる throw 文も存在し、柔軟なエラーハンドリングが可能です。ここでは、例外処理としてよく使われる書き方と仕組みを見ていきましょう。

１．try...catch 文

1.1．基本の構文

try {
  // ここに書いた処理の中で例外が起きるかもしれない
} catch (e) {
  // 例外が起きた場合、このブロックでエラー内容 e を扱う
}

try ブロック：例外が発生するかもしれない処理をまとめて書く。
catch ブロック：例外が実際に起きたときだけ実行される。変数 e にエラーの内容が渡される。

1.2．finally ブロック

finally ブロックを使うと、例外が起きようが起きまいが必ず実行したい処理を定義できます。

try {
  // 例外が起きるかもしれない処理
} catch(e) {
  // 例外が起きた場合
} finally {
  // 例外の有無にかかわらず必ず実行
}

たとえばファイルや通信を開いてから閉じる処理など、後片付け的な処理に使われます。

２．throw 文で例外を発生させる

2.1．throw の使い方

　throw 文を使うと、意図的に例外を発生させることができます。たとえば、不正な引数が渡された場合にエラーを投げたいときなどに使われます。

if (value < 0) {
  throw new Error('値が負の数です');
}

　throw 'エラーメッセージ' のように文字列を投げることも可能ですが、Error オブジェクトを使うほうがエラーの詳細を追跡しやすいです。

2.2．例外の伝播

　関数内で例外が起き、catch で捕まえられなかった場合、呼び出し元の関数に伝播します。そこでも捕まえないと、さらに上層へと伝わり、最終的にグローバルスコープで捕捉されなければプログラムが停止します。適切な場所で try...catch を使い、エラーをハンドリングすることが重要です。

３．サンプルコード（HTML + JavaScript）

　以下の例を「myTryCatchExample.html」というファイル名で保存し、ブラウザで開いて開発者ツールのコンソールをチェックしてください。

【myTryCatchExample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myTryCatchExample.html</title>
</head>
<body>
  <h1>例外処理 (try...catch) のサンプル</h1>
  <p>ブラウザの開発者ツールを開き、コンソールのメッセージを確認してください。</p>

  <script>
    // 1) 基本的な try...catch
    function showMessage(msg) {
      try {
        console.log('1つめの処理: ' + msg.toUpperCase());
      } catch(e) {
        console.log('エラー発生:', e);
      }
    }
    // 正常に文字列を渡す場合
    showMessage('Hello');
    // 故意にundefinedを渡してエラーを起こす場合
    showMessage(undefined);

    // 2) try...catch...finally の例
    function processData(data) {
      try {
        console.log('処理開始:', data);
        if (!data) {
          throw new Error('データが空です');
        }
        // 何らかの処理 (省略)
        console.log('処理完了');
      } catch (err) {
        console.log('例外発生:', err);
      } finally {
        console.log('処理の後片付け');
      }
    }
    processData('サンプルデータ');
    processData(null);

    // 3) 関数呼び出し時の例外の伝播
    function fnc3(value) {
      if (value < 0) {
        throw new Error('値が負の数になっています:' + value);
      }
      console.log('値は正常です:', value);
    }

    function fnc2(value) {
      // fnc3を呼び出すが、ここでは try...catch をしていない
      fnc3(value);
    }

    function fnc1(value) {
      try {
        fnc2(value);
      } catch(e) {
        console.log('fnc1でキャッチ:', e);
      }
    }

    // 実行例: 正常
    fnc1(10);
    // 実行例: 例外が起きる (value < 0)
    fnc1(-5);
  </script>
</body>
</html>

デバックコンソールの出力

1つめの処理: HELLO
1つめの処理: 
エラー発生: TypeError: Cannot read properties of undefined (reading 'toUpperCase')
処理開始: サンプルデータ
処理完了
処理の後片付け
処理開始: null
例外発生: Error: データが空です
処理の後片付け
値は正常です: 10
fnc1でキャッチ: Error: 値が負の数になっています:-5

まとめ

try...catch： try { ... } catch(e) { ... } で、try 内の処理中にエラーが起きたら catch の処理へ移る。
finally：例外の有無にかかわらず、必ず実行したい処理を finally { ... } に書ける。
throw：自分でエラーを起こしたいときに使う文。throw new Error(...) でエラーオブジェクトを投げるのが一般的。
例外の伝播：関数内で処理できなかったエラーは呼び出し元に伝わり、最終的にグローバルまで catch されなければプログラムが停止する。

　これらを上手に活用すれば、コードが思わぬエラーを起こしたときもプログラムを安全に停止させたり、エラー内容を詳しく報告したりできるようになります。