JavaScript - エラーや例外の処理
こんにちは、未来のJavaScript魔法使いさんたち!? エキサイティングなエラーハンドリングの旅へようこそ。あなたの近所の親切なコンピュータ教師として、この冒険を案内します。しっかりと harnessを締めて、潜りましょう!
エラーとは?
想像して、あなたがケーキ?を焼いていると、間違って塩を使ってしまったらどうなるでしょう?それはエラーです!プログラミングにおいても、エラーは同じです - コードが実行されたときに予期せぬ問題が発生します。これらはタイポ、論理的なミス、または取り扱うデータに関連する問題などがあります。
以下はJavaScriptにおけるエラーの簡単な例です:
console.log(Hello, World!);
このコードを実行するとエラーが発生します。なぜなら、テキストの周りにクォートを忘れたからです。JavaScriptは文字列をクォートで囲むことを期待しています。
エラー処理とは?
エラー処理は、 tightropeの上を歩いているときの安全網のようなものです。コード内でエラーが発生したときに、整个プログラムがクラッシュするのを防ぐ方法です。
try...catch...finally 文
try...catch...finally
文は、JavaScriptでエラーを処理する主要なツールです。 это как超级英雄三人組が救助に駆けつけるようなものです!?♀️?♂️?♀️
以下のように動作します:
try {
// エラーを引き起こす可能性のあるコード
let result = 10 / 0;
console.log(result);
} catch (error) {
// エラーを処理するコード
console.log("Oops! An error occurred:", error.message);
} finally {
// エラーが発生していようとどうでようと常に実行されるコード
console.log("This always runs!");
}
この例では:
-
try
ブロックにはエラーを引き起こす可能性のあるコードが含まれています(0で除算)。 - エラーが発生した場合、
catch
ブロックがそれをキャッチして優雅に処理します。 -
finally
ブロックは、エラーが発生していようとどうでようと常に実行されます。
throw 文
時々、自分でカスタムエラーを作成したいことがあります。そのときに便利なのが throw
文です。これは、試合でフールを宣告するリフレのようです!?
以下はその例です:
function checkAge(age) {
if (age < 0) {
throw new Error("Age cannot be negative!");
}
console.log("Age is valid:", age);
}
try {
checkAge(-5);
} catch (error) {
console.log("Caught an error:", error.message);
}
このコードでは、負の年齢を使用しようとするとカスタムエラーがスローされます。そのエラーは catch
ブロックで処理されます。
onerror イベントハンドラプロパティ
onerror
イベントハンドラは、あなたのJavaScriptアプリケーション全体の守り手のようなものです。コードのどこで発生したエラーでもキャッチします。
以下のように使用できます:
window.onerror = function(message, source, lineno, colno, error) {
console.log("An error occurred:");
console.log("Message:", message);
console.log("Source:", source);
console.log("Line:", lineno);
console.log("Column:", colno);
console.log("Error object:", error);
return true;
};
// これは onerror ハンドラをトリガーします
nonExistentFunction();
このコードは、アプリケーション内で発生したすべての未捕捉エラーをキャッチする全局的なエラーハンドラを設定します。
JavaScript エラーオブジェクトのリファレンス
JavaScriptはいくつかのビルトインエラータイプを提供しています。以下に便利な表形式で示します:
エラータイプ | 説明 |
---|---|
Error | ゼネリックなエラータイプ |
SyntaxError | コードにシンタックスエラーがある場合に発生 |
ReferenceError | 存在しない変数を参照した場合に発生 |
TypeError | 値が期待される型ではない場合に発生 |
RangeError | 数値が許容範囲外にある場合に発生 |
URIError | 不正なURI関数を使用した場合に発生 |
EvalError |
eval() 関数に関連する場合に発生 |
以下はこれらのエラーがどのように発生するかの例です:
try {
// SyntaxError
eval("Hello World");
// ReferenceError
console.log(undefinedVariable);
// TypeError
null.f();
// RangeError
let arr = new Array(-1);
// URIError
decodeURIComponent("%");
} catch (error) {
console.log(error.name + ": " + error.message);
}
これらの行は異なる種類のエラーをそれぞれスローし、私たちの catch
ブロックがそれを処理します。
そして、ここまでが、私の亲爱的な生徒たちのJavaScriptエラーハンドリングの旅です。忘れてはならない、エラーはあなたの敵ではありません - それはコードを改善するための貴重なフィードバックです。エラーを受け入れ、学び、すぐにプロのようにエラーを処理するようになるでしょう!?
codingを続け、学び続け、そして楽しみながら進んでください!次のレッスンで又会いましょう!?
Credits: Image by storyset