第8部：実践プロジェクト Step 22 / 24

ブログアプリ設計編

中級編の集大成として、認証付きブログアプリを作成します。まずは設計からスタート！

Claude Codeでプロジェクトを始める

まずはプロジェクト用のフォルダを作成し、Claude Codeを起動しましょう。

Claude Codeへの指示

ターミナルで以下のコマンドを実行して、プロジェクトフォルダを作成し、Claude Codeを起動します。

# プロジェクトフォルダを作成
mkdir blog-app
cd blog-app

# Claude Codeを起動
claude

Claude Codeが起動したら、プロジェクトの設計について対話的に相談できます。以下のセクションで紹介するプロンプトを使って、設計を進めていきましょう。

プロジェクト概要

認証付きブログアプリ

機能

  • ・ユーザー登録・ログイン
  • ・記事の作成・編集・削除
  • ・記事一覧・詳細表示
  • ・自分の記事のみ編集可能

技術スタック

  • ・Docker + Docker Compose
  • ・MySQL + SQLAlchemy
  • ・FastAPI + JWT認証
  • ・Next.js + Tailwind CSS

プロジェクト構成

blog-app/
├── compose.yaml
├── .env
├── backend/
│   ├── Dockerfile
│   ├── requirements.txt
│   ├── main.py
│   ├── config.py
│   ├── database.py
│   ├── models.py
│   ├── schemas.py
│   ├── auth.py
│   ├── routers/
│   │   ├── auth.py
│   │   └── posts.py
│   └── alembic/
└── frontend/
    ├── Dockerfile
    ├── package.json
    ├── .env.local
    ├── src/
    │   ├── app/
    │   │   ├── layout.tsx
    │   │   ├── page.tsx
    │   │   ├── login/
    │   │   ├── register/
    │   │   └── posts/
    │   ├── components/
    │   ├── contexts/
    │   ├── hooks/
    │   └── lib/
    └── tailwind.config.js

AIに設計を依頼

Claude Codeへの指示

認証付きブログアプリを作成したいです。

【技術スタック】
- フロントエンド: Next.js 14 (App Router), TypeScript, Tailwind CSS
- バックエンド: FastAPI, SQLAlchemy
- データベース: MySQL 8.0
- 認証: JWT
- 環境: Docker Compose

【機能要件】
- ユーザー登録（メール、パスワード、名前）
- ログイン/ログアウト
- 記事のCRUD（作成・読取・更新・削除）
- 記事一覧表示（新しい順、ページネーション）
- 記事詳細表示
- 自分の記事のみ編集・削除可能

【質問】
1. データベースのテーブル設計を教えてください
2. APIエンドポイントの一覧を教えてください
3. フロントエンドのページ構成を教えてください
4. compose.yamlの設定を教えてください

Claude Codeが行うこと

  • 1 要件を分析し、最適なデータベーススキーマを提案します
  • 2 RESTful APIのエンドポイント設計を一覧で出力します
  • 3 フロントエンドのページ構成とルーティングを設計します
  • 4 Docker Composeの構成を含む、プロジェクト全体の構造を提案します

Claude Codeが提案した設計を以下に示します。あなたのプロジェクトでも同様の設計になるはずです。

データベース設計

users テーブル

  • id - INT, PK
  • email - VARCHAR(255), UNIQUE
  • name - VARCHAR(100)
  • password_hash - VARCHAR(255)
  • created_at - DATETIME
  • updated_at - DATETIME

posts テーブル

  • id - INT, PK
  • title - VARCHAR(255)
  • content - TEXT
  • author_id - INT, FK → users.id
  • created_at - DATETIME
  • updated_at - DATETIME

API設計

メソッド エンドポイント 説明 認証
認証
POST /auth/register ユーザー登録 -
POST /auth/login ログイン -
GET /auth/me 自分の情報 必要
記事
GET /posts 記事一覧 -
GET /posts/:id 記事詳細 -
POST /posts 記事作成 必要
PUT /posts/:id 記事更新 必要（本人）
DELETE /posts/:id 記事削除 必要（本人）

Claude Codeに設計ドキュメントを作成させる

設計内容が固まったら、Claude Codeに設計ドキュメントを生成してもらいましょう。実装中のリファレンスとして役立ちます。

Claude Codeへの指示

# Claude Codeに以下のように依頼します
今までの設計内容をもとに、DESIGN.md ファイルを作成してください。
以下の内容を含めてください：

1. プロジェクト概要と技術スタック
2. データベーススキーマ（usersテーブル、postsテーブル）
3. APIエンドポイント一覧（メソッド、パス、説明、認証要否）
4. フロントエンドのページ構成とルーティング
5. Docker Composeのサービス構成

設計ドキュメントのメリット

  • ■ 実装中にAPIのパスやテーブル構造をすぐに確認できる
  • ■ Claude Codeが DESIGN.md を参照して、設計に沿ったコードを生成してくれる
  • ■ チーム開発時に設計意図を共有するドキュメントとして活用できる

画面設計

公開ページ

  • / - 記事一覧（トップ）
  • /posts/[id] - 記事詳細
  • /login - ログイン
  • /register - 新規登録

認証必要ページ

  • /posts/new - 記事作成
  • /posts/[id]/edit - 記事編集
  • /mypage - マイページ

次のステップ

設計が完了したら、次は実装編に進みましょう。

  • 1 Docker環境のセットアップ
  • 2 バックエンドAPI実装
  • 3 フロントエンド実装
  • 4 テストとデバッグ
デプロイ実践 次へ：実装編