JavaScriptのエラーと例外の基本！初心者がよく出会うエラーとその対処法まとめ

1. エラーと例外って何？「動かない」の正体を知ろう

1. エラーと例外って何？「動かない」の正体を知ろう

プログラミングをしていると必ず遭遇するのが「動かない！」という瞬間です。これには大きく分けて「エラー（文法ミス）」と「例外（実行中のトラブル）」の2種類があります。まずはこの違いを、料理に例えて超シンプルに理解しましょう。

1-1. 文法エラー（Syntax Error）：書くルールを間違えた時

「エラー」は、JavaScriptの書き方のルール（文法）を間違えている状態です。料理でいうと「レシピの日本語が読み取れない」ようなもので、実行する前の段階でブラウザが「意味がわかりません！」と処理を止めてしまいます。

// カッコを閉じ忘れるなど、書き方がおかしい例
console.log("こんにちは"

Uncaught SyntaxError: missing ) after argument list
（訳：カッコを閉じ忘れていますよ！）

1-2. 例外（Exception）：実行中に予想外のことが起きた時

「例外」は、書き方は合っているけれど、動かしてみたら問題が発生した状態です。料理でいうと「レシピ通りに『卵を割る』という工程に進んだけど、冷蔵庫に卵がなかった」というケースです。プログラムの文法自体は正しいので動こうとしますが、途中で「これ以上進めない！」と止まってしまいます。

// 定義されていない（存在しない）変数を使おうとした例
let total = 100 + applePrice;

Uncaught ReferenceError: applePrice is not defined
（訳：applePriceという変数はどこにも見当たりません！）

どちらも「プログラムが止まる」という結果は同じですが、「書いた瞬間にダメなのがエラー」、「動かしてみて困るのが例外」と覚えておくと、この後のデバッグ（修正作業）がぐっとスムーズになります。まずはこの2つを恐れず、解決のヒントとして活用していきましょう。

2. よくある構文エラー（SyntaxError）

2. よくある構文エラー（SyntaxError）

SyntaxError（シンタックスエラー）とは、プログラムの「文法」が間違っている際に出るエラーです。人間でいう「てにをは」の間違いや、綴りミスのようなものだと考えてください。JavaScriptのルールに沿っていない記述があると、ブラウザがコードを読み取れずに停止してしまいます。

代表的なエラーの例：閉じカッコの忘れ

初心者が最も陥りやすいのが、カッコ () や波カッコ {} の閉じ忘れです。例えば、以下のコードを見てみましょう。

console.log("こんにちは";
// 本来は console.log("こんにちは"); と書くべき

この場合、デベロッパーツールのコンソールには、以下のようなエラーメッセージが表示されます。

Uncaught SyntaxError: missing ) after argument list
（引数リストの後に ) がありません）

SyntaxErrorを解決するコツ

構文エラーが発生したときは、「エラーメッセージの行番号」を真っ先に確認しましょう。ブラウザは「ここがおかしいよ！」と親切に教えてくれます。 また、セミコロン（;）の付け忘れや、全角スペースが混じっているだけでもこのエラーは発生します。エラーが出たら、まずは「綴り」と「記号のペア」が正しいか、落ち着いて見直すのが解決への近道です。

3. 参照エラー（ReferenceError）の原因と解決策

3. 参照エラー（ReferenceError）の原因と解決策

JavaScriptの開発で頻繁に遭遇するReferenceError（リファレンスエラー）は、一言で言うと「パソコンが知らない名前を呼び出された時にパニックになっている状態」です。存在しない変数や、定義される前の関数を使おうとした時に発生します。

よくあるエラーの例

例えば、プログラミング初心者がやりがちなのが、箱（変数）を用意する前に、その中身を見ようとしてしまうケースです。

// 「user」という箱を作っていないのに、中身を表示しようとする
console.log(user);

このコードを実行すると、コンソールには以下のようなエラーメッセージが表示されます。

Uncaught ReferenceError: user is not defined
（アンコウト・リファレンスエラー：userは定義されていません）

解決する方法（対処法）

解決策はシンプルです。プログラムに対して「今からこの名前を使いますよ」と事前に教えてあげる（定義する）だけです。let や const を使って、呼び出す前に宣言を行いましょう。

