チュートリアル準備
いよいよ実践編です！このページでは、チュートリアルで使用するNext.jsとFastAPIのプロジェクトを作成します。
作成するプロジェクト
フロントエンド
- Next.js（App Router）
- TypeScript
- Tailwind CSS
ポート: 3000
バックエンド
- FastAPI
- Python 3.x
- uvicorn（開発サーバー）
ポート: 8000
1. 作業フォルダの作成
まずチュートリアル用のフォルダを作成します。
# フォルダを作成して移動
mkdir ai-todo-app
cd ai-todo-app
この中にフロントエンドとバックエンドの両方を作成します。
2. Next.jsプロジェクトの作成
AIへの指示例（Claude Code）
Next.jsプロジェクトを作成してください。 設定： - プロジェクト名: frontend - TypeScript: Yes - Tailwind CSS: Yes - App Router: Yes - src/ ディレクトリ: Yes
手動で作成する場合
npx create-next-app@latest frontend
質問が表示されたら以下のように選択：
- TypeScript? → Yes
- ESLint? → Yes
- Tailwind CSS? → Yes
- src/ directory? → Yes
- App Router? → Yes
- customize import alias? → No
3. FastAPIプロジェクトの作成
AIへの指示例（Claude Code）
FastAPIプロジェクトを作成してください。 設定： - フォルダ名: backend - 必要なパッケージ: fastapi, uvicorn - main.pyにHello Worldのエンドポイントを作成 - CORSを設定（localhost:3000からのアクセスを許可）
手動で作成する場合
# ai-todo-appフォルダにいることを確認 mkdir backend cd backend # 仮想環境を作成（推奨） python -m venv venv # 仮想環境を有効化 # Windows: venv\Scripts\activate # Mac/Linux: source venv/bin/activate # パッケージをインストール pip install fastapi uvicorn
main.pyを作成
from fastapi import FastAPI from fastapi.middleware.cors import CORSMiddleware app = FastAPI() # CORSの設定 app.add_middleware( CORSMiddleware, allow_origins=["http://localhost:3000"], allow_credentials=True, allow_methods=["*"], allow_headers=["*"], ) @app.get("/") def read_root(): return {"message": "Hello from FastAPI!"}
動作確認
uvicorn main:app --reload
ブラウザで http://localhost:8000 を開いて、JSONが表示されればOK！
http://localhost:8000/docs でAPIドキュメントも確認できます。
4. 完成後のフォルダ構成
ai-todo-app/ ├── frontend/ # Next.jsプロジェクト │ ├── src/ │ │ ├── app/ │ │ │ ├── page.tsx │ │ │ └── layout.tsx │ │ └── components/ # コンポーネント用（後で作成） │ ├── package.json │ └── ... │ └── backend/ # FastAPIプロジェクト ├── main.py ├── venv/ # 仮想環境 └── ...
5. 開発時に使うコマンド
重要：開発中はフロントエンドとバックエンドの両方のサーバーを起動しておく必要があります。
フロントエンド
cd frontend npm run dev
→ http://localhost:3000
バックエンド
cd backend uvicorn main:app --reload
→ http://localhost:8000
ヒント：ターミナルを2つ開いて、それぞれでサーバーを起動すると便利です。VS CodeやCursorでは「ターミナルの分割」機能が使えます。
準備完了！
これでチュートリアルの準備が整いました。次のページから実際にアプリを作っていきます！