SyntaxError: Unexpected token in JSON の解決方法

このエラーは、JSONデータが構文的に正しくない場合に発生します。データのフォーマットや処理方法に問題があることが原因です。この記事では、エラーの原因と具体的な解決方法について解説します。

エラーの発生条件

• 無効なJSONフォーマットをパースしようとした。
• JSONの文字列に不正な文字が含まれている。
• サーバーから受信したデータが期待した形式ではない。
• JSON.stringifyやJSON.parseの使用方法に誤りがある。

原因1: 不正なJSONフォーマット

JSONデータが正しいフォーマットになっていない場合、このエラーが発生します。

解決方法1: JSONフォーマットを検証

JSONデータを検証ツールでチェックします。

{
  "name": "John", 
  "age": 30,
  "city": "New York"
}

原因2: ダブルクオートの不足または誤り

JSONのキーや値はダブルクオートで囲む必要があります。

解決方法2: クオートの使用を確認

以下のように修正します。

// エラーになる例
{ name: "John", age: 30 }

// 修正後
{ "name": "John", "age": 30 }

原因3: カンマの付け間違い

JSONの最後の要素の後にカンマを付けるとエラーになります。

解決方法3: カンマの位置を確認

カンマの使用を適切にします。

// エラーになる例
{
  "name": "John",
  "age": 30,
}

// 修正後
{
  "name": "John",
  "age": 30
}

原因4: サーバーからの不正なレスポンス

サーバーから返されるデータがJSONではない場合、このエラーが発生します。

解決方法4: サーバーレスポンスを確認

サーバーから返されるデータをログに出力して確認します。

fetch('/api/data')
  .then(response => response.text())
  .then(data => console.log(data));

原因5: JSON.parseの誤用

文字列以外をJSON.parseに渡すとエラーになります。

解決方法5: 引数を確認

JSON.parseに渡すデータが正しい文字列か確認します。

// エラーになる例
JSON.parse({ "name": "John" });

// 修正後
JSON.parse('{"name": "John"}');

原因6: 特殊文字のエスケープ漏れ

特殊文字（例: 改行やタブ）がエスケープされていない場合、エラーが発生します。

解決方法6: 特殊文字をエスケープ

特殊文字を適切にエスケープします。

// エラーになる例
{ "name": "John
Doe" }

// 修正後
{ "name": "John\nDoe" }

原因7: JSON.stringifyの誤用

JSON.stringifyで循環参照が含まれるオブジェクトを変換するとエラーになります。

解決方法7: 循環参照を排除

循環参照のあるオブジェクトを処理します。

// エラーになる例
const obj = {};
obj.ref = obj;
JSON.stringify(obj);

// 修正後
const obj = {};
obj.ref = null;
JSON.stringify(obj);

原因8: JSONデータのエンコーディング不一致

サーバーが返すデータのエンコーディングがUTF-8以外の場合、エラーが発生します。

解決方法8: エンコーディングを確認

サーバーが返すデータのエンコーディングをUTF-8に設定します。

原因9: JavaScriptの構文エラーと混同

JSONデータではなく、JavaScriptコードのエラーを見落としている場合があります。

解決方法9: エラーメッセージを再確認

エラーメッセージを注意深く読み、JSONに関連する問題かどうか確認します。

原因10: JSONレスポンスを期待しない場面での使用

APIレスポンスがJSONではない場合、このエラーが発生します。

解決方法10: レスポンスタイプを確認

レスポンスのContent-Typeヘッダーを確認します。

まとめ

「SyntaxError: Unexpected token in JSON」は、JSONのフォーマットや使用方法に問題がある場合に発生します。データのフォーマットや処理ロジックを確認することで、解決が可能です。