OpenAPIを使ってAI時代のフロントエンド開発を加速しよう

そもそもOpenAPIとはなんですか?

• APIドキュメントの自動生成（Swagger UI, Redocなど）
• クライアントコードの自動生成（JavaScriptやTypeScriptなど）
• APIクライアントの型安全性の向上（エラー軽減・タイプミス防止）
• API変更時の影響範囲を把握しやすくなり、保守性が向上する

1. FastAPIでのバックエンド開発

FastAPIのセットアップと基本構造

BASH
mkdir fastapi-demo && cd fastapi-demo
uv init
uv add uvicorn fastapi jwt python-multipart
コードをコピー

PYTHON
# main.py
from fastapi import FastAPI

app = FastAPI()

@app.get("/hello")
async def read_root():
    return {"message": "Hello FastAPI"}
コードをコピー

こんな感じでAPI仕様書が見れます

ユーザー認証（JWT）とタスク管理APIの実装

PYTHON
from pydantic import BaseModel
from typing import Optional

class User(BaseModel):
    username: str
    password: str

class Task(BaseModel):
    id: int
    title: str
    description: Optional[str] = None
    completed: bool = False
    owner: str  # タスクの所有者ユーザー名
コードをコピー

PYTHON
from fastapi.security import OAuth2PasswordBearer
from datetime import datetime, timedelta
import jwt

SECRET_KEY = "your-secret-key"         # 実際には環境変数等で管理
ALGORITHM = "HS256"
ACCESS_TOKEN_EXPIRE_MINUTES = 30

oauth2_scheme = OAuth2PasswordBearer(tokenUrl="token")  # トークン取得エンドポイントを指定

# 疑似的なユーザーデータベース
fake_users_db = {
    "alice": {"username": "alice", "hashed_password": "alice_hashed_pwd"},
    "bob":   {"username": "bob", "hashed_password": "bob_hashed_pwd"}
}

def verify_password(plain_password: str, hashed_password: str):
    # 簡略化: 実際にはBcryptなどでハッシュ比較
    return plain_password + "_hashed_pwd" == hashed_password

def authenticate_user(username: str, password: str):
    user = fake_users_db.get(username)
    if not user or not verify_password(password, user["hashed_password"]):
        return None
    return user

def create_access_token(data: dict, expires_delta: timedelta = None):
    to_encode = data.copy()
    if expires_delta:
        to_encode.update({"exp": datetime.utcnow() + expires_delta})
    else:
        to_encode.update({"exp": datetime.utcnow() + timedelta(minutes=15)})
    return jwt.encode(to_encode, SECRET_KEY, algorithm=ALGORITHM)
コードをコピー

PYTHON
from fastapi import Depends, HTTPException, status

class Token(BaseModel):
    access_token: str
    token_type: str

@app.post("/token", response_model=Token)
async def login_for_access_token(form_data: OAuth2PasswordRequestForm = Depends()):
    # OAuth2PasswordRequestFormは自動でフォームパラメータ (username, password) を取得
    user = authenticate_user(form_data.username, form_data.password)
    if not user:
        raise HTTPException(
            status_code=status.HTTP_401_UNAUTHORIZED,
            detail="Incorrect username or password",
            headers={"WWW-Authenticate": "Bearer"}
        )
    # トークン発行
    access_token = create_access_token({"sub": user["username"]}, timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES))
    return {"access_token": access_token, "token_type": "bearer"}

# 現在のユーザーを取得するヘルパー - JWTを検証しユーザー情報を返す
from jose import JWTError  # PyJWTでも可

async def get_current_user(token: str = Depends(oauth2_scheme)):
    credentials_exception = HTTPException(
        status_code=status.HTTP_401_UNAUTHORIZED,
        detail="Could not validate credentials",
        headers={"WWW-Authenticate": "Bearer"}
    )
    try:
        payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM])
        username: str = payload.get("sub")
        if username is None:
            raise credentials_exception
    except JWTError:
        raise credentials_exception
    user = fake_users_db.get(username)
    if user is None:
        raise credentials_exception
    return user
コードをコピー

PYTHON
# 簡易的なタスクDB（実際はDB利用推奨）
tasks_db: list[dict] = []  # 各タスクは{id, title, description, completed, owner}の辞書

