🟡 fetch failed: NetworkError

😰 こんな症状

fetchでAPIを呼んだらNetworkErrorが出る。サーバー接続の問題で起きやすいよ。

🔍 原因

URLが間違っている、サーバーが起動していない、ネットワーク接続がない、またはCORSで拒否されているよ。fetchはネットワークレベルのエラー（サーバーに到達できない）の場合にNetworkErrorを投げるんだ。HTTPエラー（404等）とは異なり、そもそも通信できていない状態だよ。

❌ エラーが起きるコード

fetch("http://localhost:3000/api")
// サーバーが起動していない

✅ 直し方

1. URLが正しいか確認する（スペルミス、ポート番号）。 2. サーバーが起動しているか確認する。 3. ブラウザのDevToolsのNetworkタブでエラー詳細を見る。 4. try-catchでエラーをキャッチし、ユーザーに適切なメッセージを表示する。

✅ 修正後のコード

// 1. サーバーを起動する
// 2. URL を確認する
fetch("http://localhost:3000/api").catch(console.error);

🔗 関連するエラー

• SyntaxError: Unexpected token '<' — JSONの代わりにHTMLが返ってきた
• Uncaught ReferenceError: xxx is not defined — 変数・関数名のタイポ
• Uncaught TypeError: Cannot read properties of null — getElementById の id が存在しない
• 404 Not Found（スクリプトが読み込まれない） — script の src パスが間違っている
• ボタンを押しても何も起きない — getElementById の id 不一致

🔗 別カテゴリの関連エラー

• fetchでCORSエラー
• fetch: 'AbortError'
• ECONNRESET（環境構築）

📖 この問題を学べるレッスン

JavaScriptコースで基礎から学ぶ →

📝 関連ブログ記事

• プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
• JavaScriptとは？初心者向けにわかりやすく解説 — 変数・関数・イベントの基本
• JavaScriptでボタンクリックを動かす方法 — ボタンクリック時の動作を解説

📖 関連する用語

• API
• fetch
• サーバー

❓ 関連するQ&A

• console.logの結果はどこで見る？
• ボタンクリックで何も起きない
• letとconstどっちを使う？