JavaScript - エラーや例外の処理

こんにちは、未来のJavaScript魔法使いさんたち!? エキサイティングなエラーハンドリングの旅へようこそ。あなたの近所の親切なコンピュータ教師として、この冒険を案内します。しっかりと harnessを締めて、潜りましょう!

JavaScript - Error Handling

エラーとは?

想像して、あなたがケーキ?を焼いていると、間違って塩を使ってしまったらどうなるでしょう?それはエラーです!プログラミングにおいても、エラーは同じです - コードが実行されたときに予期せぬ問題が発生します。これらはタイポ、論理的なミス、または取り扱うデータに関連する問題などがあります。

以下は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