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 { //1. 空かどうかを確認 if (rawValue === "") { throw new Error("入力は空にできません。数字を入力してください"); } //2. 有効な数字かどうかを確認 if (isNaN(rawValue)) { throw new Error("有効な数字を入力してください(例:5、10.5、-3)"); } //数字に変換 const x = Number(rawValue); //3. 整数かどうかを確認(必要に応じて調整可能) if (!Number.isInteger(x)) { throw new Error("整数を入力してください(小数はサポートされていません)"); } //4. 数値の範囲を確認(必要に応じて調整可能) if (x > 10) { throw new Error(`数字 ${x}大きすぎます。入力してください5-10の間の数字`); } if (x < 5) { throw new Error(`数字 ${x}小さすぎます。入力してください5-10の間の数字`); } //5. 負の数の特別なケースを確認 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 と一緒に使用すると、プログラムの流れを制御し、カスタムエラーメッセージを生成できます。

構文

throw exception

例外は、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 関数でエラーが発生した場合、上記の例でもエラーがスローされることに注意してください。

その他の拡張