Todoアプリ - バックエンド編

FastAPIを使って、TodoのCRUD API（作成・取得・更新・削除）を作成します。これがフロントエンドと連携するバックエンドになります。

作成するAPIエンドポイント

メソッド	パス	機能
GET	/todos	全Todoを取得
POST	/todos	新しいTodoを作成
PUT	/todos/{id}	Todoを更新
DELETE	/todos/{id}	Todoを削除

Step 1: データモデルの作成

AIへの指示

backend/main.py を編集して、TodoのPydanticモデルを作成してください。

Todoモデル:
- id: int（自動生成）
- title: str（タイトル）
- completed: bool（完了フラグ、デフォルトはFalse）

作成用モデル（TodoCreate）と更新用モデル（TodoUpdate）も作成してください。

Step 2: CRUDエンドポイントの作成

AIへの指示

続けて、TodoのCRUDエンドポイントを作成してください。

エンドポイント:
1. GET /todos - 全Todoを取得
2. POST /todos - 新しいTodoを作成
3. PUT /todos/{todo_id} - Todoを更新
4. DELETE /todos/{todo_id} - Todoを削除

データはメモリ上のリストで管理してください（データベースは使わない）。
サンプルデータを2-3件入れておいてください。

完成コード例

backend/main.py

from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
from typing import Optional

app = FastAPI()

# CORS設定
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# モデル定義
class TodoCreate(BaseModel):
    title: str

class TodoUpdate(BaseModel):
    title: Optional[str] = None
    completed: Optional[bool] = None

class Todo(BaseModel):
    id: int
    title: str
    completed: bool = False

# データ（メモリ上で管理）
todos: list[Todo] = [
    Todo(id=1, title="買い物に行く", completed=False),
    Todo(id=2, title="部屋を掃除する", completed=True),
]
next_id = 3

# 全Todo取得
@app.get("/todos")
def get_todos():
    return todos

# Todo作成
@app.post("/todos")
def create_todo(todo: TodoCreate):
    global next_id
    new_todo = Todo(id=next_id, title=todo.title)
    todos.append(new_todo)
    next_id += 1
    return new_todo

# Todo更新
@app.put("/todos/{todo_id}")
def update_todo(todo_id: int, todo_update: TodoUpdate):
    for todo in todos:
        if todo.id == todo_id:
            if todo_update.title is not None:
                todo.title = todo_update.title
            if todo_update.completed is not None:
                todo.completed = todo_update.completed
            return todo
    raise HTTPException(status_code=404, detail="Todo not found")

# Todo削除
@app.delete("/todos/{todo_id}")
def delete_todo(todo_id: int):
    for i, todo in enumerate(todos):
        if todo.id == todo_id:
            todos.pop(i)
            return {"message": "Todo deleted"}
    raise HTTPException(status_code=404, detail="Todo not found")

Step 3: 動作確認

サーバーを起動

uvicorn main:app --reload

Swagger UIで確認

ブラウザで http://localhost:8000/docs を開く

各エンドポイントをクリックして「Try it out」
GET /todos で一覧が取得できることを確認
POST /todos で新しいTodoを追加してみる
PUT /todos/{id} で完了状態を変更してみる
DELETE /todos/{id} で削除してみる

成功！Swagger UIですべてのAPIが動作すれば、バックエンドは完成です！

前へ：カウンターアプリ次へ：フロントエンド編