// 1. まずは「user」という変数を作る
let user = "田中さん";

// 2. その後に呼び出す
console.log(user); 

また、意外と多いのが「スペルミス」です。例えば、変数を userName と定義したのに、呼び出す時に username （nが小文字）にしてしまうと、JavaScriptは「そんな名前は知らない！」とエラーを出してしまいます。エラーが出た時は、まずは綴りが合っているか、宣言する順番が逆になっていないかをチェックしてみましょう。

4. 型エラー（TypeError）

4. 型エラー（TypeError）

TypeError（タイプエラー）は、JavaScriptのプログラムを実行中に「値の種類（型）が、期待されている操作と合っていない」ときに発生するエラーです。人間で例えるなら、「食べられない石を、食べ物だと思って飲み込もうとした」ような状態を指します。

初心者の方が最も遭遇しやすい具体例を見てみましょう。

let myScore = 100;
// 数字（Number型）に対して、文字列用の命令（メソッド）を使おうとしている
myScore.toUpperCase();

このコードを実行すると、コンソールには以下のようなエラーメッセージが表示されます。

Uncaught TypeError: myScore.toUpperCase is not a function

【なぜエラーになるの？】
toUpperCase() は「文字を大文字にする」という命令ですが、JavaScriptでは数字に対してこの命令を使うことはできません。プログラムは「数字の中にそんな機能はないよ！」とパニックを起こして止まってしまうのです。

【よくある発生パターンと対処法】
このエラーを解決するには、typeof演算子を使って変数の正体を確認するのが一番の近道です。

let myScore = 100;
console.log(typeof myScore); // "number" と出力される

// もし文字列として扱いたいなら、先に変換が必要
let textScore = String(myScore);
console.log(textScore.toUpperCase()); // これならエラーにならない！

「この値は、今どんな形（型）をしているのか？」を常に意識することで、TypeErrorの多くは未然に防ぐことができます。

5. 範囲エラー（RangeError）

5. 範囲エラー（RangeError）

RangeError（レンジエラー）は、数値が許容される範囲を超えていたり、設定できない値を指定したりしたときに発生するエラーです。JavaScriptでは、扱える数値の大きさや、配列の長さなどに決まりがあるため、それを無視するとこのエラーに遭遇します。

例えば、プログラミング未経験の方が陥りやすいケースとして、「配列（データの入れ物）の長さにマイナスの数字を指定してしまう」例を見てみましょう。

// 配列の長さに -1 を指定（マイナスは指定できない）
let arr = new Array(-1);

このコードを実行すると、コンソールには以下のようなエラーメッセージが表示されます。

RangeError: Invalid array length
（レンジエラー：無効な配列の長さです）

他にも、再帰的な処理（自分自身を呼び出し続ける処理）を無限に繰り返してしまった場合などに「Maximum call stack size exceeded」というメッセージとともに RangeError が出ることがあります。

初心者の方は、まずは「数字の使い方がルール外なんだな」と理解するだけで、デバッグ（修正作業）がぐっと楽になりますよ。

6. 例外処理 try...catch の使い方

6. 例外処理 try...catch の使い方

JavaScriptでプログラムを書いていると、どうしても避けられない「実行時のトラブル」があります。例えば、外部から取得したデータが壊れていたり、ネットワークの状態が悪かったりする場合です。通常、エラーが起きるとプログラムはその場で強制終了してしまいますが、try...catch（トライ・キャッチ）を使えば、エラーをスマートに受け止めて処理を継続させることができます。

これは例えるなら、「転ぶかもしれない道を走るときに、あらかじめプロテクターを付けておく」ような仕組みです。プログラミング未経験の方でも分かりやすいよう、身近な「データの読み込み」を例に見てみましょう。

try {
    // 1. まずはここを実行してみる（挑戦！）
    console.log("データの読み込みを開始します...");
    
    // わざとエラーが起きるような処理（例：定義されていない関数を呼ぶ）
    readMissingData(); 

    console.log("この行は実行されません");
} catch (error) {
    // 2. もし try の中でエラーが起きたら、すぐにここへジャンプ！
    console.log("【トラブル発生】エラーをキャッチしました。");
    console.log("エラーの内容:", error.message);
} finally {
    // 3. エラーがあってもなくても、最後に必ず実行したいこと
    console.log("処理を終了します。");
}

