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（レンジエラー）は、数字の範囲が合わないときに出ます。例えば、

let arr = new Array(-1);

この場合「RangeError: Invalid array length（無効な配列の長さ）」と表示されます。

対処法は、引数や数値が正しい範囲になっているか確認しましょう。

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

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

実行中に例外が起きてもプログラムを止めずに続けたいときは、try...catchを使います。これは、「安全に処理を試して、失敗したらカバーする」仕組みです。

try {
  JSON.parse("不正なJSON");
} catch (e) {
  console.log("エラーが起きました:", e.message);
}

このように書くと、JSON の変換に失敗しても「エラーが起きました: ...」と表示して安全に処理できます。

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

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

• SyntaxError → 書き方の間違い、行番号を確認し修正
• ReferenceError → 宣言していない変数、定義漏れを確認
• TypeError → 型とメソッドの組み合わせをチェック
• RangeError → 数値や範囲が正しい値か確認
• 例外全般 → try...catchで安全に処理

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

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

エラー画面には「TypeError: ●● is not a function at ファイル名:行番号:列番号」が表示されます。何が、どこで、どう間違ったのかを教えてくれているので、まずはここを見ましょう。

一度に全部直そうとせず、ひとつずつ丁寧に修正することが初心者にとって有効です。

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'.

最後に

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