【SwaggerUIはもう古い？！】今時のイケてるデザインなAPIドキュメントツール「ReDoc」の導入方法と使い方【簡単】

Anker PowerCor

Anker PowerCore モバイルバッテリー 20000mAh iPhone iPad Android

created by Rinker

Anker

¥3,990 (2025/01/05 12:09:11時点 Amazon調べ-詳細)

旅行には必須の大容量モバイルバッテリー！

【最新機種】GoPro hero11 Black

【最新機種】GoPro HERO13 Black【完全防水】

created by Rinker

¥61,300 (2025/01/05 20:59:47時点楽天市場調べ-詳細)

最新機種でVlogの思い出を撮影しよう！

[ノースフェイス] THE NORTH FACE メンズアウターマウンテンライトジャケット

created by Rinker

THE NORTH FACE(ザノースフェイス)

¥33,000 (2025/01/05 13:22:08時点 Amazon調べ-詳細)

防水暴風で耐久性抜群なので旅行で大活躍です！

ペヤングソースやきそば 120g×18個

created by Rinker

ペヤング

¥3,280 (2025/01/05 12:33:38時点 Amazon調べ-詳細)

とりあえず保存食として買っておけば間違いなし！

レッドブルエナジードリンク 250ml×24本

created by Rinker

Red Bull(レッドブル)

¥4,000 (2025/01/05 12:33:39時点 Amazon調べ-詳細)

翼を授けよう！

ドラゴンクエストメタリックモンスターズギャラリーメタルキング

created by Rinker

スクウェア・エニックス(SQUARE ENIX)

¥3,940 (2025/01/05 12:41:47時点 Amazon調べ-詳細)

みんな大好き経験値の塊をデスクに常備しておこう！

サンディスク microSD 128GB

サンディスク microSD 128GB UHS-I Class10 Nintendo Switch SanDisk Ultra SDSQUA4-128G-EPK

created by Rinker

SanDisk

¥3,279 (2025/01/05 12:33:41時点 Amazon調べ-詳細)

スマホからSwitchまで使える大容量MicroSDカード！

1 SwaggerUIにつぐ新たな勢力
2 ReDoc
3 手順
- 3.1 Htmlファイルを用意
4 終わりに

SwaggerUIにつぐ新たな勢力

以前、Swaggerに関する記事をご紹介しました。

参考

【炎上回避】APIドキュメントはSwaggerで定義すると幸せになれる説

そして、先日SwaggerUIに取って代わりそうな新たなUIツールを発見したのでご紹介しようと思います。

ReDoc

What’s?

ReDocとは、SwaggerSpecで書かれた定義を元に、Htmlベースのドキュメントページを作成してくれるツールとなっています。

OpenAPI/Swagger-generated API Reference DocumentationRedocly/redoc: 📘 OpenAPI/Swagger-generated API Reference Documentation

SwaggerUIとの違いは？

ここだけの説明を見ると、SwaggerUIと同じじゃん！と思う方もいると思いますが、とりあえずDEMOページを見てみてください。

ちなみにSwaggerUIはDEMOページと比較してみてください。

感性は人それぞれですが、少なくとも筆者はReDocの方が見やすく感じました。

3カラムに分けられており、それぞれのカラム内の項目も見やすく情報が整理されています。

なんとなくですがフォントやデザインも今風な気がしますね。笑

さらにReDocの方はカスタマイズもしやすいとの事！

使い方も簡単

では、実際にどうやって使うの？！というと、SwaggerUIと同様に特定のhtmlを配置してその中からSwaggerSpecを読み込むだけです。

なので、SwaggerUIからの乗り換えも可能ですし、両方を共存させることが可能です！

それでは、実際にReDocを導入するために必要なHtmlを用意してみましょう。

手順

Htmlファイルを用意

ReDocを表示するためのHtmlを用意しましょう。

公式ページにあるサンプルをベースにする形で良いです。
一旦はこのような形になりました。

<!DOCTYPE html>
<html>
  <head>
    <title>ReDoc</title>
    <!-- needed for adaptive design -->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">
 
    <!--
    ReDoc doesn't change outer page styles
    -->
    <style>
      body {
        margin: 0;
        padding: 0;
      }
    </style> 
  </head>
  <body>
    <redoc spec-url="../spec.yaml"></redoc><!-- Specへのパス -->
    <script src="https://cdn.jsdelivr.net/npm/redoc/bundles/redoc.standalone.js"> </script> 
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>ReDoc</title>

<!--

ReDoc doesn't change outer page styles

-->

<style>

body {

margin: 0;

padding: 0;

}

</style>

</head>

<body>

</body>

</html>

準備はたったこれだけ。
CDNで必要なスクリプト類を読み込めるのでめちゃくちゃ簡単です！

SwaggerUIの場合は関連する各ファイルもサーバーに配置して管理する必要があったので、この辺もとても導入しやすくなっていますね。

あとは、サーバーにSpeckファイルと合わせて配置するだけで簡単にAPIドキュメントをブラウザ管理する事が出来ちゃいます。

終わりに

以上のように、同じSpecファイルを元にイケてるAPIドキュメントページを作成する事が出来ました。

これからAPIドキュメントを作成する方は、SwaggerUIではなくReDocを試してみてはいかがでしょうか♪

【SwaggerUIはもう古い？！】今時のイケてるデザインなAPIドキュメントツール「ReDoc」の導入方法と使い方【簡単】

Anker PowerCor

【最新機種】GoPro hero11 Black

[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット

ペヤング ソースやきそば 120g×18個

レッドブル エナジードリンク 250ml×24本

ドラゴンクエスト メタリックモンスターズギャラリー メタルキング

サンディスク microSD 128GB

SwaggerUIにつぐ新たな勢力

ReDoc

What’s?

SwaggerUIとの違いは？

使い方も簡単

手順

Htmlファイルを用意

終わりに

CATEGORIES & TAGS

[ノースフェイス] THE NORTH FACE メンズアウターマウンテンライトジャケット

ペヤングソースやきそば 120g×18個

レッドブルエナジードリンク 250ml×24本

ドラゴンクエストメタリックモンスターズギャラリーメタルキング