JavaScript エラー処理

Volardev 編集部 April 18, 2026

1. try ステートメント

JavaScriptにおいて、try ステートメントは、プログラム全体を停止させることなく、コードの実行中に発生する可能性のあるエラー（例外：Exceptions）を処理するために使用されます。

try ステートメントは catch と組み合わせて動作します。
また、状況に応じて finally や throw と併用されることもあります。

1.1 Try ブロック

try ブロックには、エラーをスローする可能性のあるコードを記述します。
エラーが発生しなかった場合、catch ブロックはスキップされます。

構文：

try {
  // エラーが発生する可能性のあるコード
} catch (error) {
  // エラーを処理するコード
}

2. Catch ブロック

catch ブロックは、try ブロック内でエラーが発生した場合にのみ実行されます。
引数として渡されるエラーオブジェクトを参照することで、何が問題だったのか詳細を確認することができます。

構文：

try {
  // エラーが発生する可能性のあるコード
} catch (error) {
  // エラーを処理するコード
}

3. Finally ブロック（任意）

finally ブロックは、エラーが発生したかどうかに関わらず、try および catch ブロックの後に必ず実行されます。
ファイルのクローズやローディングインジケーターの停止など、クリーンアップタスクに一般的に使用されます。

構文：

try {
  // エラーが発生する可能性のあるコード
} catch (error) {
  // エラーを処理するコード
} finally {
  // 結果に関わらず、常に実行されるコード
}

4. JavaScript のエラー送出 (Throws Errors)

エラーが発生すると、通常、JavaScript は停止してエラーメッセージを生成します。
これを専門用語で「JavaScript が例外をスローする（エラーをスローする）」と言います。

実際には、JavaScript は name と message という2つのプロパティを持つ エラーオブジェクト（Error object） を作成します。

5. throw ステートメント

throw ステートメントを使用すると、独自のカスタムエラーを作成できます。
技術的には、あらゆるデータ型を例外としてスローすることが可能です。
例外は、JavaScript の 文字列（String）、数値（Number）、論理値（Boolean）、または オブジェクト（Object） にすることができます。

throw "値が大きすぎます";    // 文字列をスロー
throw 500;                // 数値をスロー

throw を try および catch と組み合わせて使用することで、プログラムのフローを制御し、カスタムエラーメッセージを生成できます。

5.1 入力バリデーションの例

この例では入力を検証します。値が不正な場合、例外（err）がスローされます。
スローされた例外（err）は catch ステートメントによって捕捉され、カスタムエラーメッセージが表示されます。

<!DOCTYPE html>
<html>
<body>

<p>5から10の間の数値を入力してください：</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">入力をテスト</button>
<p id="p01"></p>

<script>
function myFunction() {
  const message = document.getElementById("p01");
  message.innerHTML = "";
  let x = document.getElementById("demo").value;
  try {
    if(x.trim() == "") throw "空です";
    if(isNaN(x)) throw "数値ではありません";
    x = Number(x);
    if(x < 5) throw "低すぎます";
    if(x > 10) throw "高すぎます";
  } catch(err) {
    message.innerHTML = "入力は " + err;
  }
}
</script>

</body>
</html>

6. HTML バリデーション

上記のコードはあくまで一例です。
モダンなブラウザでは、HTML 属性で定義された定義済みのバリデーションルールを使用して、JavaScript と組み込みの HTML バリデーションを組み合わせて使用することが一般的です。

<input id="demo" type="number" min="5" max="10" step="1">

フォームのバリデーションについては、本チュートリアルの後半の章で詳しく解説します。

7. finally の使用例

finally ステートメントを使用すると、結果に関わらず try および catch の後にコードを実行できます。

構文：

try {
  // 実行を試みるコードブロック
} catch(err) {
  // エラーを処理するコードブロック
} finally {
  // try / catch の結果に関わらず実行されるコードブロック
}

実用例：

function myFunction() {
  const message = document.getElementById("p01");
  message.innerHTML = "";
  let x = document.getElementById("demo").value;
  try {
    if(x.trim() == "") throw "空です";
    if(isNaN(x)) throw "数値ではありません";
    x = Number(x);
    if(x > 10) throw "高すぎます";
    if(x < 5) throw "低すぎます";
  } catch(err) {
    message.innerHTML = "エラー: " + err + ".";
  } finally {
    // 成功・失敗に関わらず、入力フィールドをクリアする
    document.getElementById("demo").value = "";
  }
}