JavaScript Errors - Throw and Try to Catch

❮ 前章へ 次章へ ❯

try 文は、コードブロックのエラーをテストします。

catch 文は、エラー処理を行います。

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

finally 文は、結果にかかわらず、try および catch の後に実行するコードです。

エラーは起きます！

JavaScript コードを実行すると、いろいろなエラーが発生する可能性があります。

エラーは、プログラマが作り込んだコーディング・エラー、誤った入力によるエラー、予期しないその他のもので発生します。

例

次の例では、意図的にエラーを発生させるために adddlert というアラートを書いています：

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

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

JavaScript は、adddlert をエラーとして catch し、処理するため catch コードを実行しす。

JavaScript文は試してみるとペアになります：

JavaScript try と catch

try ステートメントは、実行中のエラーをテストするコードブロックの定義を可能にします。

catch ステートメントは、try ブロックでエラーが発生した場合に、実行するコードのブロックの定義を可能にします。

JavaScript 文は、try と catch をペアで使用します：

try {
    Block of code to try
}
catch(err) {
    Block of code to handle errors
}

JavaScript エラーのスロー

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

技術用語では、JavaScript は例外をスローする（エラーを投げる）と言います。

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

throw 文

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

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

例外には、JavaScript 文字列、数値、ブール値、またはオブジェクトを使用できます：

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

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

入力検証の例

次の例では、入力を調べます。値が間違っている場合は、例外（err）がスローします。

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

<!DOCTYPE html>
<html>
<body>

<p>Please input a number between 5 and 10:</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="message"></p>

<script>
function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try {
        if(x == "") 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 = "Input is " + err;
    }
}
</script>

</body>
</html>
Try it Yourself »

HTML 検証

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

現代のブラウザでは、HTML 属性で定義された定義済の検証ルールを使用して、 JavaScript と組込み HTML 検証の組み合わせを使用することがよくあります：

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

フォーム検証の詳細については、このチュートリアルの後の章をご覧ください。

finally 文

finally 文を使用すると、結果の如何にかかわらず try と catch の後にコードを実行できます：

try {
    Block of code to try
}
catch(err) {
    Block of code to handle errors
}
finally {
    Block of code to be executed regardless of the try / catch result
}

例

function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try {
        if(x == "") throw "is empty";
        if(isNaN(x)) throw "is not a number";
        x = Number(x);
        if(x > 10) throw "is too high";
        if(x < 5) throw "is too low";
    }
    catch(err) {
        message.innerHTML = "Error: " + err + ".";
    }
    finally {
        document.getElementById("demo").value = "";
    }
}
Try it Yourself »

Error オブジェクト

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

error オブジェクトには、name と message という2つの便利なプロパティがあります：

Error オブジェクト・プロパティ

プロパティ説明
nameエラー名を設定するか、設定内容を返す
messageSエラーメッセージ（文字列）を設定するか、設定内容を返す

Error 名の値

error name プロパティによって6種類の値を返すことができます：

Error 名説明
EvalErroreval() 関数でエラーが発生した
RangeError数値の範囲外エラーが発生した
ReferenceError不正な参照が発生した
SyntaxError構文エラーが発生した
TypeError型エラーが発生した
URIErrorencodeURI() のエラーが発生した

6 種類の値を以下に説明します。

Eval エラー

EvalError は、eval() 関数のエラーを表します。

JavaScript の新しいバージョンは EvalError をスローしません。代わりに SyntaxError が使われます。

Range エラー

RangeError は、有効な値の範囲外の数値を使用するとスローされます。

例：数値の有効桁数を500に設定することはできません。

例

var num = 1;
try {
    num.toPrecision(500);   // A number cannot have 500 significant digits
}
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}
Try it Yourself »

Reference エラー

ReferenceError は、宣言されていない変数を使用（参照）するとスローされます：

例

var x;
try {
    x = y + 1;   // y cannot be referenced (used)
}
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}
Try it Yourself »

Syntax エラー

SyntaxError は、構文エラーを持つコードを評価するとスローされます：

例

try {
    eval("alert('Hello)");   // Missing ' will produce an error
}
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}
Try it Yourself »

Type エラー

TypeError は、予想される型の範囲外の値を使用するとスローされます：

例

var num = 1;
try {
    num.toUpperCase();   // You cannot convert a number to upper case
}
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}
Try it Yourself »

URI エラー

URIError は、URI 関数で不正な文字を使用するとスローされます：

例

try {
    decodeURI("%%%");   // You cannot URI decode these percent signs
}
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}
Try it Yourself »

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

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

fileName (Mozilla)
lineNumber (Mozilla)
columnNumber (Mozilla)
stack (Mozilla)
description (Microsoft)
number (Microsoft)

すべてのブラウザで動作しませんので、公開用の Web サイトではこのプロパティを使用しないでください。


❮ 前章へ 次章へ ❯