ブログアプリ設計編 - AI×Web開発中級編

プロジェクト概要

認証付きブログアプリ

機能

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

技術スタック

・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に設計を依頼

プロンプト例

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

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

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

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

データベース設計

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	記事削除	必要（本人）

画面設計

公開ページ

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

認証必要ページ

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

次のステップ

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

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