APIドキュメンテーションとmockサーバ #meguroes #gotandajs

Meguro.es x Gotanda.js での発表資料です

Transcript

1. APIドキュメンテーション
   と
   mockサーバ
   2017/04/28 Meguro.es x Gotanda.js
   @mizuki_r
   

   View Slide

2. @mizuki_r
   • シニアフロントエンドエンジニア
   • エンジニア
   2
   #javascript #gotandajs
   #meguroes #perl #kichijojipm
   五反田のM社で位置ゲー開発に携わる。

   エンジニアとして新卒入社して7年目に突
   入。3年目くらいからフロントエンドエン
   ジニアを兼任。
   about me
   こんな人です
   

   View Slide

3. theme
   

   View Slide

4. APIドキュメンテーション
   と
   mockサーバ
   

   View Slide

5. まあつまりは、
   

   harikoの話です
   

   View Slide

6. hariko
   

   View Slide

7. what is hariko
   • JSON API Mock Server.
   • API-Blueprint based.
   

   View Slide

8. why talk about hariko
   • ࠷ۙ࢖ͬͯΔ
   • ͪΐͬͱલʹΞοϓσʔτͨ͠
   • ͦ͏ݴ͑͹ͪΌΜͱ঺հͯ͠ͳ͍ͳˡ
   

   View Slide

9. context
   

   View Slide

10. 開発体制
    ཁ݅ UI
    API
    ϞοΫ
    API
    αʔ
    ό
    ʔ
    ·ͣ͸UI ৘ใΛ੔ཧ͠
    αʔόΛ
    ࡞Γ
    UIʹ൓ө͢Δ
    

    View Slide

11. 解決したい問題
    • stubcell / json mockͳͲ͸JSONΛஔ͚ͩ͘
    • આ໌ɾυΩϡϝϯςʔγϣϯ͕ෆ଍
    • υΩϡϝϯτͱͯ͠੔ܗ͞Εͳ͍͠ɺͦ΋ͦ΋ಡ
    Έʹ͍͘
    →͜Ε͸API-Blueprint͕ղܾͯ͘͠ΕΔ
    

    View Slide

12. harikoで解決したい
    • MemberResourceͷදݱΛ࠷খͰॻ͖͍ͨ
    • ϖʔδϟʔͷόϦΤʔγϣϯΛදݱ͍ͨ͠
    • खಈͰΞϓϦέʔγϣϯͷڍಈΛ࠶ݱ͍ͨ͠
    →ͨͩͷJSONΑΓ΋ͪΐͬͱݡ͍ͨ͘͠
    

    View Slide

13. hariko’s power
    

    View Slide

14. 複数のレスポンスのパターン
    /api/users/:idͱ͍͏API͕͋Δͱͯ͠ɺ
    id͕1, 2, 3, ͦͷଞͰҧ͏ϨεϙϯεΛฦ͍ͨ͠
    

    View Slide

15. クエリパラメータによって
    レスポンスを変えたい
    /api/items?page=1
    /api/items?page=2
    Ͱ10݅ͱ5݅ͰϨεϙϯεΛฦ͍ͨ͠
    

    View Slide

16. オンラインでデータを書き換えたい
    1. POST /api/messagesʹϦΫΤετΛૹΔ
    2. mockΛ௥ه͢Δ
    3. GET /api/messagesΛୟ͘ͱ௥هͨ͠σʔλ
    Λड͚औΕΔ
    

    View Slide

17. demo
    

    View Slide

18. まとめ
    

    View Slide

19. まとめ
    • harikoͷ঺հͰͨ͠
    • େن໛ͳAPIΛ؅ཧ͢ΔͨΊͷॊೈੑΛ࣋ͬͨMockαʔόͰ
    ͢
    • ҎԼͷΑ͏ͳํʹ͓͢͢ΊͰ͢
    • JSONஔ͚ͩ͘͡Ό΋͏ͭΒ͍
    • ॊೈʹΑ͠ͳʹͯ͠΄͍͠
    

    View Slide

20. ご清聴ありがとうございました
    

    View Slide