OpenAPI/Swagger API Practical Guide with Claude Code

OpenAPI/Swagger定義をClaude Codeで効率化する

API設計ファーストのアプローチでは、実装前にOpenAPI仕様を定義します。Claude Codeを使えば、包括的なAPI仕様書の作成からクライアントコード生成まで一気に進められます。

OpenAPI仕様の作成

RESTful APIの定義

> ブログAPIのOpenAPI 3.1仕様を作成して。
> 記事のCRUD、タグ管理、認証を含めて。

openapi: 3.1.0
info:
  title: Blog API
  version: 1.0.0
  description: ブログ管理用REST API

servers:
  - url: https://api.example.com/v1
    description: 本番環境

paths:
  /posts:
    get:
      summary: 記事一覧の取得
      operationId: listPosts
      tags: [posts]
      parameters:
        - $ref: '#/components/parameters/PageParam'
        - $ref: '#/components/parameters/LimitParam'
        - name: tag
          in: query
          schema:
            type: string
          description: タグでフィルター
      responses:
        '200':
          description: 記事一覧
          content:
            application/json:
              schema:
                type: object
                properties:
                  data:
                    type: array
                    items:
                      $ref: '#/components/schemas/Post'
                  meta:
                    $ref: '#/components/schemas/Pagination'
    post:
      summary: 記事の作成
      operationId: createPost
      tags: [posts]
      security:
        - bearerAuth: []
      requestBody:
        required: true
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/CreatePostRequest'
      responses:
        '201':
          description: 作成成功
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/Post'
        '400':
          $ref: '#/components/responses/BadRequest'
        '401':
          $ref: '#/components/responses/Unauthorized'

components:
  schemas:
    Post:
      type: object
      required: [id, title, content, createdAt]
      properties:
        id:
          type: string
          format: uuid
        title:
          type: string
          maxLength: 200
        content:
          type: string
        tags:
          type: array
          items:
            type: string
        createdAt:
          type: string
          format: date-time
        updatedAt:
          type: string
          format: date-time

    CreatePostRequest:
      type: object
      required: [title, content]
      properties:
        title:
          type: string
          minLength: 1
          maxLength: 200
        content:
          type: string
          minLength: 1
        tags:
          type: array
          items:
            type: string

    Pagination:
      type: object
      properties:
        currentPage:
          type: integer
        totalPages:
          type: integer
        totalItems:
          type: integer

  securitySchemes:
    bearerAuth:
      type: http
      scheme: bearer
      bearerFormat: JWT

コード生成

TypeScript型とクライアントの自動生成

> OpenAPI定義からTypeScriptの型定義とAPIクライアントを生成して。
> openapi-typescriptを使って。

// 生成された型を使ったAPIクライアント
import type { paths } from './generated/api';
import createClient from 'openapi-fetch';

const client = createClient<paths>({
  baseUrl: 'https://api.example.com/v1',
});

// 型安全なAPI呼び出し
const { data, error } = await client.GET('/posts', {
  params: {
    query: { page: 1, limit: 10, tag: 'typescript' },
  },
});

バリデーション統合

OpenAPI定義をランタイムバリデーションに活用することで、仕様と実装の乖離を防げます。

> OpenAPI定義からZodスキーマを生成して。
> リクエスト・レスポンスの両方をバリデーションして。

モックサーバー

OpenAPI定義からモックサーバーを立ち上げ、フロントエンド開発を並行して進められます。Claude Codeに「Prismでモックサーバーを起動する設定を作って」と依頼すれば、即座に利用可能です。

Zusammenfassung

Claude Codeを使えば、OpenAPI仕様の作成からコード生成、バリデーション統合まで一貫したAPI開発ワークフローを構築できます。API開発ガイドやAPIテスト自動化も合わせて参考にしてください。

OpenAPIの詳細はOpenAPI InitiativeおよびSwagger公式ドキュメントを参照してください。