先生と生徒の会話形式で理解しよう

生徒

「JavaScriptでプログラムが急に止まって、よく意味がわからないエラーが出るんです。どうすればいいですか？」

先生

「それは『エラー』や『例外』と呼ばれるもので、プログラムが正常に動くのを妨げるものです。まずは種類と対処法を覚えましょう。」

生徒

「種類があるんですか？」

先生

「はい。初心者がよく出会うものをまとめて、対応方法までやさしく解説します！」

1. エラーと例外って何？

まず「エラー」は、文法（ぶんぽう）や構文（こうぶん）の間違いで、すぐブラウザに止められてしまいます。一方「例外（exception）」は、実行中に起きる問題で、例えば「存在しないファイルを開こうとした」などです。

エラーも例外も、プログラムが突然止まる原因になるので、初心者でもしっかり対処する必要があります。

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

SyntaxError（シンタックスエラー）は、JavaScriptの書き方が間違っているときに起こります。たとえば、


console.log("こんにちは")

このようにセミコロンを忘れると、SyntaxError が出ることがあります。エラーメッセージを見ると「SyntaxError: missing ;」など教えてくれます。

対処法は、エラーメッセージの行番号を見て、コードを書き直すことです。

3. 参照エラー（ReferenceError）

ReferenceError（リファレンスエラー）は、「存在しない変数や関数を使ったとき」に出ます。たとえば、


console.log(name);

ここで name を定義していないと「ReferenceError: name is not defined」というエラーになります。

対処法は、変数や関数を使う前に let name = ...; のように定義することです。

4. 型エラー（TypeError）

TypeError（タイプエラー）は、「間違った種類（型）の値で操作しようとしたとき」に出ます。たとえば、


let num = 123;
num.toUpperCase();

ここでは、数字（Number型）に文字列だけが持つ toUpperCase() を使っているので、「TypeError: num.toUpperCase is not a function」となります。

対処法は、メソッドを使う値の型が正しいか確認することです。

5. 範囲エラー（RangeError）

RangeError（レンジエラー）は、数字の範囲が合わないときに出ます。例えば、


let arr = new Array(-1);

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

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

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

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


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

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

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

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

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

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

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

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

最後に

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

先生と生徒の振り返り会話

生徒

「先生、ありがとうございました！エラーって、ただプログラムが動かないっていう印じゃなくて、原因を教えてくれる大切なヒントだったんですね。今まで赤い文字が出るたびにガッカリしていましたが、少し気持ちが楽になりました。」

先生

「その通りです！ベテランのエンジニアでも、毎日たくさんのエラーを出していますよ。大事なのは、エラーを出さないことではなく、出たときに『何が起きているのか』を冷静に読み解く力なんです。」

生徒

「記事の中で紹介されていたtry...catchを使えば、もしエラーが起きてもホームページが真っ白になったり、アプリが急に落ちたりするのを防げるんですね。これって、ユーザーにとってもすごく親切な作りになりますよね？」

先生

「素晴らしい気づきですね。専門用語で『堅牢性（けんろうせい）』と言ったりしますが、予期せぬ事態にも対応できるプログラムを書くことは、プロの仕事として非常に重要です。でも、初心者のうちは、まずはエラーメッセージをGoogleで検索して、どうやって直すのかを調べるだけでも十分な学習になりますよ。」

生徒

「はい！まずは英語のエラーメッセージを恐れずに読んでみます。特にReferenceErrorはよくやってしまうので、変数の名前を打ち間違えていないか、定義する場所が間違っていないか、しっかり確認するようにしますね。」

先生

「いいですね。ちなみに、変数の名前をキャメルケース（例：userName）で書くなどのルールを自分の中で決めておくと、打ち間違いを減らせるのでおすすめですよ。TypeScriptについても少し触れましたが、慣れてきたらぜひ挑戦してみてください。型を意識することで、驚くほどミスが減りますから。」

生徒

「TypeScriptですね、覚えておきます！これからはエラーが出るたびに『よし、また一つ賢くなれるぞ！』と前向きにデバッグに取り組んでいこうと思います。今日は本当に勉強になりました！」

先生

「その意気です！エラーを乗り越えた数だけ、確実にあなたのプログラミングスキルは向上しています。もしどうしても解決できないエラーに出会ったら、またいつでも相談してくださいね。頑張りましょう！」

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