よくあるエラー集

解決法

• Node.jsを公式サイトから再インストール
• インストール後、ターミナルを閉じて再度開く（またはPCを再起動）
• node --versionで確認

解決法

• Pythonを再インストール時に「Add Python to PATH」にチェック（最重要）
• Macの場合はpython3を試す（Macではpython3がデフォルト名）
• ターミナルを閉じて再度開く、またはPCを再起動

解決法

• 正しいディレクトリにいるか確認（frontendフォルダ内か）
• ls（Mac）やdir（Windows）でpackage.jsonがあるか確認
• cd frontendで移動してから再実行

解決法

• 仮想環境を有効化してからインストール：venv\Scripts\activate（Windows）/ source venv/bin/activate（Mac）
• ターミナルの先頭に(venv)が表示されていれば有効化済み
• 有効化していない状態でインストールするとシステム全体に影響するのでNG

解決法

• ファイルパスが正しいか確認（@/は src/の意味）
• 外部パッケージならnpm install パッケージ名
• ファイル名の大文字小文字を確認（Linuxでは区別される）
• ファイルの拡張子（.ts / .tsx）を確認

解決法

ファイルの先頭に以下を追加：

解決法

ファイルの1行目に以下を追加：

解決法

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

解決法

• 初期値を空配列useState<Todo[]>([])にする
• オプショナルチェイニングdata?.map()を使う
• ローディング状態を追加して、データ取得前はリストを表示しない

解決法

• 仮想環境が有効になっているか確認（ターミナルに(venv)が表示されているか）
• pip install fastapi uvicornを実行
• それでもダメなら仮想環境を作り直す：python -m venv venv

解決法

• 送信しているJSONの形式がPydanticモデルと一致しているか確認
• 必須フィールドが含まれているか確認
• Content-Type: application/jsonヘッダーを確認
• /docsで直接テストして正しいリクエスト形式を確認

解決法

• タブとスペースが混在していないか確認
• スペース4つで統一する
• エディタ（VS Code等）の設定で「Insert Spaces」をオン、タブサイズを4に

解決法

• 前回起動したサーバーが残っていないか確認（ターミナルを閉じ忘れていないか）
• 別のポートで起動：uvicorn main:app --reload --port 8001

解決法

FastAPIにCORS設定を追加：

from fastapi.middleware.cors import CORSMiddleware

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

解決法（上から順に確認）

1. バックエンドサーバーが起動しているか確認
2. http://localhost:8000/docs にブラウザでアクセスして確認
3. APIのURLが正しいか確認（http://localhost:8000）
4. ポート番号が合っているか確認

解決法

• URLのパスが正しいか確認（/todos vs /todo など）
• /docs でエンドポイント一覧を確認
• 末尾のスラッシュの有無を確認（/todos vs /todos/）