上記の実行結果は以下のようになります。

データの読み込みを開始します...
【トラブル発生】エラーをキャッチしました。
エラーの内容: readMissingData is not defined
処理を終了します。

tryブロックの中に「エラーが起きそうな処理」を書き、catchブロックの中に「エラーが起きた時にどうするか（代わりのメッセージを出す、ログを記録するなど）」を書くのがポイントです。これにより、ユーザーの画面が真っ白になって止まってしまう最悪の事態を防ぐことができます。

実際の開発現場では、API通信や複雑な計算、ユーザーが入力した値のチェックなどで非常によく使われる「守りのテクニック」です。最初は難しく感じるかもしれませんが、「エラーを無効化するのではなく、安全に着地させるための仕組み」だと覚えておきましょう。

7. よく出会う例外と対処まとめ

7. よく出会う例外と対処まとめ

JavaScriptの学習を始めたばかりのとき、画面に真っ赤な文字でエラーが表示されると驚いてしまいますよね。しかし、プロのエンジニアでもエラーは日常茶飯事です。大切なのは、「どのエラーが何を伝えているのか」を整理して理解することです。

これまでに学んだ主要なエラーと、その具体的な解決策を一覧表とサンプルコードで振り返りましょう。このパターンを覚えるだけで、デバッグ（修正作業）のスピードが劇的に上がります。

未経験者の方が特につまずきやすい「スペルミスによる参照エラー（ReferenceError）」の典型的な例をもう一度見ておきましょう。

let userName = "田中さん";

// 変数名は userName なのに、n が小文字で username と書いてしまった
console.log(username); 

Uncaught ReferenceError: username is not defined
（アンコート・リファレンスエラー：usernameという変数は定義されていません）

このように、コンピュータは「一文字の違い」も厳格にチェックします。エラーが出たときは「自分の書いたコードと、お手本のコードを間違い探しするゲーム」だと考えてみてください。もし原因がどうしても特定できない場合は、前章で紹介した try...catch を使って、どこで処理が止まっているのかを特定するのも有効な手段です。

8. デバッグのコツ：エラーメッセージを読み解く

8. デバッグのコツ：エラーメッセージを読み解く

プログラミングをしていてエラーが出ると「壊してしまった！」と焦るかもしれませんが、実はエラーメッセージはJavaScriptからの「ここを直してほしい」というラブレターのようなものです。デバッグ（間違い探し）を効率的に進める最大のコツは、メッセージを飛ばさずにじっくり読むことです。

ブラウザのデベロッパーツール（検証画面）などで表示されるエラーは、主に以下の3つの情報で構成されています。

• エラーの種類： 何が起きたのか（TypeError, ReferenceErrorなど）
• 具体的な理由： どんな間違いか（is not defined, is not a functionなど）
• 発生場所： どのファイルの、何行目で起きたのか

例えば、未経験の方がよく遭遇する以下のエラーを読み解いてみましょう。

// 1行目：定数を定義
const message = "Hello";

// 4行目：定数に新しい値を入れようとする（本来はエラーになる）
message = "Goodbye";

このコードを実行すると、コンソールにはこのように表示されます。

Uncaught TypeError: Assignment to constant variable.
    at index.js:4:9

このメッセージを分解すると、「TypeError：定数（constant）に値を代入（Assignment）しようとしています。場所は index.js の 4行目です」と、解決策をほぼ答えとして教えてくれているのがわかります。

一度にすべてのコードを完璧に書こうとする必要はありません。「一つエラーを解決するたびに、また一歩プログラマーとして成長している」と自信を持って、まずは表示された行番号を覗きに行くことから始めてみてください。

9. エラーと例外は成長のチャンス

9. エラーと例外は成長のチャンス

初心者がプログラミングで出会うエラーや例外は、学びのチャンスです。失敗したときに落ち着いて対応できるスキルが身についていきます。

「エラーが出たらチャンス」と前向きにとらえて、一つ一つ解決していきましょう。

まとめ

まとめ

