チュートリアル準備

Step 1-1: フォルダを作成して移動

# フォルダを作成して移動
mkdir ai-todo-app
cd ai-todo-app

Step 1-2: Claude Codeを起動

claude

Claude Codeが起動し、プロンプト（入力待ち画面）が表示されます。ここからはClaude Codeの画面で指示を入力していきます。

Step 2-1: Claude Codeに以下の指示を入力

Next.jsプロジェクトを「frontend」というフォルダ名で作成してください。

設定：
- TypeScript: Yes
- Tailwind CSS: Yes
- App Router: Yes
- src/ ディレクトリ: Yes
- ESLint: Yes
- import alias: デフォルト（カスタマイズしない）

Claude Codeは npx create-next-app@latest frontend を実行しようとします。

Step 2-2: コマンド実行の許可

Claude wants to execute:
npx create-next-app@latest frontend --typescript --tailwind --eslint --app --src-dir --no-import-alias

Allow? (y/n)

Step 2-3: 完了を確認

Claude Codeが自動的にプロジェクトを作成します。完了すると以下のようなメッセージが表示されます：

Step 3-1: Claude Codeに以下の指示を入力

ai-todo-appフォルダの直下に、FastAPIプロジェクトを作成してください。

要件：
- フォルダ名: backend
- Python仮想環境（venv）を作成して有効化
- fastapi と uvicorn をインストール
- main.py を作成し、以下を含める：
  - Hello Worldのエンドポイント（GET /）
  - CORSの設定（http://localhost:3000 からのアクセスを許可）

Claude Codeが以下の作業を自動で行います。

Step 3-2: Claude Codeが行う処理（自動）

Claude Codeは以下のステップを順番に実行します。各コマンドの実行前に許可を求められるので、内容を確認して「y」で許可してください。

Step 3-3: 作成されるmain.pyの内容

Claude Codeが自動で作成する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!"}

自分で書く必要はありません。Claude Codeが指示に基づいて自動で作成します。