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

IT

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

投稿日:

スポンサーリンク

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