ここまでJavaScriptにおけるエラーと例外の基礎知識から、具体的な種類、そして万が一のトラブルを回避するための対処法について詳しく解説してきました。プログラミングの学習を始めたばかりの頃は、コンソールに表示される赤い文字（エラーメッセージ）を見るだけで「何かとんでもない失敗をしてしまったのではないか」と不安に感じるかもしれません。しかし、今回学んだように、エラーは決して敵ではありません。むしろ、プログラムが「ここが動かないよ」「書き方が違うよ」と親切に教えてくれている道標のようなものです。

主要なエラーの振り返りと対策

JavaScriptで頻出するエラーを理解しておくことは、開発スピードを劇的に向上させます。もう一度、重要なポイントをおさらいしておきましょう。

• SyntaxError（構文エラー）： 綴り間違いや括弧の閉じ忘れなど、文法のミスです。エディタのハイライト機能を活用して、書いている最中に気づけるようにしましょう。
• ReferenceError（参照エラー）： 定義されていない変数にアクセスした際に発生します。変数のスコープ（有効範囲）や、宣言のタイミングを再確認してください。
• TypeError（型エラー）： 数値型に対して文字列用のメソッドを呼び出すなど、データの種類を間違えたときに起こります。typeof演算子などを使って、データの型を確認する癖をつけると良いでしょう。
• RangeError（範囲エラー）： 数値が許容範囲を超えたときに出るエラーです。配列の要素数や再帰処理の深さなどに注意が必要です。

実践的な例外処理の活用

実際のアプリケーション開発では、ユーザーの入力内容や外部APIとの通信など、自分たちではコントロールできない要因でエラーが発生することがあります。そういった場合にプログラムを完全に停止させない手法が、try...catch構文です。

例えば、外部から取得したデータが正しい形式かどうか確信が持てない場合、以下のように記述することで、たとえデータが壊れていてもシステム全体のクラッシュを防ぐことができます。

function safeJsonParse(jsonString) {
    try {
        // 成功する可能性のある処理をここに記述
        const data = JSON.parse(jsonString);
        console.log("データの解析に成功しました:", data);
        return data;
    } catch (error) {
        // エラーが発生したときのリカバリー処理
        console.error("解析エラーが発生しました。デフォルト値を使用します。");
        console.error("エラーの内容:", error.message);
        return {};
    } finally {
        // 成功・失敗に関わらず最後に必ず実行したい処理
        console.log("解析処理を終了します。");
    }
}

// 実行例1: 正しい形式
safeJsonParse('{"name": "太郎"}');

// 実行例2: 不正な形式
safeJsonParse("不正なデータ形式です");

上記のコードを実行した結果、コンソールには以下のように表示されます。

データの解析に成功しました: { name: '太郎' }
解析処理を終了します。
解析エラーが発生しました。デフォルト値を使用します。
エラーの内容: Unexpected token '不', "不正なデータ形式です" is not valid JSON
解析処理を終了します。

デバッグ効率を高めるために

エラーを解決するプロセスを「デバッグ」と呼びますが、これにはコツがあります。それは「仮説を立てること」です。 「この変数の値が空だからTypeErrorが出ているのではないか？」といった予測を立て、console.log()を使って実際に中身を確認してみる。この繰り返しが、プログラミングスキルを磨く最短ルートになります。 また、TypeScript（タイプスクリプト）という言語を併用することで、実行前に多くのエラーを未然に防ぐことが可能になります。

// TypeScriptでの例：型を指定することでミスを防ぐ
function greet(name: string): string {
    return "こんにちは、" + name + "さん！";
}

// 数値を渡すと、実行する前にエディタがエラーとして教えてくれる
// greet(12345); // Argument of type 'number' is not assignable to parameter of type 'string'.

最後に

エラーメッセージを読み解く力は、エンジニアとしての基礎体力です。最初は英語のメッセージに戸惑うかもしれませんが、よく出るフレーズは決まっています。 わからない単語があれば検索し、一つひとつ自分の知識として蓄積していきましょう。 「エラーが出た！ラッキー！」と思えるようになれば、あなたはもう初心者脱出の第一歩を踏み出しています。焦らず、自分のペースでコードを書き続けてくださいね。