コードラボJP
プライバシーポリシー お問い合わせ サイトマップ

JavaScript エラー処理

Throw, and Try…Catch…Finally

try文は、実行するコードブロック（試す）を定義します。

catch文は、任意のエラーを処理するコードブロックを定義します。

finally文は、結果に関係なく実行するコードブロックを定義します。

throw文は、カスタムエラーを定義します。

エラーは起こるものとして受け入れる

JavaScriptコードを実行する際、さまざまなエラーが発生する可能性があります。

エラーは、プログラマーが作成したコーディングエラー、誤った入力によるエラー、その他予測不可能な要因によるものがあります。

Example

この例では、意図的にエラーを発生させるために「alert」を「adddlert」と誤って綴りました:


<p id="demo"></p>

<script>
try {
  adddlert("Welcome guest!");
}
catch(err) {
  document.getElementById("demo").innerHTML = err.message;
}
</script>

JavaScriptはadddlertをエラーとしてキャッチし、catchブロックでそのエラーを処理します。

JavaScriptのtryとcatch

try文は、実行中にエラーが発生するかどうかをテストするためのコードブロックを定義します。

catch文は、tryブロックでエラーが発生した場合に実行するコードブロックを定義します。

JavaScriptのtryとcatchは以下のようにペアで使用されます:


try {
  // 試すコードブロック
}
catch(err) {
  // エラーを処理するコードブロック
}

JavaScriptでのエラーのスロー

エラーが発生すると、JavaScriptは通常、エラーメッセージを生成して停止します。

これを技術的には「例外をスローする」と言います。

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

throw文

throw文を使用すると、カスタムエラーを作成できます。

技術的には、例外（エラー）をスローすることができます。


throw "Too big";    // throw a text
throw 500;          // throw a number

tryとcatchと一緒にthrowを使用すると、プログラムのフローを制御し、カスタムエラーメッセージを生成できます。

入力検証の例

この例では入力を検証します。値が間違っている場合、例外（err）がスローされます。

catch文で例外（err）をキャッチし、カスタムエラーメッセージを表示します:


<!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 "empty";
    if(isNaN(x)) throw "not a number";
    x = Number(x);
    if(x < 5) throw "too low";
    if(x > 10) throw "too high";
  }
  catch(err) {
    message.innerHTML = "入力は " + err + " です";
  }
}
</script>

</body>
</html>

HTMLの検証

上記のコードは単なる例です。

現代のブラウザは、しばしばJavaScriptと組み込みのHTML検証を組み合わせて使用し、HTML属性で定義された事前定義の検証ルールを使用します:


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

フォームの検証については、このチュートリアルの後の章で詳しく説明します。

finally文

finally文は、tryとcatchの結果にかかわらず、最終的に実行したいコードを定義します:


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

エラーオブジェクト

JavaScriptには組み込みのエラーオブジェクトがあり、エラー発生時にエラー情報を提供します。

エラーオブジェクトには、nameとmessageという2つの有用なプロパティがあります。

エラーオブジェクトのプロパティ

プロパティ 説明
name エラーの名前を設定または返します
message エラーメッセージを設定または返します（文字列）

Error Nameの値

Error Name 説明
EvalError eval()関数でエラーが発生しました
RangeError 範囲外の数値が使用されました
ReferenceError 未宣言の変数が使用されました
SyntaxError 構文エラーが発生しました
TypeError 不適切な型のオペランドまたは引数が使用されました
URIError encodeURI()でエラーが発生しました

これら6つの異なる値については以下で説明します。

非標準のエラーオブジェクトプロパティ

MozillaとMicrosoftは、いくつかの非標準のエラーオブジェクトプロパティを定義しています:

  • fileName（Mozilla）
  • lineNumber（Mozilla）
  • columnNumber（Mozilla）
  • stack（Mozilla）
  • description（Microsoft）
  • number（Microsoft）

これらのプロパティはすべてのブラウザで動作しない可能性があるため、公開ウェブサイトでの使用は避けてください。