JavaScriptでよく発生するエラー「ReferenceError」「SyntaxError」などの原因と対策を具体例付きで解説

なぜJavaScriptのエラー対策が重要なのか？

JavaScriptはWebアプリケーションやサイトで広く使われるプログラミング言語ですが、実装時に「エラー」に直面することは避けられません。
あなたはこれまで、コンソールに表示されるエラーメッセージを見て、どのように対処すればよいのかわからなかった経験はありませんか？
この記事では、よく見かけるJavaScriptのエラーについて、原因や対処法を具体的なコード例とともに詳しく解説します。
実際のエラーメッセージの例も紹介するので、トラブルシューティングの参考にしてください。

主要なエラーと具体的な解決策

1. ReferenceError: 未定義の変数や関数

原因: プログラム中で定義していない変数や関数を呼び出すと発生します。

console.log(foo);

実際のエラーメッセージ

Uncaught ReferenceError: foo is not defined
    at <anonymous>:1:13

解決策

変数・関数の定義を確認する。
タイポ（スペルミス）をチェックする。

let foo = "Hello!";
console.log(foo);

2. SyntaxError: 文法エラー

原因: 括弧やクォーテーションの閉じ忘れ、文の区切りミスなど。

if (true {
  console.log("Oops");
}

実際のエラーメッセージ

Uncaught SyntaxError: Unexpected token '{'
    at <anonymous>:1:9

解決策

括弧や記号の整合性を確認。
エディターの構文チェック機能やPrettierを活用。

if (true) {
  console.log("Correct!");
}

3. TypeError: データ型の不一致によるエラー

原因: 文字列に対して配列専用のメソッドを使うなど、不適切な操作によって発生します。

let str = "Hello";
str.push("World");

実際のエラーメッセージ

Uncaught TypeError: str.push is not a function
    at <anonymous>:2:5

解決策

typeof や Array.isArray() などで型を確認。
正しい型に変換する。

let greeting = "Hello";
let arr = greeting.split("");
arr.push("!");
console.log(arr.join("")); // Hello!

4. RangeError: 再帰の限界超過

原因: 無限再帰などでコールスタックがオーバーフローすると発生します。

function recurse() {
  return recurse();
}
recurse();

実際のエラーメッセージ

Uncaught RangeError: Maximum call stack size exceeded
    at recurse (<anonymous>:2:10)

解決策

終了条件（ベースケース）を必ず設定する。
ループに置き換えることも検討。

function factorial(n) {
  if (n <= 1) return 1;
  return n * factorial(n - 1);
}
console.log(factorial(5)); // 120

5. 非同期処理のエラー：ネットワークエラーやPromiseの失敗

原因: fetch()などの非同期通信でエラーが起きた際にキャッチされる。

fetch("https://invalid-api.com/data")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error("Fetch error:", err));

実際のエラーメッセージ

Fetch error: TypeError: Failed to fetch

解決策

.catch() や try…catch を使って明示的にエラーを処理する。
通信状況やレスポンスのステータスコードを確認。

async function fetchData() {
  try {
    const response = await fetch("https://example.com/api");
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    const data = await response.json();
    console.log(data);
  } catch (err) {
    console.error("Fetch error:", err);
  }
}
fetchData();