リアル天気ビューア / Real Weather Viewer

Next.js + Tailwind v4（フロント）と FastAPI（バックエンド）で作るリアルタイム天気ビューア。
都市名を追加して 天気 / 気温 / 湿度 をカードで一覧表示。日本語/英語どちらの都市名でもOK。
左上カードの天気に応じて ページ背景テーマが自動切替 します。

---

■　技術スタック

• Frontend: Next.js 15（App Router, TypeScript）, Tailwind CSS v4
• Backend: FastAPI（OpenWeather の Geo API → Weather API を中継）
• API: OpenWeather（現在天気・ジオコーディング）

---

■　リポジトリ構成

weather_next_fastapi/
├─ backend/
│ └─ app/
│ └─ main.py # FastAPI 本体（/weather）
│
├─ frontend/
│ ├─ public/
│ └─ src/
│ ├─ app/
│ │ ├─ api/weather/route.ts # Next.js API（FastAPIへプロキシ）
│ │ ├─ layout.tsx
│ │ ├─ page.tsx
│ │ └─ globals.css # Tailwind v4 + カスタムCSS（アニメ等）
│ ├─ components/
│ │ ├─ Hero.tsx # 見出し+説明+検索バー
│ │ └─ WeatherCard.tsx # 天気カード（見た目担当）
│ ├─ hooks/
│ │ └─ useWeather.ts # 取得ロジック（fetch, 状態管理）
│ ├─ lib/
│ │ ├─ theme.ts # 天気コード→テーマ/色/絵文字
│ │ └─ num.ts # 数値ユーティリティ
│ ├─ types/
│ │ └─ weather.ts # 型定義
│ └─ utils/
│ └─ cityNameMap.ts # 日本語→英語の簡易マップ（任意）
│
├─ requirements.txt # バックエンド依存
└─ README.md

---

■　前提

• Node.js 18+（推奨: 20+）
• Python 3.10+（推奨: 3.11）
• OpenWeather API Key

---

■　セットアップ & 起動

1) バックエンド（FastAPI）

1. 依存インストール（任意で仮想環境を使用）

   # リポジトリ直下
   python -m venv .venv
   # Windows
   .venv/Scripts/activate
   # macOS/Linux
   # source .venv/bin/activate
   
   pip install -r requirements.txt

2. 環境変数（backend/.env を作成）

   OPENWEATHER_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxx

3. 起動

   uvicorn app.main:app --reload --host 0.0.0.0 --port 8000

   動作確認:

   http://localhost:8000/weather?city=Tokyo

   http://localhost:8000/weather?city=Paris,FR

4. 返却例 　

   {
    "city": "Paris, Île-de-France, FR",
    "tempC": 21.9,
    "humidity": 55,
    "condition": "晴天",
    "code": 800,
    "icon": "https://openweathermap.org/img/wn/01d@2x.png"
   }

---

2) フロントエンド（Next.js）

1. 依存インストール

   cd frontend
   npm i

2. 環境変数（frontend/.env.local）

   BACKEND_BASE_URL=http://localhost:8000

3. 開発サーバ

   npm run dev

   動作確認:

   http://localhost:3000 を開く

   都市名を入力（日本語/英語どちらでも）：例）東京, Paris,FR, New York,US

4. 返却例 　

   {
    "city": "Paris, Île-de-France, FR",
    "tempC": 21.9,
    "humidity": 55,
    "condition": "晴天",
    "code": 800,
    "icon": "https://openweathermap.org/img/wn/01d@2x.png"
   }
   
   

■　仕様

都市追加

入力 → 先頭に挿入（最新が左上）

重複は先頭へ移動

最大 12件（古いカードから落ちる）

表示

天気 / 気温 / 湿度 / アイコン

ガラス風カード、グラデ枠、ホバー演出

左上カードの天気コードに応じて 背景テーマ自動切替

国際化

日本語地名も Geo API → 座標解決 で海外都市に対応
（例：パリ / Paris / Paris,FR）

Next.js API（プロキシ）

GET /api/weather?city=<query> → .env.local の BACKEND_BASE_URL に中継（CORS回避）

■　スクリプト（frontend）

npm run dev        # 開発
npm run build      # 本番ビルド
npm start          # 本番サーバ（ローカル）

■　デプロイ

Frontend（Vercel / Netlify など）

環境変数 BACKEND_BASE_URL を 本番バックエンドURL に設定

Backend（Render / Fly.io / EC2 など）

OPENWEATHER_API_KEY を環境変数で設定

HTTPS 推奨

■　デトラブルシュート

Tailwind が効かない（v4）

    src/app/layout.tsx で ./globals.css を import 済みか

    globals.css の先頭は @import "tailwindcss";（v4記法）

    Dev サーバ再起動（npm run dev）

アニメが動かない

    globals.css の @keyframes スペル（小文字）

    ブラウザ Ctrl + F5（ハードリロード）

    OS の「アニメーション効果」を有効化

CORS エラー

    フロントは /api/weather を叩く（直接 :8000 に行かない）

    BACKEND_BASE_URL が正しいか確認

■　開発メモ

責務分離: 取得は hooks/useWeather.ts、見た目は components/WeatherCard.tsx

ルール集約: 天気コード→見た目は lib/theme.ts

API変更耐性: 返却形式が変わっても useWeather だけ修正でOK

env の雛形（おすすめ）

    backend/.env.example:

        OPENWEATHER_API_KEY=your_api_key

    frontend/.env.local.example:

        BACKEND_BASE_URL=https://your-backend.example.com