JavaScript
🟡 SyntaxError: Unexpected token '<'
JSONの代わりにHTMLが返ってきた
😰 こんな症状
fetchのレスポンスをJSON.parseしたら「Unexpected token '<'」と出る。APIのURL間違いで起きやすいよ。
🔍 原因
APIのURLが間違っていて、HTMLページ（404ページやログインページなど）が返ってきているよ。JSON.parse()やresponse.json()はJSON文字列を期待しているのに、HTMLの<で始まる文字列が来るとパースに失敗するんだ。
❌ エラーが起きるコード
const data = await res.json();
// 404ページのHTMLが返っている✅ 直し方
1. fetchのURLが正しいか確認する。 2. response.okをチェックしてからjson()を呼ぶ（if (!res.ok) throw new Error(...)）。 3. DevToolsのNetworkタブでレスポンスの中身を確認する。 4. Content-Typeヘッダーがapplication/jsonか確認する。
✅ 修正後のコード
const res = await fetch("/api/data");
if (!res.ok) throw new Error("API error");
const data = await res.json();この解決法は役立ちましたか？
🔗 関連するエラー
- fetch failed: NetworkError — fetchでネットワークエラー
- Uncaught ReferenceError: xxx is not defined — 変数・関数名のタイポ
- Uncaught TypeError: Cannot read properties of null — getElementById の id が存在しない
- 404 Not Found（スクリプトが読み込まれない） — script の src パスが間違っている
- ボタンを押しても何も起きない — getElementById の id 不一致
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- JavaScriptとは？初心者向けにわかりやすく解説 — 変数・関数・イベントの基本
- JavaScriptでボタンクリックを動かす方法 — ボタンクリック時の動作を解説