JSONの「Unexpected token」エラー原因と対処法
JSON エラー解決 フロントエンド
結論
末尾カンマ、シングルクォート、コメント——JSでは動くがJSONでは通らない書き方がエラーの原因。フォーマッターに通せば一発で特定できる。
エラーの正体
JSON.parse() に渡した文字列が、JSONの構文ルールに違反していると発生します。
JSONはJavaScriptのオブジェクトリテラルとは別物で、より厳しいルールが存在します。
よくある原因
| NGパターン（JSなら動くがJSONではエラー） | 正しいJSON |
|---|---|
| 末尾カンマ { "name": "Taro", } | 最後のカンマを消す { "name": "Taro" } |
| キーにクォートなし { age: 25 } | ダブルクォートで囲む { "age": 25 } |
| シングルクォート { 'role': 'admin' } | ダブルクォートを使う { "role": "admin" } |
| コメント { "data": [] // memo } | コメント不可 { "data": [] } |
デバッグ手順
-
エラーログを確認 —
at position Nの N 付近に原因がある -
フォーマッターに貼り付ける — 構文エラー箇所をツールに自動検出させる
-
修正してパース — 指摘箇所を直し、再度
JSON.parse()を実行する
よくある罠
console.log() で出力したときに [object Object] になっている場合、それは文字列ではなく既にオブジェクトです。JSON.parse() に渡す必要はありません。
ツールで構文チェック
JSON整形ツールに貼り付ければ、エラー箇所をハイライト表示してくれます。ブラウザ内で完結するのでAPIレスポンスの中身も安全に確認できます。
🧪 JSON整形ツールで構文チェック
貼り付けるだけでエラー箇所を検出。データはサーバーに送信されません
試す