開発効率を上げるSwaggerの話

WEBエンジニア勉強会#06　発表資料

Transcript

1. 開発効率を上げる Swaggerの話 @ykagano
2. 1 ▪⾦融系のエンジニアです • SIerの会社 ： 電⼦マネーシステムの受託開発 • 電⼦マネーの会社 ： Web／スマホアプリ開発・企画 • Web系の会社 ： 決済関連のWeb開発 イマココ 加賀野 祐@ykagano
3. 開発効率を上げる Swaggerの話 1. はじめに 2. まず動かしてみる 3. Swagger YAMLを⾒る 4. APIモックを作る 5. さいごに 2
4. 突然ですが開発に疲れてませんか？ 3
5. Swaggerを使うとこれだけ楽になります 4 ・REST APIの仕様を⾒るのが楽 ・REST APIの実⾏ツールを作るのが楽 ・REST APIの仕様を書くのが楽 ・REST APIのモックを作るのが楽
6. ということを聞いて⾊々調べたので ここで発表します 5 内容が間違っていたらあとでこっそり教えてください
7. 開発効率を上げる Swaggerの話 1. はじめに 2. まず動かしてみる 3. Swagger YAMLを⾒る 4. APIモックを作る 5. さいごに 6
8. Swagger-Editorというオンラインツールを使います 7 まず動かしてみる http://editor.swagger.io/ ※httpsは標準のサンプルがクロスドメインで動かなかった
9. 8 左のウィンドウにyaml形式でAPIの仕様を書くと 右のウィンドウに仕様書がリアルタイムで反映されます
10. 書き上がったら「Generate Server」から ⽣成するサーバーアプリケーションを選択します ここではサクッと動かすため「nodejs-server」を選択します 9
11. ダウンロードしたzipを解凍して Terminalから解凍したフォルダ内に移動します 10 サーバーが起動しました
12. 11 http://localhost:8080/docs をブラウザで開く 仕様書が⾒える
13. 12 APIが叩ける
14. 元々サンプルとして⽤意されている 13 http://petstore.swagger.io/v2/pet/1 をローカルサーバーから叩いています http://petstore.swagger.io/ を開くとサンプルAPIの仕様書が⾒れます
15. 14 ・REST APIの仕様を⾒るのが楽 ✅ ・REST APIの実⾏ツールを作るのが楽 ✅ ・REST APIの仕様を書くのが楽 ・REST APIのモックを作るのが楽 ここまでで2つクリア
16. 開発効率を上げる Swaggerの話 1. はじめに 2. まず動かしてみる 3. Swagger YAMLを⾒る 4. APIモックを作る 5. さいごに 15
17. 16 1. メタデータとサーバー情報の記述 2. エンドポイントの記述 3. モデル定義の記述 サンプルを削ったので⾒ていきます yamlにはざっくりこの３点を書きます
18. 17 1. メタデータとサーバー情報の記述
19. 18 2. エンドポイントの記述
20. 19 3. モデル定義の記述
21. 20 ほら簡単でしょ？
22. 21 ・REST APIの仕様を⾒るのが楽 ✅ ・REST APIの実⾏ツールを作るのが楽 ✅ ・REST APIの仕様を書くのが楽 ✅ ・REST APIのモックを作るのが楽 ここまでで3つクリア
23. 開発効率を上げる Swaggerの話 1. はじめに 2. まず動かしてみる 3. Swagger YAMLを⾒る 4. APIモックを作る 5. さいごに 22
24. 突然ですがオンラインツールだと セキュリティに不安がありませんか？ 23
25. 当たり前ですが オフライン版もあります 24 公式 https://swagger.io/swagger-editor/ ソース https://github.com/swagger-api/swagger-editor
26. Editorをインストールして起動します 25 // git cloneだと重かったので、配布URLからzipでwget $ wget https://codeload.github.com/swagger-api/swagger-editor/zip/master $ unzip master $ cd swagger-editor-master $ npm install $ npm start あとはオンラインエディタと 使い⽅は同じです
27. 26 ホスト名を書かなければlocalhostが APIサーバーになります
28. 27 APIを叩くと常に同じレスポンスが返ります
29. 28 レスポンスを変えるには yamlでexampleを指定するか seviceフォルダのjsを直接編集します
30. 29 ・REST APIの仕様を⾒るのが楽 ✅ ・REST APIの実⾏ツールを作るのが楽 ✅ ・REST APIの仕様を書くのが楽 ✅ ・REST APIのモックを作るのが楽 ✅ これで全部クリア
31. 開発効率を上げる Swaggerの話 1. はじめに 2. まず動かしてみる 3. Swagger YAMLを⾒る 4. APIモックを作る 5. さいごに 30
32. 今⽇の話はあくまで基本的な使い⽅です REST APIのソースコードにアノテーションを記述して ・ソース＝ドキュメント ・ソース＝実⾏ツール にしたりもできる（らしい それでは 31