@app.get("/tasks", tags=["tasks"])
async def list_tasks(current_user: dict = Depends(get_current_user)):
    # ログイン中ユーザーのタスクのみ返す
    user = current_user["username"]
    user_tasks = [task for task in tasks_db if task["owner"] == user]
    return user_tasks

@app.post("/tasks", tags=["tasks"])
async def create_task(task: Task, current_user: dict = Depends(get_current_user)):
    new_task = task.dict()
    new_task["id"] = len(tasks_db) + 1
    new_task["owner"] = current_user["username"]
    tasks_db.append(new_task)
    return new_task
コードをコピー

• /token (POST): ユーザー認証してJWTアクセストークンを返す。
• /tasks (GET): 要認証。現在ログイン中のユーザーのタスク一覧を返す。
• /tasks (POST): 要認証。新規タスクを作成（リクエストボディはTaskモデル）。作成者を現在のユーザーとして記録。

OpenAPI仕様書の自動生成と確認

作成されたAPI仕様書

2. OpenAPI仕様書を活用したフロントエンド開発

npx create-next-app@latest fastapidemo-frontend

OpenAPI仕様からのコード自動生成

TYPESCRIPT
// 生成された API クライアント例 (擬似コード)
import { Task, TaskCreate, Token } from "./models";  // 型定義
import axios from "axios";

export function login(data: { username: string, password: string }): Promise<Token> {
  return axios.post("/token", data);  // JWT発行API呼び出し
}

export function listTasks(token: string): Promise<Task[]> {
  return axios.get("/tasks", { headers: { Authorization: `Bearer ${token}` } });
}

export function createTask(token: string, task: TaskCreate): Promise<Task> {
  return axios.post("/tasks", task, { headers: { Authorization: `Bearer ${token}` } });
}
コードをコピー

package.jsonにコマンドを作成しておきます。

生成されたコード事例

Cursor Composerを使ったフロントエンド開発の自動化

CursorにAPI仕様書を参考資料として提供できます

実際生成されたapi連携コード

勝手にミドルウェア、ページなどの実装も

バックエンドとフロントエンドの連携フロー

1. バックエンド開発（FastAPI）: Pydanticモデルとエンドポイントを定義し、JWT認証など必要な機能を実装。実装と同時にOpenAPI仕様書（openapi.json）が自動生成される。Swagger UIで動作確認しつつ、必要ならフロントエンドに共有するため仕様書ファイルをエクスポート。
2. フロントエンド開発準備: バックエンドの仕様書を基に、OpenAPIコードジェネレータやAIを使ってフロントエンド用のAPIクライアントコードを作成。エンドポイント呼び出し関数やデータ型が出揃う。
3. UI開発（Next.js + shadcn UI）: ジェネレートされたクライアントを呼び出す形でReactコンポーネントを実装。shadcn UIのコンポーネントでレイアウトやフォームを構築し、イベントハンドラ内でAPIクライアント関数を使用。例えば「タスク一覧コンポーネント」はuseEffectフックでapiClient.listTasks(token)を呼び出し、取得したデータをステートにセットして一覧表示、という実装になる。

まとめ

• APIファースト設計: アプリの機能をまずAPIの形で設計し、OpenAPI仕様書を中心に据えて開発を進める。これにより、フロントエンドとバックエンドで齟齬なく並行開発が可能になるうえ、自動生成やテストの土台が整う。
• フレームワークの自動ドキュメント機能活用: FastAPIのように自動でAPIドキュメントを生成してくれるフレームワークを使うことで、最新仕様書の維持コストをゼロにする 。ドキュメントが常に正確な状態なので、チーム内外でのコミュニケーションロスも防げる。
• コード生成で重複実装の排除: OpenAPI -> クライアントコード生成を導入し、HTTPリクエスト周りの重複実装を無くす。人手によるコピペやタイポを排除し、型安全なAPI呼び出しを実現する。特に大規模プロジェクトでは、この仕組みによりAPIクライアント実装の半分以上を自動化できるとの報告もある 。
• 最新AIツールの活用: CursorのようなAIコード補助ツールを積極的に活用し、標準的なコードやパターンはAIに下書きさせる。開発者はロジックやユーザ体験に集中しつつ、AIが提案するコードをレビュー・修正して取り込むことでスピードと品質を両立する 。特に明確な仕様（OpenAPIなど）がある場合、AIの出力精度も上がるため有効。