JavaScript - try...catch: 初心者のためのエラーハンドリングのマスター

こんにちは、将来のプログラマーたち！今日は、JavaScriptのエラーハンドリングの世界に楽しい旅に出発しましょう。プログラミングが新しいことでも心配しないでください - 私は多くの例と説明を用いて、ステップバイステップでガイドします。このチュートリアルの終わりまでに、プロのようにエラーをキャッチできるようになるでしょう！

JavaScript try...catch 文

自転車に乗ることを学ぶことを思い浮かべてください。数回転ぶれるかもしれませんが、それも大丈夫です - 立ち上がって再び試みます。プログラミングでは、try...catch 文を使って同様なことをします。私たちは「試み」ていくコードを「実行」し、それが「倒れる」（エラーをスローする）と、「キャッチ」して優雅に処理します。

簡単な例を見てみましょう：

try {
// エラーを引き起こす可能性のあるコード
console.log(nonExistentVariable);
} catch (error) {
// エラーを処理するコード
console.log("おっと！エラーが発生しました:", error.message);
}

この例では、存在しない変数をログに出力しようとしています。プログラムがクラッシュする代わりに、catch ブロックがエラーをキャッチし、親切なメッセージをログします。

JavaScript try...catch...finally 文

時々、エラーが発生したかどうかに関わらず実行したいコードがあります。その場合、finally ブロックが役立ちます。まるで、「何が起ころうとも、これをやるんだ！」と言っているようなものです。

try {
console.log("ゼロで除算を試みます！");
let result = 10 / 0;
console.log("結果:", result);
} catch (error) {
console.log("ああ！エラーが発生しました:", error.message);
} finally {
console.log("これはエラーがあってもなくても常に実行されます！");
}

この例では、ゼロで除算することがエラーを引き起こしますが、finally ブロックは依然として実行されます。

JavaScript Throw 文

時々、私たち自身がエラーを作成したい时候があります。そのためには throw 文を使います。まるで、試合の判定官として、不正を见つけたら即座に反則を宣告するようなものです。

function checkAge(age) {
if (age < 0) {
throw new Error("年齢は負数にできない！");
}
console.log("年齢は有効です:", age);
}

try {
checkAge(-5);
} catch (error) {
console.log("エラーをキャッチしました:", error.message);
}

ここでは、負の年齢を使用しようとすると自分でエラーをスローしています。

Try ブロックのネスト

人形のネストのように、try...catch ブロックを互いにネストすることができます。コードの異なるレベルでエラーを処理したいときにこれは便利です。

try {
try {
throw new Error("oops！");
} catch (innerError) {
console.log("内部キャッチ:", innerError.message);
throw innerError; // エラーを再スロー
}
} catch (outerError) {
console.log("外部キャッチ:", outerError.message);
}

この例では、内部ブロックでエラーをキャッチし、ログし、それを外部ブロックに再スローしています。

エラーの再スロー

時々、エラーをキャッチして何かを行い、それを他のところで処理されるように再スローしたいときがあります。これをエラーの再スローと言います。

function doSomethingRisky() {
throw new Error("危険、ウィル・ロビンソン！");
}

try {
doSomethingRisky();
} catch (error) {
console.log("エラーをログ:", error.message);
throw error; // エラーを再スロー
}

ここでは、エラーをキャッチし、ログし、それを再スローしてコードの他の部分で処理させるいます。

条件付き Catch ブロック

時々、異なる種類のエラーを異なる方法で処理したいときがあります。キャッチブロックでエラーの種類をチェックすることでそれを行うことができます。

try {
let randomNumber = Math.random();
if (randomNumber < 0.5) {
throw new TypeError("型エラー！");
} else {
throw new RangeError("範囲エラー！");
}
} catch (error) {
if (error instanceof TypeError) {
console.log("TypeErrorを処理:", error.message);
} else if (error instanceof RangeError) {
console.log("RangeErrorを処理:", error.message);
} else {
console.log("未知のエラー:", error.message);
}
}

この例では、異なる種類のエラーを異なる方法で処理しています。

JavaScript try...catch と setTimeout() メソッド

非同期コードを扱う際、エラーハンドリングは厄介です。setTimeout() 函数でのエラー処理を見てみましょう。

try {
setTimeout(() => {
throw new Error("非同期エラー！");
}, 1000);
} catch (error) {
console.log("このブロックはエラーをキャッチしません！");
}

// 正しい方法：
setTimeout(() => {
try {
throw new Error("非同期エラー！");
} catch (error) {
console.log("非同期エラーをキャッチ:", error.message);
}
}, 1000);

最初の試みは動作しません。なぜなら、エラーがスローされるのは try...catch ブロックが実行終了した後だからです。二番目の試みは正しくエラーをキャッチします。

Promise に基づくエラー

Promise を扱う際、.catch() を使ってエラーを処理します。これは、非同期操作のキャッチブロックと似ています。

function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error("データの取得に失敗しました"));
}, 1000);
});
}

fetchData()
.then(data => console.log("データ:", data))
.catch(error => console.log("エラー:", error.message));

この例では、データの取得に失敗し、その結果としてエラーをキャッチしています。

JavaScript でのエラーの種類

JavaScriptにはいくつかのビルトインエラータイプがあります。以下にそれらをまとめた表を示します：

エラータイプ	説明
Error	一般的なエラータイプ
SyntaxError	コードに構文エラーがある場合に発生
ReferenceError	存在しない変数を参照した場合に発生
TypeError	値が期待される型とは異なる場合に発生
RangeError	値が期待される範囲外にある場合に発生
URIError	グローバルなURI処理関数を正しく使わない場合に発生
EvalError	eval() 関数を正しく使わない場合に発生

これらのエラータイプを理解することで、より正確なエラーハンドリングコードを書くことができます。

そして、ここまででJavaScriptのエラーハンドリングのクラスを終了しました。エラーはあなたの敵ではありません - それは、より良い、より頑丈なコードを書くための貴重なフィードバックです。練習を続け、好奇心を持ち、ハッピーコーディングを！

Credits: Image by storyset