よくあるエラー集 - AIでWebアプリ開発を学ぼう

環境構築のエラー

'node' は認識されていません / command not found: node

Node.jsがインストールされていない、またはPATHが通っていない

解決法

Node.jsを公式サイトから再インストール
インストール後、PCを再起動
node --versionで確認

'python' は認識されていません / command not found: python

Pythonがインストールされていない、またはPATHが通っていない

解決法

Pythonを再インストール時に「Add Python to PATH」にチェック
Macの場合はpython3を試す
PCを再起動

npm ERR! code ENOENT

package.jsonが見つからない

解決法

正しいディレクトリにいるか確認（frontendフォルダ内か）
lsやdirでpackage.jsonがあるか確認

Next.js開発中のエラー

Module not found: Can't resolve '...'

インポートしようとしているモジュールが見つからない

解決法

ファイルパスが正しいか確認（@/は src/の意味）
外部パッケージならnpm install パッケージ名
ファイル名の大文字小文字を確認

useState/useEffect is not defined

React Hooksがインポートされていない

解決法

import { useState, useEffect } from "react";

React Hooks must be called inside a function component

Hooksがコンポーネント外で呼ばれている

解決法

useStateなどはコンポーネント関数の直下で呼ぶ
条件分岐やループの中で呼ばない

Hydration failed / Text content does not match

サーバーとクライアントでレンダリング結果が異なる

解決法

Date.now()などランダムな値を直接レンダリングしていないか確認
useEffectで初期化するか、suppressHydrationWarningを使用
ファイル先頭に"use client"を追加

TypeError: Cannot read property 'map' of undefined

undefinedに対してmapを呼んでいる

解決法

データがまだ取得できていない状態で表示しようとしている
初期値を空配列useState([])にする
オプショナルチェイニングdata?.map()を使う
ローディング状態を追加する

FastAPI開発中のエラー

ModuleNotFoundError: No module named 'fastapi'

FastAPIがインストールされていない

解決法

仮想環境が有効になっているか確認
pip install fastapi uvicornを実行

422 Unprocessable Entity

リクエストのバリデーションエラー

解決法

送信しているJSONの形式がPydanticモデルと一致しているか確認
必須フィールドが含まれているか確認
Content-Type: application/jsonヘッダーを確認

IndentationError: unexpected indent

Pythonのインデントが不正

解決法

タブとスペースが混在していないか確認
スペース4つで統一する
エディタの設定で「Insert Spaces」をオンに

フロント・バック連携時のエラー

CORS policy: No 'Access-Control-Allow-Origin'

CORSエラー。異なるオリジン間の通信がブロックされている

解決法

FastAPIにCORS設定を追加：

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],
    allow_methods=["*"],
    allow_headers=["*"],
)

Failed to fetch / NetworkError

ネットワークエラー。サーバーに接続できない

解決法

バックエンドサーバーが起動しているか確認
APIのURLが正しいか確認（http://localhost:8000）
ポート番号が合っているか確認

404 Not Found

指定したエンドポイントが存在しない

解決法

URLのパスが正しいか確認
/docs でエンドポイント一覧を確認
末尾のスラッシュの有無を確認

解決しない場合は

AIに質問する

エラーメッセージをそのままコピーして、Claude CodeやCursorに質問しましょう。

以下のエラーを修正してください：

[エラーメッセージをここに貼り付け]

発生状況：
- [いつ発生するか]
- [何をしたら発生したか]