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を整形してエラーを特定する
関連記事
この記事は 開発ツール・基礎 テーマの一環です。あわせて読むと理解が深まる関連記事をまとめました。
| トピック | 記事 |
|---|---|
| Base64とは？仕組みから使い方まで解説 | Base64とは？仕組みから使い方まで解説 |
| Base64デコードで日本語が文字化けする原因と対処法 | Base64デコードで日本語が文字化けする原因と対処法 |
| JSON 整形ツールの使い方 | JSON 整形ツールの使い方｜オンラインで安全に整形・圧縮 |
| ハッシュ生成 - SHA-256/384/512をローカルで安全に計算 | ハッシュ生成 - SHA-256/384/512をローカルで安全に計算 |
| MD5 ハッシュ生成 | MD5 ハッシュ生成｜md5 hashの使い方の使い方と注意点まとめ実務ガイド実践ガイド |
| 正規表現でよく使うパターン10選 | 正規表現でよく使うパターン10選｜開発で役立つRegex |
| Markdown記法チートシート | Markdown記法チートシート｜コピペで使える一覧 |
| Gitコマンドよく使う一覧 | Gitコマンドよく使う一覧｜初心者向けクイックリファレンス |
| Git Worktree 並行開発ワークフロー完全ガイド | Git Worktree 並行開発ワークフロー完全ガイド｜複数ブランチ同時作業・IDE設定・CI連携（2026） |
| .envファイルのベストプラクティス | .envファイルのベストプラクティス｜機密情報を安全に管理する |
| URLエンコード（パーセントエンコーディング）の使い方 | URLエンコード（パーセントエンコーディング）の使い方 |
| HTMLエスケープ（サニタイズ）が必要な理由 | HTMLエスケープ（サニタイズ）が必要な理由｜XSS攻撃を防ぐ基礎知識 |