こんにちは。フロントエンドの現場で、日々コードと格闘しているチーフアーキテクトです。
JavaScriptの世界へようこそ！プログラミングを始めると、画面に真っ赤な文字で「Uncaught TypeError…」なんてエラーが出て、ドキッとした経験はありませんか？
「何が起きたの！？私のコード、壊れちゃった？」と焦るかもしれませんが、大丈夫。エラーは「ここを直せばもっと良くなるよ」というJavaScriptからの親切なヒントなんです。
今日は、そのエラーの種類を見分ける「名探偵のスキル」を、一緒に身につけていきましょう。
—
エラーは「お買い物トラブル」で考えると分かりやすい
例えば、あなたがスーパーに買い物に行ったとします。レジでお金を払おうとしたら、こんなことが起きるかもしれません。
- TypeError: 「えっ、財布だと思ったものが、実はただの紙切れだった！」（期待していたデータ型と違った）
- ReferenceError: 「あれ、財布どこ置いたっけ？見当たらない…」（変数名が間違っている、または定義されていない）
JavaScriptにも、こうして「何が原因で困っているか」を教えてくれるErrorオブジェクトというものが存在します。
しかし、コードを書いていると「このエラーは、プログラムのバグかな？ それとも、ユーザーが入力ミスをしただけかな？」と、エラーの種類によって対応を変えたい場面が出てきます。そんなとき、どうやって「エラーの種類」を見抜けばいいのでしょうか？
—
犯人を特定する2つの武器：「instanceof」と「name」
JavaScriptには、エラーの種類を突き止めるための2つの強力なツールがあります。
1. `instanceof`（「あなたは誰？」と聞く）
これは、「このエラーは、〇〇というグループ（クラス）の一員ですか？」と問いかける方法です。
try {
// わざとエラーを起こしてみる
const result = 10 / y; // yは定義されていないのでReferenceErrorが起きる
} catch (e) {
// e はエラーの中身が入っている箱です
if (e instanceof ReferenceError) {
console.log(“あ！変数の名前を確認してみてください。どこかで見失っていませんか？”);
} else if (e instanceof TypeError) {
console.log(“型が合っていないみたい。数字のはずが文字になっていませんか？”);
} else {
console.log(“原因不明のトラブルです。深呼吸してコードを見直しましょう！”);
}
}
「あなたはReferenceErrorというグループの一員ですか？」と確認するイメージですね。これが最も確実な判定方法です。
2. `name` プロパティ（「名札を見る」）
もう一つは、エラーが持っている「名札」を見ることです。すべてのエラーには `name` というプロパティがあり、そこに「私はTypeErrorです」「私はReferenceErrorです」という文字列が書かれています。
try {
// わざとエラーを発生
throw new TypeError(“数字じゃないと計算できないよ！”);
} catch (e) {
// e.name を見るだけで、犯人の名前が分かります
console.log(“エラーの種類は: ” + e.name); // “TypeError” と表示される
if (e.name === “TypeError”) {
console.log(“型チェックをもう一度やりましょう！”);
}
}
—
どっちを使えばいいの？
結論から言うと、基本は `instanceof` を使うのがプロの流儀です。
なぜなら、`instanceof` は「そのエラーがどんなルーツを持っているか」まで含めてチェックしてくれるからです。例えば、自分で独自の「お買い物エラー」を作ったときも、`instanceof` なら正しく親分（Errorクラス）まで辿って判定してくれます。
逆に、`name` プロパティは「とりあえずデバッグで名前が知りたい」という時にサッと確認するのに便利です。
—
最後に：エラーは「成長のきっかけ」
初心者の方ほど、エラーが出ると「自分がダメなんだ」と落ち込んでしまいがちです。でも、安心してください。世界中のベテランエンジニアも、毎日エラーに悩まされています。
「あ、またReferenceErrorだ。おっちょこちょいだな自分！」と、エラーと少し距離を置いて、名探偵のように観察してみてください。エラーを判定して切り分けられるようになると、JavaScriptという相棒との距離がぐっと縮まりますよ。
もし次に赤文字が出たら、「お、ヒントをくれたんだな」と深呼吸して、`instanceof` で正体を暴いてみてくださいね。
あなたのコードが、今日も健やかに動きますように！応援しています。
コメント