JavaScript
SyntaxError: Unexpected token '<'
JSONの代わりにHTMLが返ってきた
こんな症状
fetchのレスポンスをJSON.parseしたら「Unexpected token '<'」と出る。APIのURL間違いで起きやすいよ。
まず試す
fetch のURLが正しいか確認し、json() の前に res.ok をチェックする。
js
const res = await fetch("/api/data");
if (!res.ok) throw new Error("API error");
const data = await res.json();これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓URLが間違っている（404のHTMLが返る）
→ fetch のURLを正しいものにする。 - ✓ログインページのHTMLが返る
→ 認証が必要なAPI。トークン等を付けてリクエストする。 - ✓レスポンスの中身が分からない
→ DevToolsのNetworkタブでレスポンス本文と Content-Type を確認する。
なぜ起きる？
APIのURLが間違っていて、HTMLページ（404ページやログインページなど）が返ってきているよ。JSON.parse()やresponse.json()はJSON文字列を期待しているのに、HTMLの<で始まる文字列が来るとパースに失敗するんだ。
✕ エラーが起きるコード
const data = await res.json();
// 404ページのHTMLが返っている✓ 直したコード
const res = await fetch("/api/data");
if (!res.ok) throw new Error("API error");
const data = await res.json();✅ 直ったか確認
res.ok が true で、json() がエラーなくデータを返せばOK。
この解決法は役立ちましたか？
🔗 関連するエラー
- fetch failed: NetworkError — fetchでネットワークエラー
- Uncaught ReferenceError: xxx is not defined — 変数・関数名のタイポ
- Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') — 取得しようとしたHTML要素が見つかっていない
- 404 Not Found（スクリプトが読み込まれない） — script の src パスが間違っている
- 計算結果が NaN になる — 文字列を数値に変換していない
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
✏️ 手を動かして練習
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- JavaScriptとは？初心者向けにわかりやすく解説 — 変数・関数・イベントの基本
- JavaScriptでボタンクリックを動かす方法 — ボタンクリック時の動作を解説