【リドック】

ReDoc とは?

💡 APIドキュメントを雑誌のように美しく仕上げる職人
📌 このページのポイント
ReDoc の3カラムレイアウト ナビゲーション Users Products GET /products POST /products Orders Authentication 説明・パラメータ GET /products 商品一覧を取得します category (query) - string limit (query) - integer レスポンス 200 400 コード例 curl -X GET \ /api/products \ -H "Accept: json" // Response 200 {"id": 1, "name": "Product", "price": 1980} 左カラム 中央カラム 右カラム OpenAPI定義から自動生成される3カラムレイアウト
ReDocの3カラムレイアウトのイメージ
ひよこ ひよこ

ReDocってSwagger UIと何が違うの?

ペンギン先生 ペンギン先生

Swagger UIは「試す」ことに特化していて、ReDocは「読む」ことに特化しているよ。ReDocは3カラムレイアウトで、左にメニュー・中央に解説・右にコード例が並ぶから、まるで技術書のように読みやすいんだ

ひよこ ひよこ

3カラムレイアウトってどんな感じなの?

ペンギン先生 ペンギン先生

Stripeの公式APIドキュメントを見たことがあるかな?あの左メニュー・中央説明・右コード例というレイアウトはReDocが広めたスタイルなんだ。大量のエンドポイントがあっても迷子にならないよ

ひよこ ひよこ

導入は簡単なの?

ペンギン先生 ペンギン先生

めちゃくちゃ簡単だよ。HTMLファイルにscriptタグ1行を追加して、OpenAPIの定義ファイルのURLを指定するだけ。CLIツールもあって、コマンド一発で単一HTMLファイルに出力できるんだ

ひよこ ひよこ

Swagger UIとReDoc、どっちを使えばいいのかな?

ペンギン先生 ペンギン先生

開発者が自分でテストしたいならSwagger UI、社外のAPIユーザーに提供するドキュメントならReDocがおすすめだよ。両方併用しているプロジェクトも多いね。開発中はSwagger UIで動作確認、公開用ドキュメントはReDocで生成する、というパターンが定番だよ

ひよこ ひよこ

カスタマイズはどのくらいできるの?

ペンギン先生 ペンギン先生

テーマ設定でフォント・カラー・ロゴなどを細かく変更できるよ。x-tagGroupsというOpenAPIの拡張を使えば、エンドポイントをカテゴリごとにグループ分けもできるんだ。企業のブランドに合わせたドキュメントが簡単に作れるね

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「ReDoc」って出てきたら「OpenAPIからきれいなドキュメントを作るツール」と思えればだいたいOK!
📖 おまけ:英語の意味
「ReDoc」 = Re-Documentation(再ドキュメント化)
💬 「Re(再び)+ Doc(ドキュメント)」で、APIの定義を美しいドキュメントに再構成するという意味が込められているよ
← 用語集にもどる