サイトのAPI図鑑B版
掲載情報が正確でない可能性があります。
開発者向けAPIツール

APIドキュメント自動生成ツールの比較【Swagger UI・Redoc・Stoplight】

OpenAPI仕様(Swagger)に基づくAPIドキュメント生成ツール(Swagger UI・Redoc・Stoplight・Postman)の特徴比較と、FastAPI・Next.js・Express.jsでの自動ドキュメント生成設定を解説します。

#OpenAPI#Swagger#APIドキュメント#開発者ツール

APIドキュメントツールの重要性

質の高いAPIドキュメントは開発者体験(DX)の根幹です。APIを利用する開発者は適切なドキュメントがなければ実装に多大な時間を費やすことになります。OpenAPI仕様(OAS)を使って自動生成されるドキュメントは、コードと常に同期した正確な情報を提供します。

主要なAPIドキュメントツール

Swagger UI

  • 特徴:インタラクティブなAPIテスト機能・OAuth認証サポート
  • 用途:開発中のAPIのリアルタイムテストとドキュメント参照
  • スタイル:シンプル・実用的

Redoc

  • 特徴:3カラムレイアウト・高い可読性・レスポンシブデザイン
  • 用途:外部公開向けの美しいAPIドキュメント
  • スタイル:モダン・読みやすい

Stoplight Studio

  • 特徴:GUIでOpenAPI設計・チーム協業・モック機能
  • 用途:APIデザインファーストでの開発

Postman API Documentation

  • 特徴:コレクションから自動生成・公開URL・コードサンプル自動生成
  • 用途:Postmanを使っているチームのドキュメント共有

FastAPI自動ドキュメントの設定

from fastapi import FastAPI
from pydantic import BaseModel

app = FastAPI(
    title="My API",
    description="Sample APIドキュメント",
    version="1.0.0",
    docs_url="/docs",      # Swagger UI
    redoc_url="/redoc"     # Redoc
)

class Item(BaseModel):
    name: str
    description: str | None = None
    price: float

@app.post("/items/",
    summary="新規アイテムを作成",
    description="アイテムを作成してデータベースに保存します",
    response_description="作成されたアイテムの情報",
    tags=["items"])
async def create_item(item: Item):
    """
    アイテムを作成します:
    - **name**: アイテムの名前(必須)
    - **description**: 説明(任意)
    - **price**: 価格(必須)
    """
    return item

ExpressにSwagger UIを追加する

import express from 'express';
import swaggerJSDoc from 'swagger-jsdoc';
import swaggerUi from 'swagger-ui-express';

const app = express();

const swaggerSpec = swaggerJSDoc({
  definition: {
    openapi: '3.0.0',
    info: {
      title: 'My Express API',
      version: '1.0.0',
      description: 'Express.jsで構築したAPI'
    },
    servers: [{ url: 'http://localhost:3000' }]
  },
  apis: ['./routes/*.js']
});

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerSpec));

/**
 * @openapi
 * /users:
 *   get:
 *     summary: ユーザー一覧を取得
 *     tags: [Users]
 *     responses:
 *       200:
 *         description: 成功
 */
app.get('/users', (req, res) => {
  res.json([{ id: 1, name: 'Taro' }]);
});

APIドキュメントのベストプラクティス

  • すべてのエンドポイントを文書化:省略しない
  • リクエスト・レスポンスの例を含める:具体的な例が理解を助ける
  • エラーレスポンスも文書化:4xx・5xxのケースと意味を説明
  • 認証フローを明示:どのエンドポイントに認証が必要か
  • 変更ログ:APIバージョンごとの変更点を記録

まとめ

OpenAPI仕様に基づいたAPIドキュメントの自動生成は、開発効率の向上と開発者体験の改善に直結します。FastAPIは自動ドキュメント生成が最も簡単で、ExpressではJsDocコメントを使ってドキュメントを生成できます。外部公開向けの美しいドキュメントにはRedocが最適です。

よくある質問

Q.OpenAPIとSwaggerは同じものですか?

もともとはSwagger仕様として知られていましたが、SmartBear社からOpenAPI Initiativeに移管され「OpenAPI仕様(OAS)」と名称が変わりました。現在Swagger UIはOpenAPI仕様に準拠したドキュメントを表示するツールの名称として使われています。

Q.FastAPIで自動的にAPIドキュメントを生成するには?

FastAPIはOpenAPI仕様に準拠したAPIドキュメントを自動生成します。/docsにSwagger UIが、/redocにRedocが自動で有効になります。Pythonの型アノテーションとPydanticモデルからドキュメントが自動生成されます。

Q.既存のExpressアプリにSwagger UIを追加する方法は?

swagger-jsdocとswagger-ui-expressパッケージを使います。JsDocコメントにOpenAPI仕様を記述するか、別途swagger.yamlファイルを用意してエンドポイントにマウントします。

関連記事