Upgrade to Pro — share decks privately, control downloads, hide ads and more …

開発効率を上げるSwaggerの話

ykagano
April 06, 2018

 開発効率を上げるSwaggerの話

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

ykagano

April 06, 2018
Tweet

More Decks by ykagano

Other Decks in Programming

Transcript

  1. 開発効率を上げる
    Swaggerの話
    @ykagano

    View full-size slide

  2. 1
    ■⾦融系のエンジニアです
    • SIerの会社 : 電⼦マネーシステムの受託開発
    • 電⼦マネーの会社 : Web/スマホアプリ開発・企画
    • Web系の会社 : 決済関連のWeb開発 イマココ
    加賀野 祐@ykagano

    View full-size slide

  3. 開発効率を上げる
    Swaggerの話
    1. はじめに
    2. まず動かしてみる
    3. Swagger YAMLを⾒る
    4. APIモックを作る
    5. さいごに
    2

    View full-size slide

  4. 突然ですが開発に疲れてませんか?
    3

    View full-size slide

  5. Swaggerを使うとこれだけ楽になります
    4
    ・REST APIの仕様を⾒るのが楽
    ・REST APIの実⾏ツールを作るのが楽
    ・REST APIの仕様を書くのが楽
    ・REST APIのモックを作るのが楽

    View full-size slide

  6. ということを聞いて⾊々調べたので
    ここで発表します
    5
    内容が間違っていたらあとでこっそり教えてください

    View full-size slide

  7. 開発効率を上げる
    Swaggerの話
    1. はじめに
    2. まず動かしてみる
    3. Swagger YAMLを⾒る
    4. APIモックを作る
    5. さいごに
    6

    View full-size slide

  8. Swagger-Editorというオンラインツールを使います
    7
    まず動かしてみる
    http://editor.swagger.io/
    ※httpsは標準のサンプルがクロスドメインで動かなかった

    View full-size slide

  9. 8
    左のウィンドウにyaml形式でAPIの仕様を書くと
    右のウィンドウに仕様書がリアルタイムで反映されます

    View full-size slide

  10. 書き上がったら「Generate Server」から
    ⽣成するサーバーアプリケーションを選択します
    ここではサクッと動かすため「nodejs-server」を選択します
    9

    View full-size slide

  11. ダウンロードしたzipを解凍して
    Terminalから解凍したフォルダ内に移動します
    10
    サーバーが起動しました

    View full-size slide

  12. 11
    http://localhost:8080/docs をブラウザで開く
    仕様書が⾒える

    View full-size slide

  13. 12
    APIが叩ける

    View full-size slide

  14. 元々サンプルとして⽤意されている
    13
    http://petstore.swagger.io/v2/pet/1
    をローカルサーバーから叩いています
    http://petstore.swagger.io/
    を開くとサンプルAPIの仕様書が⾒れます

    View full-size slide

  15. 14
    ・REST APIの仕様を⾒るのが楽 ✅
    ・REST APIの実⾏ツールを作るのが楽 ✅
    ・REST APIの仕様を書くのが楽
    ・REST APIのモックを作るのが楽
    ここまでで2つクリア

    View full-size slide

  16. 開発効率を上げる
    Swaggerの話
    1. はじめに
    2. まず動かしてみる
    3. Swagger YAMLを⾒る
    4. APIモックを作る
    5. さいごに
    15

    View full-size slide

  17. 16
    1. メタデータとサーバー情報の記述
    2. エンドポイントの記述
    3. モデル定義の記述
    サンプルを削ったので⾒ていきます
    yamlにはざっくりこの3点を書きます

    View full-size slide

  18. 17
    1. メタデータとサーバー情報の記述

    View full-size slide

  19. 18
    2. エンドポイントの記述

    View full-size slide

  20. 19
    3. モデル定義の記述

    View full-size slide

  21. 20
    ほら簡単でしょ?

    View full-size slide

  22. 21
    ・REST APIの仕様を⾒るのが楽 ✅
    ・REST APIの実⾏ツールを作るのが楽 ✅
    ・REST APIの仕様を書くのが楽 ✅
    ・REST APIのモックを作るのが楽
    ここまでで3つクリア

    View full-size slide

  23. 開発効率を上げる
    Swaggerの話
    1. はじめに
    2. まず動かしてみる
    3. Swagger YAMLを⾒る
    4. APIモックを作る
    5. さいごに
    22

    View full-size slide

  24. 突然ですがオンラインツールだと
    セキュリティに不安がありませんか?
    23

    View full-size slide

  25. 当たり前ですが
    オフライン版もあります
    24
    公式 https://swagger.io/swagger-editor/
    ソース https://github.com/swagger-api/swagger-editor

    View full-size slide

  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
    あとはオンラインエディタと
    使い⽅は同じです

    View full-size slide

  27. 26
    ホスト名を書かなければlocalhostが
    APIサーバーになります

    View full-size slide

  28. 27
    APIを叩くと常に同じレスポンスが返ります

    View full-size slide

  29. 28
    レスポンスを変えるには
    yamlでexampleを指定するか seviceフォルダのjsを直接編集します

    View full-size slide

  30. 29
    ・REST APIの仕様を⾒るのが楽 ✅
    ・REST APIの実⾏ツールを作るのが楽 ✅
    ・REST APIの仕様を書くのが楽 ✅
    ・REST APIのモックを作るのが楽 ✅
    これで全部クリア

    View full-size slide

  31. 開発効率を上げる
    Swaggerの話
    1. はじめに
    2. まず動かしてみる
    3. Swagger YAMLを⾒る
    4. APIモックを作る
    5. さいごに
    30

    View full-size slide

  32. 今⽇の話はあくまで基本的な使い⽅です
    REST APIのソースコードにアノテーションを記述して
    ・ソース=ドキュメント
    ・ソース=実⾏ツール
    にしたりもできる(らしい
    それでは
    31

    View full-size slide