JavaScript エラー - throw、try、catch
try文はコードブロックのエラーをテストします。
catch文はエラーを処理します。
throw文はカスタムエラーを作成します。
finally文は try と catch 文の後で、例外が発生したかどうかに関係なく実行されます。
JavaScript エラー
JavaScript エンジンが JavaScript コードを実行すると、さまざまなエラーが発生します。
構文エラーである可能性があり、通常はプログラマーによるコーディングエラーやタイプミスです。
スペルミスや、言語にない機能(ブラウザの違いによる可能性があります)である可能性があります。
サーバーまたはユーザーからの誤った出力によって引き起こされるエラーである可能性があります。
もちろん、他の多くの予測できない要因によるものである可能性もあります。
JavaScript スロー(throw)エラー
エラーが発生すると、問題が発生した場合、JavaScript エンジンは通常停止し、エラーメッセージを生成します。
この状況を説明する技術用語は、JavaScript がスローするエラー。
JavaScript の try と catch
try文を使用すると、実行時にエラーテストを行うコードブロックを定義できます。
catch文を使用すると、try コードブロックでエラーが発生したときに実行されるコードブロックを定義できます。
JavaScript 文tryとcatchは対になって現れます。
構文
try {
...
} catch(e) {
...
} finally {
...
}
例
次の例では、try ブロックのコードにわざとタイプミスを入れています。
catch ブロックは try ブロック内のエラーをキャッチし、それを処理するコードを実行します。
例
var txt="";
function message()
{
try {
adddlert("Welcome guest!");
} catch(err) {
txt="このページにエラーがあります。\n\n";
txt+="エラーの説明:" + err.message + "\n\n";
txt+="[OK] をクリックして続行します。\n\n";
alert(txt);
}
}
試してみる »
finally 文
finally 文は、前の try と catch で例外が発生したかどうかに関係なく、そのコードブロックを実行します。
例
function myFunction() {
const messageElement = document.getElementById("p01");
const inputElement = document.getElementById("demo");
messageElement.innerHTML = "";
const rawValue = inputElement.value.trim();
try {
if (rawValue === "") {
throw new Error("入力は空にできません。数字を入力してください");
}
if (isNaN(rawValue)) {
throw new Error("有効な数字を入力してください(例:5、10.5、-3)");
}
const x = Number(rawValue);
if (!Number.isInteger(x)) {
throw new Error("整数を入力してください(小数はサポートされていません)");
}
if (x > 10) {
throw new Error(`数字 ${x}大きすぎます。入力してください5-10の間の数字`);
}
if (x < 5) {
throw new Error(`数字 ${x}小さすぎます。入力してください5-10の間の数字`);
}
if (x < 0) {
throw new Error("正の数を入力してください(負の数はサポートされていません)");
}
messageElement.innerHTML= `検証成功!入力した数字は:${x}`;
messageElement.style.color = "green";
console.log(`ユーザーが有効な数字を入力しました:${x}`);
} catch (err) {
messageElement.innerHTML= `エラー:${err.message}`;
messageElement.style.color = "red";
console.error("入力検証に失敗しました:", err.message);
} finally {
inputElement.value = "";
inputElement.focus();
}
}
Throw 文
throw 文を使用すると、カスタムエラーを作成できます。
正しい技術用語は、作成または例外をスローする(exception)。
throw を try と catch と一緒に使用すると、プログラムの流れを制御し、カスタムエラーメッセージを生成できます。
構文
例外は、JavaScript の文字列、数値、論理値、またはオブジェクトにすることができます。
例
この例では、入力変数の値を検出します。値が正しくない場合、例外(エラー)がスローされます。catch はこのエラーをキャッチし、カスタムエラーメッセージを表示します:
例
function myFunction() {
var message, x;
message = document.getElementById("message");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "値が空です";
if(isNaN(x)) throw "数字ではありません";
x = Number(x);
if(x < 5) throw "小さすぎます";
if(x > 10) throw "大きすぎます";
}
catch(err) {
message.innerHTML = "エラー:" + err;
}
}
試してみる »
getElementById 関数でエラーが発生した場合、上記の例でもエラーがスローされることに注意してください。
その他の拡張