json debugging syntax-error web-development javascript

JSONの'Unexpected token'や一般的なJSON解析エラーの解決方法

JSON.parseの'Unexpected token'、'invalid JSON format'、末尾のカンマなどのエラーを特定して修正するための包括的なガイドです。一般的な原因と解決策を学びましょう。

JSONの"Unexpected token in JSON"や一般的なJSON解析エラーの解決方法:完全ガイド

JSON (JavaScript Object Notation) は現代のWeb通信の根幹を支えています。REST APIの構築、サーバーの設定、アプリケーションの状態の保存など、JSONはあらゆるところで使われています。しかし、その厳格な構文により、SyntaxError: Unexpected tokenJSON.parse: unexpected character、あるいは単に invalid JSON format といったイライラするエラーが頻繁に発生します。

このガイドでは、最も一般的なJSON解析エラーを分析し、なぜそれらが発生するのかを説明し、正確な修正方法を紹介します。

1. 一般的なJSONエラーメッセージ

解析器(JavaScriptの JSON.parse() など)が無効なJSONに遭遇すると、エラーをスローします。環境によって、次のようなメッセージが表示されます:

  • ブラウザ (Chrome/V8): SyntaxError: Unexpected token ' in JSON at position 0
  • Firefox: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
  • Node.js: SyntaxError: Unexpected token ... in JSON at position ...
  • Python: json.decoder.JSONDecodeError: Expecting property name enclosed in double quotes

重要な情報は通常、予期しなかった文字と、それが発生した位置(または行/列)です。


2. 主な原因と解決策

2.1 ダブルクォートではなくシングルクォートの使用

JSONでは、キーと文字列値の両方に**ダブルクォート (")**を使用することが厳格に義務付けられています。シングルクォート (') はJavaScriptオブジェクトでは有効ですが、JSON文字列としては無効です。

エラーの例 (single quotes in JSON):

{
  'name': 'Tool3M'
}

解決策: すべてのシングルクォートをダブルクォートに置き換えます。

{
  "name": "Tool3M"
}

2.2 末尾のカンマ (Trailing Commas)

現代のJavaScriptとは異なり、JSONではオブジェクトや配列の最後の項目の後にカンマを置くことは許可されていません

エラーの例 (trailing comma in JSON):

{
  "id": 1,
  "status": "active",
}

解決策: 最後のプロパティの後にあるカンマを削除します。

{
  "id": 1,
  "status": "active"
}

2.3 クォートされていないキー

JSONでは、キーは常にダブルクォートで囲まれた文字列である必要があります。

エラーの例:

{
  id: 123
}

解決策: キーをダブルクォートで囲みます。

{
  "id": 123
}

2.4 JSON内のコメント

JSON標準はコメント (///* */) をサポートしていません (comments in JSON)。一部のツール(tsconfig.json のVS Codeなど)では許可されていますが、標準の JSON.parse() は失敗します。

エラーの例:

{
  "id": 1 // これはコメントです
}

解決策: 解析前にすべてのコメントを削除します。メタデータが必要な場合は、"__comment": "text" のようなプロパティを使用してください。

2.5 特殊な値:NaN, Infinity, Undefined

JSONは NaNInfinity-Infinityundefined をサポートしていません。これらはJavaScript特有の値です。

エラーの例 (NaN in JSON, Infinity in JSON):

{
  "value": NaN,
  "expired": undefined
}

解決策: 代わりに null やプレースホルダーの文字列/数値を使用します。

{
  "value": null,
  "expired": null
}

2.6 制御文字と改行

JSONの文字列には、エスケープされていない生の制御文字(タブや実際の改行など)を含めることはできません。

エラーの例:

{
  "description": "これは
複数行の文字列です"
}

解決策: 改行には \n、タブには \t を使用します。

{
  "description": "これは \n複数行の文字列です"
}

3. 高度なトラブルシューティング

3.1 BOM (Byte Order Mark)

ファイルが完璧に見えるのに、位置0で SyntaxError が発生することがあります。これは、ファイルの先頭に隠れているUTF-8 BOM文字が原因であることが多いです。 解決策: ファイルを「BOMなしUTF-8」として保存し直してください。

3.2 不適切にエスケープされた文字

文字列にバックスラッシュ (\) やダブルクォート (") が含まれる場合は、エスケープする必要があります。

  • 正解: "path": "C:\\Windows\\System32"
  • 正解: "quote": "彼は \"こんにちは\" と言った"

4. 予防策

  1. リンターの使用: ESLint(jsonc-parser を使用)やVS Codeの組み込みJSON検証機能を使用します。
  2. 自動フォーマット: 設定ファイルに保存する前に、必ずフォーマッタでJSONをチェックしてください。
  3. スキーマ検証: JSON Schema を使用してデータの構造を定義し、プログラムで検証します。
  4. Try-Catch: 動的データを解析するときは、常に JSON.parse()try...catch ブロックで囲み、エラーを適切に処理します。
try {
  const data = JSON.parse(userInput);
} catch (e) {
  console.error("JSONの解析に失敗しました:", e.message);
  // ユーザーに分かりやすいエラーを表示
}

5. FAQ:よくある質問

Q: "Unexpected token < in JSON at position 0" と表示されるのはなぜですか?

A: これはほとんどの場合、コードがJSONを期待していたのに HTML を受け取ったことを意味します。通常、API呼び出しが失敗し、サーバーが期待されるJSONレスポンスの代わりに(404や500ページなどの)HTMLエラーページを返した場合に発生します。

Q: JSONで16進数を使用できますか?

A: いいえ。JSONは標準の10進数のみをサポートしています。0xFF は解析エラー (JSON parse error) を引き起こします。代わりに 255 を使用してください。

Q: 解析器がクラッシュするような巨大なJSONファイルはどう扱えばよいですか?

A: 非常に大きなファイルの場合は、JSONStream (Node.js) や ijson (Python) などの「ストリーミング」解析器を使用してください。これらはファイルをメモリにすべて読み込むのではなく、少しずつ処理します。


6. クイックチェックツール

カンマの欠落や引用符の誤りを見つけるのに苦労している場合は、当サイトの JSONフォーマッタ&バリデータ を使用してください。

  • 構文エラーを瞬時にハイライトします。
  • シングルクォートや末尾のカンマなどの一般的な問題を修正します。
  • JSONをフォーマットして人間が読みやすくします。

関連エラー

  • 'invalid base64 string' エラーの解決
  • JavaScriptで 'malformed URL' を修正する方法
  • YAMLのインデントエラーを理解する