素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

投稿日: 2019年7月21日
最終更新日:

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

Anker PowerCor

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

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

【最新機種】GoPro hero11 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

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

スポンサーリンク

336×280




SwaggerUIにつぐ新たな勢力

以前、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を用意しましょう。

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

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

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

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

終わりに

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

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

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , , ,

blogenist

Author: blogenist

関連記事

YouTubeも見てね♪