Image

TECH I.S.

TECH I.S
TECH I.S
TECH I.S
TECH I.S

JavaScript エラー

Throw, and Try…Catch…Finally

このtryステートメントは、実行する(試行する)コードブロックを定義します。

このcatchステートメントは、エラーを処理するコードブロックを定義します。

このfinallyステートメントは、結果に関係なく実行するコードブロックを定義します。

このthrowステートメントは、カスタム エラーを定義します。

エラーが発生します！

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

エラーには、プログラマーによるコーディング エラー、間違った入力によるエラー、およびその他の予測できないものである可能性があります。

例

この例では、意図的にエラーを生成するために、「alert」のスペルを「adddlet」と間違えています。

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

JavaScriptはaddlertをエラーとしてキャッチし、キャッチコードを実行してそれを処理します。

JavaScriptのTry...Catch

このtryステートメントを使用すると、実行中にエラーをテストするコードブロックを定義できます。

このcatchステートメントを使用すると、tryブロックでエラーが発生した場合に実行されるコードのブロックを定義できます。

JavaScriptステートメントはtryとcatchペアで提供されます。

try {   <em>Block of code to try </em>} catch(<em>err</em>) {   <em>Block of code to handle errors </em>}


JavaScriptがエラーをスローする

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

これを専門用語で言うとJavascriptは例外をスローする(エラーをスローする)。


JavaScriptは実際にエラーオブジェクト次の名前とメッセージ、2つのプロパティがあります。




throw ステートメント

このthrowステートメントを使用すると、カスタムエラーを作成できます。

技術的には例外を投げることができます (エラーを投げる)。

例外はJavaScriptのString、Number、Boolean、Objectのいずれかになります。

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

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

入力検証の例

この例では、入力を調べます。値が間違っている場合は、例外(err)がスローされます。

例外(err)は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="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 = "Input is " + err;   } } </script> </body> </html>

HTML 検証

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

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

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

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

最終ステートメント

finallyステートメントを使用すると、結果に関係なく、tryとcatchの後にコードを実行できます。

構文

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

例

function myFunction() {   const message = document.getElementById("p01");   message.innerHTML = "";   let x = document.getElementById("demo").value;   try {     if(x.trim() == "") 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 = "";   } }

エラーオブジェクト

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

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

エラーオブジェクトのプロパティ
プロパティ 説明
nameエラー名を設定または返す
messageエラーメッセージ(文字列)を設定または返す

エラー名の値

エラー名プロパティによって、6つの異なる値を返すことができます。


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

6つの異なる値を以下に説明します。

Eval Error

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

JavaScriptの新しいバージョンはEvalErrorをスローしません。代わりにSyntaxErrorを使用してください。

Range Error

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

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

例

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

Reference Error

宣言されていない変数を使用(参照)するとReferenceErrorがスローされます。

例

let x = 5; try {   x = y + 1;   // y cannot be used (referenced) } catch(err) {   document.getElementById("demo").innerHTML = err.name; }

Syntax Error

構文エラーのあるコードを評価しようとすると、SyntaxErrorがスローされます。

例

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

Type Error

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

例

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

URI (Uniform Resource Identifier)Error

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

例

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

Non-Standard Error Object Properties

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

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

これらのプロパティを公開Webサイトで使用しないでください。すべてのブラウザーで機能するわけではありません。

Complete Error Reference

Errorオブジェクトの完全なリファレンスについては、完全な JavaScript エラー リファレンスを参照して下さい。



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細

チュートリアル