JSONの「SyntaxError: Unexpected token」原因5選とデバッグ対処法

JSON エラー解決 JavaScript API
結論：30秒で Unexpected token を解決する
  • Unexpected token '<': API が JSON ではなく HTML（404/500）を返している
  • Unexpected token 'o': 既にオブジェクトの変数を JSON.parse() に渡している
  • 文法ミス: シングルクォート (') / 末尾カンマ (,}) / コメント (`) は JSON 厳禁

1. エラーが発生する代表的な5つの原因

JSON の仕様（ECMA-404）は、JavaScript のオブジェクトリテラル表記よりも大幅に厳しい制約があります。

原因発生するコード（NG）正しいJSON表記（OK）
① 末尾カンマ (Trailing Comma){"id": 1, "name": "Kawa",}{"id": 1, "name": "Kawa"}
② シングルクォートの使用{'id': 1, 'name': 'Kawa'}{"id": 1, "name": "Kawa"}
③ キーのクォート囲み漏れ{id: 1, name: "Kawa"}{"id": 1, "name": "Kawa"}
④ コメントの記述{"id": 1 // ID番号}{"id": 1}
⑤ APIがHTML（404/500）を返した<DOCTYPE html>...{"status": 200, "data": []}

2. 最も多い罠：fetch で HTML レスポンスが返ってきた場合

// エラー例: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
const res = await fetch('/api/user/123');
const data = await res.json(); // ← ここでエラー

対処コード

res.json() を呼ぶ前に、必ず res.ok または res.status を確認します。

const res = await fetch('/api/user/123');

if (!res.ok) {
  const errorText = await res.text();
  console.error(`HTTP Error ${res.status}:`, errorText);
  throw new Error(`API呼び出し失敗: status=${res.status}`);
}

const data = await res.json();

3. [object Object] をパースしようとしている場合

const obj = { name: "Kawa" };
JSON.parse(obj); 
// SyntaxError: Unexpected token 'o', "[object Object]" is not valid JSON

JSON.parse() の引数には文字列を渡す必要があります。オブジェクトを渡すと自動的に文字列化され "[object Object]" になり、最初の文字 o で構文エラーになります。

4. オンライン構文チェック・自動修正

手元の JSON 文字列の構文エラー位置をブラウザ上で特定・自動修復できます。

🔧 この場でJSONを整形してエラーを特定する