JavaScript SyntaxErrorの原因と対処法

JavaScriptのSyntaxErrorは、コードの文法（構文）が正しくないときに発生するエラーです。括弧やクォートの閉じ忘れ、JSONの解析エラー、予約語の誤用など、コードの書き方自体に問題がある場合に起こります。この記事では、SyntaxErrorのよくある発生パターンと対処法をエラーメッセージ別にコード例つきで解説します。

SyntaxErrorとは

SyntaxErrorは、JavaScriptエンジンがコードを解析（パース）する段階で、文法的に正しくないコードを検出したときに発生します。他のエラー（TypeErrorやReferenceError）がコードの実行中に起こるのに対し、SyntaxErrorはコードが実行される前に発生する点が特徴です。

エラーメッセージの読み方

// 閉じ括弧がない
function greet(name {
  return "Hello " + name;
}
// SyntaxError: Unexpected token '{'

「予期しないトークン {」というメッセージは、本来その位置にあるべきではない記号が見つかったことを意味します。この場合は、nameの後ろに閉じ括弧)がないのが原因です。

SyntaxErrorの特徴

SyntaxErrorはコード実行前に発生するため、try/catchで捕捉することは基本的にできません。ただし、JSON.parse()やeval()が原因のSyntaxErrorは実行時に発生するため、try/catchで捕捉できます。

パターン1: 括弧の閉じ忘れ

最も頻出するSyntaxErrorです。丸括弧()、波括弧{}、角括弧[]の対応が合っていないときに発生します。

丸括弧の閉じ忘れ

// NG: 丸括弧が閉じていない
console.log("Hello"
// SyntaxError: Unexpected end of input

// OK: 丸括弧を閉じる
console.log("Hello");

波括弧の閉じ忘れ

// NG: if文の波括弧が閉じていない
function check(value) {
  if (value > 0) {
    console.log("正の数です");
  // } が足りない
}
// SyntaxError: Unexpected end of input

// OK: 波括弧の対応を正しくする
function check(value) {
  if (value > 0) {
    console.log("正の数です");
  }
}

ネストが深い場合の対処法

ネストが深くなると括弧の対応がわかりにくくなります。次の方法で対処しましょう。

• エディタの括弧ハイライト機能を使う
• VSCodeでは対応する括弧に色がつく拡張機能がある
• コードを適切にインデントして、ネストの構造を視覚化する
• 関数を分割してネストを浅くする

パターン2: クォートの閉じ忘れ

文字列リテラルのクォーテーションマークが正しく閉じていない場合に発生します。

基本的な閉じ忘れ

// NG: ダブルクォートが閉じていない
const message = "Hello World;
// SyntaxError: Invalid or unexpected token

// OK: クォートを閉じる
const message = "Hello World";

文字列内にクォートを含む場合

// NG: 文字列内のクォートがエスケープされていない
const html = "<div class="container">Hello</div>";
// SyntaxError: Unexpected identifier 'container'

// OK: 別の種類のクォートで囲む
const html = '<div class="container">Hello</div>';

// OK: バッククォート（テンプレートリテラル）を使う
const html = `<div class="container">Hello</div>`;

// OK: エスケープする
const html = "<div class=\"container\">Hello</div>";

複数行の文字列

// NG: 通常のクォートでは改行できない
const text = "1行目
2行目";
// SyntaxError: Invalid or unexpected token

// OK: テンプレートリテラルを使う
const text = `1行目
2行目`;

// OK: 文字列結合
const text = "1行目\n" +
             "2行目";

パターン3: JSON.parseのエラー

JSON.parse()に不正なJSON文字列を渡すとSyntaxErrorが発生します。これは実行時エラーなので、try/catchで捕捉できます。

よくあるJSONの文法ミス

// NG: キーがクォートで囲まれていない
JSON.parse('{name: "田中"}');
// SyntaxError: Expected property name or '}' at position 1

// OK: キーをダブルクォートで囲む
JSON.parse('{"name": "田中"}');

// NG: 末尾のカンマ（trailing comma）
JSON.parse('{"a": 1, "b": 2,}');
// SyntaxError: Expected double-quoted property name in JSON at position ...

// OK: 末尾のカンマを削除
JSON.parse('{"a": 1, "b": 2}');

// NG: シングルクォートを使用
JSON.parse("{'name': 'tanaka'}");
// SyntaxError

// OK: JSONではダブルクォートのみ有効
JSON.parse('{"name": "tanaka"}');

APIレスポンスの解析エラー

// サーバーからのレスポンスが正しいJSONとは限らない
async function fetchData(url) {
  try {
    const response = await fetch(url);
    const text = await response.text();

    try {
      const data = JSON.parse(text);
      return data;
    } catch (error) {
      console.error("JSON解析エラー:", error.message);
      console.error("受信したテキスト:", text.substring(0, 200));
      return null;
    }
  } catch (error) {
    console.error("通信エラー:", error.message);
    return null;
  }
}

JSONのデバッグ方法

JSON文字列がどこで壊れているかを特定するには、次の方法が役立ちます。

• ブラウザの開発者ツールで受信データを確認する
• JSON.stringify()で正しいJSONを生成して比較する
• オンラインのJSONバリデータで検証する

// 正しいJSONの形式を確認するにはstringifyを使う
const obj = { name: "田中", age: 25 };
const jsonString = JSON.stringify(obj);
console.log(jsonString);
// {"name":"田中","age":25}

パターン4: 予約語の誤用

JavaScriptの予約語を変数名や関数名として使うとSyntaxErrorになります。

予約語の例

// NG: classは予約語
const class = "初級";
// SyntaxError: Unexpected token 'class'

// OK: 別の変数名を使う
const level = "初級";
const className = "初級";  // classNameはOK

// NG: returnは予約語
const return = "戻り値";
// SyntaxError: Unexpected token 'return'

// OK: 別の名前にする
const returnValue = "戻り値";

よく間違えやすい予約語

class、return、import、export、default、switch、case、new、delete、typeof、void、yield、await（async関数外で使う場合）などがあります。

オブジェクトのキーとしては使える

// オブジェクトのキーとしては予約語も使える
const obj = {
  class: "初級",
  return: true,
  default: 0,
};

console.log(obj.class);    // "初級"
console.log(obj.default);  // 0

パターン5: カンマとセミコロンの問題

カンマやセミコロンの付け間違いもSyntaxErrorの原因になります。

オブジェクトリテラルでのセミコロン

// NG: オブジェクト内でセミコロンを使っている
const user = {
  name: "田中";  // セミコロンではなくカンマが必要
  age: 25;
};
// SyntaxError: Unexpected token ';'

// OK: プロパティの区切りはカンマ
const user = {
  name: "田中",
  age: 25,
};

アロー関数の記法ミス

// NG: アロー関数の書き方が間違っている
const add = (a, b) = > a + b;
// SyntaxError: Unexpected token '>'

// OK: =>の間にスペースを入れない
const add = (a, b) => a + b;

// NG: オブジェクトを返すときに波括弧がブロックと解釈される
const getUser = () => { name: "田中", age: 25 };
// SyntaxError: Unexpected token ':'

// OK: 丸括弧で囲むとオブジェクトリテラルとして解釈される
const getUser = () => ({ name: "田中", age: 25 });

デバッグのコツ

SyntaxErrorはコード実行前に発生するため、デバッグの方法が他のエラーと少し異なります。

エディタの機能を活用する

VSCodeなどのエディタは、SyntaxErrorをリアルタイムで検出して波線で表示します。

• 赤い波線が出ている箇所を確認する
• 括弧のハイライト機能で対応を確認する
• ESLintなどのリンターを導入して事前に検出する

エラーの行番号を確認する

ブラウザのコンソールに表示されるエラーメッセージには、ファイル名と行番号が含まれます。ただし、SyntaxErrorの報告位置は実際の原因箇所とずれることがあります。閉じ忘れの括弧が原因の場合、エラーはファイルの末尾で報告されることが多いです。

SyntaxError: Unexpected end of input (at script.js:42)

この場合、42行目だけでなく、それより前の行で閉じ忘れがないか確認しましょう。

まとめ

JavaScriptのSyntaxErrorについて、よくある発生パターンと対処法を解説しました。

• 括弧()、{}、[]の閉じ忘れはエディタのハイライト機能で確認する
• 文字列内にクォートを含むときはテンプレートリテラルやエスケープを使う
• JSON.parse()のエラーはtry/catchで捕捉し、受信データを確認する
• JSONのキーはダブルクォートのみ有効で、末尾カンマは使えない
• 予約語を変数名に使わない
• アロー関数でオブジェクトを返すときは丸括弧で囲む

SyntaxErrorは他のエラーと異なりコード実行前に発生するため、エディタやリンターの活用が予防に効果的です。エラーの行番号を手がかりに、括弧やクォートの対応が正しいかを確認するのが基本の対処法です。