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

生徒

「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のエラーと例外の基本！初心者がよく出会うエラーとその対処法まとめ