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

Web API 講座 in Treasure2017

Web API 講座 in Treasure2017

2017/08/17

VOYAGE GROUPにて開催されているエンジニア志望学生向けインターンシップTreasure https://voyagegroup.com/internship/treasure/ にてWeb API設計入門の話をした際のスライドです。

Go Nakanishi

August 17, 2017
Tweet

More Decks by Go Nakanishi

Other Decks in Technology

Transcript

  1. Web API ߨ࠲
    @gomachan46
    Treasure2017

    View full-size slide

  2. ࣗݾ঺հ
    ͳ͔ʹ͠͝͏
    (@gomachan46)
    VOYAGE MARKETING
    Ruby, PHP, Golang, …
    Treasure2012ࢀՃ

    View full-size slide

  3. ͜Θ͘ͳ͍Symfony2 - ۀ຿Ͱ࢖ͬͯ
    ؾ͍ͮͨ7ͭͷྑ͍ͱ͜Ζ
    ࣾ಺޲͚χϡʔεఏڙAPIΛS3+API GatewayͰ
    αʔόʔϨεʹαΫͬͱߏஙͯ͠Έͨ

    View full-size slide

  4. ͋ͳͨʹ͓͢͢Ί͢ΔͨͬͨҰͭͷ࠷ߴͷΩʔϘʔυ
    λʔϛφϧͰ༡΂ΔԻήʔ࡞ͬͯΈͨ
    ͋ͳͨʹ͓͢͢Ί͢ΔWebSocketΛ༻͍ͨશ͘৽͍͠
    OAuthͷ͝঺հ

    View full-size slide

  5. ΢ΥʔϛϯάΞοϓ
    ͋͞ͷ͡ΎΜͼ͏ΜͲ͏

    View full-size slide

  6. 7ਓνʔϜΛ૊ΜͰ͍ͩ͘͞
    ͓୊Λઌ಄ͷਓʹ͚͓ͩ఻͑͠·͢
    ࣋ͪ࣌ؒ
    ඳ࣌ؒ͘: 30ඵ
    લͷਓͷֆΛݟΔ࣌ؒ: 10ඵ
    ͓ֆ͔͖఻ݴήʔϜ

    View full-size slide

  7. ࢖͏͚ͩͰͳ͘
    ࢖͍΍͍͢APIΛ
    ఏڙͰ͖ΔΤϯδχΞʹͳΔ
    ࠓ೔ͷΰʔϧ

    View full-size slide

  8. Web
    WebΞϓϦέʔγϣϯ
    Web API
    Web APIઃܭ
    ͓͠ͳ͕͖

    View full-size slide

  9. Web is … ?
    WebͷਤΛඳ͍ͯΈ·͠ΐ͏

    View full-size slide

  10. –Wikipediaઌੜ
    World Wide Webͱ͸ɺ
    Πϯλʔωοτ্Ͱఏڙ͞ΕΔ
    ϋΠύʔςΩετγεςϜͰ͋Δɻ

    View full-size slide

  11. –Wikipediaઌੜ
    ϋΠύʔςΩετͱ͸ɺ
    Πϯλʔωοτ্ʹࢄࡏ͢Δ
    υΩϡϝϯτಉ࢜Λ૬ޓʹࢀরՄೳʹ͢Δ
    γεςϜͰ͋Δɻ

    View full-size slide

  12. υΩϡϝϯτಉ࢜Λ
    ΫϞͷ૥ͷΑ͏ʹ
    ϦϯΫͰ݁ͼ͚ͭΔγεςϜ
    Web is … ?

    View full-size slide

  13. WebΞϓϦέʔγϣϯ

    View full-size slide

  14. αʔόαΠυॏࢹ
    suzuken/wikiελΠϧ
    ΫϥΠΞϯταΠυॏࢹ
    suzuken/go-todoελΠϧ
    ΫϥΠΞϯταΠυͱαʔόαΠυ

    View full-size slide

  15. αʔόαΠυॏࢹ
    ਤΛඳ͍ͯΈ·͠ΐ͏

    View full-size slide

  16. αʔόαΠυ͸HTMLΛ

    ಈతʹ࡞੒
    ΫϥΠΞϯταΠυ͸HTMLΛ

    ϨϯμϦϯά͢Δ͚ͩ
    αʔόαΠυॏࢹ

    View full-size slide

  17. ΫϥΠΞϯταΠυॏࢹ
    ਤΛඳ͍ͯΈ·͠ΐ͏

    View full-size slide

  18. ΫϥΠΞϯταΠυ͸HTMLΛ

    ಈతʹ࡞੒
    αʔόαΠυ͸HTML࡞੒ʹඞ
    ཁͳJSONΛฦ͚ͩ͢
    ΫϥΠΞϯταΠυॏࢹ

    View full-size slide

  19. Webͱ͸Կ͔͕Θ͔Δ
    WebΞϓϦέʔγϣϯͷྲྀΕ͕Θ͔Δ
    ΫϥΠΞϯταΠυͱαʔόαΠυͷ
    ΍ΓऔΓ͕Θ͔Δ
    Web APIΛֶͿԼ஍͕Ͱ͖Δ
    ͜͜·Ͱͷ·ͱΊ

    View full-size slide

  20. Web API is … ?
    Web APIͷਤΛඳ͍ͯΈ·͠ΐ͏

    View full-size slide

  21. API is … ?
    Wikipediaઌੜʹฉ͍ͯΈ·͠ΐ͏

    View full-size slide

  22. –Wikipediaઌੜ
    APIͱ͸ɺ
    ιϑτ΢ΣΞίϯϙʔωϯτ͕
    ޓ͍ʹ΍ΓͱΓ͢Δͷʹ࢖༻͢Δ
    ΠϯλϑΣʔεͷ࢓༷Ͱ͋Δɻ

    View full-size slide

  23. –Wikipediaઌੜ
    ͭ·Γɺ؆୯ʹ͍͑͹ɺ
    ΞϓϦέʔγϣϯΛϓϩάϥϜ͢Δʹ͋ͨͬͯɺ
    ϓϩάϥϜͷखؒΛলͨ͘Ίɺ
    ΋ͬͱ؆ܿʹϓϩάϥϜͰ͖ΔΑ͏ʹ
    ઃఆ͞ΕͨΠϯλʔϑΣʔεͷࣄͰ͋Δɻ

    View full-size slide

  24. Webܦ༝Ͱ
    ར༻Ͱ͖ΔAPI
    Web API is … ?

    View full-size slide

  25. APIͱ͸Կ͔͕Θ͔Δ
    Web APIͱ͸Կ͔͕Θ͔Δ
    Web APIͷ࢖ΘΕΔྲྀΕ͕Θ͔Δ
    Web APIઃܭΛֶͿԼ஍͕Ͱ͖Δ
    ͜͜·Ͱͷ·ͱΊ

    View full-size slide

  26. Web APIઃܭ

    View full-size slide

  27. URL
    HTTP
    JSON
    Web APIઃܭ

    View full-size slide

  28. URL
    Uniform Resource Locator

    View full-size slide

  29. Web্ͷ৘ใ(Ϧιʔε)Λ
    Ұҙʹࢦࣔ͢͠

    View full-size slide

  30. ಈࢺ͸࢖Θ໊ͣࢺΛ༻͍Δ
    URL͸ϦιʔεΛࢦࣔ͢͠ࣄʹઐ೦
    ϦʔμϒϧURLΛҙࣝ͢Δ
    ౷ҰײΛ࣋ͨͤΔ
    URL

    View full-size slide

  31. /api/articles
    هࣄ৘ใҰཡ
    /api/articles/1
    ID:1ͷهࣄ৘ใ
    e.g. هࣄ৘ใΛѻ͏API

    View full-size slide

  32. ࣍ͷػೳΛఏڙ͢ΔAPIͷURLΛߟ͍͑ͯͩ͘͞
    هࣄ৘ใҰཡΛऔಘ͢Δ: /api/articles
    ID:1ͷهࣄ৘ใΛऔಘ͢Δ: /api/articles/1
    هࣄ৘ใΛ࡞੒͢Δ: ???
    ID:1ͷهࣄ৘ใΛߋ৽͢Δ: ???
    ID:1ͷهࣄ৘ใΛ࡟আ͢Δ: ???
    ԋश: URL

    View full-size slide

  33. هࣄ৘ใҰཡΛऔಘ͢Δ: /api/articles
    ID:1ͷهࣄ৘ใΛऔಘ͢Δ: /api/articles/1
    هࣄ৘ใΛ࡞੒͢Δ: /api/articles
    ID:1ͷهࣄ৘ใΛߋ৽͢Δ: /api/articles/1
    ID:1ͷهࣄ৘ใΛ࡟আ͢Δ: /api/articles/1
    ԋश: URL

    View full-size slide

  34. ΫΤϦετϦϯά
    Query String

    View full-size slide

  35. ?Ҏલ͸Ϧιʔεͷҙຯ
    ?Ҏ߱͸ΫϥΠΞϯτͷҙࢥ
    ?Ҏ߱͸ແͯ͘΋ಈ͘
    ΫΤϦετϦϯά

    View full-size slide

  36. /api/articles?page=2
    Ϧιʔεͷҙຯ
    هࣄ৘ใҰཡ
    ΫϥΠΞϯτͷҙࢥ
    2ϖʔδ໨Λ͍ͩ͘͞
    e.g. هࣄ৘ใΛѻ͏API

    View full-size slide

  37. ࠷దͳURLΛͦΕͧΕબ୒͍ͯͩ͘͠͞
    ݕࡧͰ͖ΔAPIΛ࡞Γ͍ͨ৔߹
    /api/articles/search/suzuken
    /api/articles/search?q=suzuken
    ͋ΔهࣄͷίϝϯτΛऔಘ͢ΔAPIΛ࡞Γ͍ͨ৔߹
    /api/articles/1/comments
    /api/comments?article=1
    ԋश: ΫΤϦετϦϯά

    View full-size slide

  38. HTTP
    HyperText Transfer Protocol

    View full-size slide

  39. εςʔτϨε
    HTTPϝιου
    εςʔλείʔυ
    HTTPϔομ
    HTTP

    View full-size slide

  40. εςʔτϨε

    View full-size slide

  41. εςʔτϨε is … ?
    ঢ়ଶ͕ͳ͍ #ͱ͸

    View full-size slide

  42. * νΩνʔηοτ
    * νΩνʔ
    * αΠυϝχϡʔ
    * υϦϯΫ
    νΩνʔηοτΛ஫จ͍ͯͩ͘͠͞
    ʁ
    ʁ
    ʁ

    View full-size slide

  43. HTTPϝιου

    View full-size slide

  44. Ϧιʔεʹର͢Δ
    ॲཧΛද͢

    View full-size slide

  45. GET/POST/PUT/DELETE
    ͜Ε͚ͩʂ

    View full-size slide

  46. Ϧιʔε(URL)ʹରͯ͠ԿΛ͢Δ͔
    4छྨͷத͔ΒબͿ͚ͩ
    બͿͨΊʹͪΌΜͱϝιουͷ
    ࣋ͭҙຯɾಛ௃Λཧղ͢Δ
    HTTPϝιου

    View full-size slide

  47. ϝιου ҙຯ
    Կճ΍ͬͯ΋
    ݁Ռ͕ಉ͔͡
    ϦιʔεΛ
    มߋ͠ͳ͍͔
    (&5 औಘ ˓ ˓
    1045 ࡞੒ ☓ ☓
    165 ߋ৽ ˓ ☓
    %&-&5& ࡟আ ˓ ☓

    View full-size slide

  48. هࣄ৘ใҰཡΛऔಘ͢Δ: /api/articles
    ID:1ͷهࣄ৘ใΛऔಘ͢Δ: /api/articles/1
    هࣄ৘ใΛ࡞੒͢Δ: /api/articles
    ID:1ͷهࣄ৘ใΛߋ৽͢Δ: /api/articles/1
    ID:1ͷهࣄ৘ใΛ࡟আ͢Δ: /api/articles/1
    ԋश: URL

    View full-size slide

  49. ࣍ͷػೳΛఏڙ͢ΔAPIͷHTTPϝιουΛߟ͍͑ͯͩ͘͞
    هࣄ৘ใҰཡΛऔಘ͢Δ: ??? /api/articles
    ID:1ͷهࣄ৘ใΛऔಘ͢Δ: ??? /api/articles/1
    هࣄ৘ใΛ࡞੒͢Δ: ??? /api/articles
    ID:1ͷهࣄ৘ใΛߋ৽͢Δ: ??? /api/articles/1
    ID:1ͷهࣄ৘ใΛ࡟আ͢Δ: ??? /api/articles/1
    ԋश: HTTPϝιου

    View full-size slide

  50. هࣄ৘ใҰཡΛऔಘ͢Δ: GET /api/articles
    ID:1ͷهࣄ৘ใΛऔಘ͢Δ: GET /api/articles/1
    هࣄ৘ใΛ࡞੒͢Δ: POST /api/articles
    ID:1ͷهࣄ৘ใΛߋ৽͢Δ: PUT /api/articles/1
    ID:1ͷهࣄ৘ใΛ࡟আ͢Δ: DELETE /api/articles/1
    ԋश: HTTPϝιου

    View full-size slide

  51. εςʔλείʔυ

    View full-size slide

  52. εςʔτϨε
    HTTPϝιου
    εςʔλείʔυ
    HTTPϔομ
    HTTP

    View full-size slide

  53. APIͷ݁ՌΛ
    ୺తʹද͢

    View full-size slide

  54. 2XX͸੒ޭܥ
    3XX͸ϦμΠϨΫτܥ
    4XX͸ΫϥΠΞϯτΤϥʔܥ
    5XX͸αʔόΤϥʔܥ
    εςʔλείʔυ

    View full-size slide

  55. GET /api/articles(200 OK)
    GET /api/articles/1(200 OK)
    e.g. هࣄ৘ใΛѻ͏API

    View full-size slide

  56. ͲΜͳεςʔλείʔυ͕͋
    Δ͔ௐ΂ͯΈ·͠ΐ͏
    άϧʔϓ಺Ͱ෼୲ͯ͠ௐ΂ͨ
    ݁ՌΛڞ༗͠·͠ΐ͏
    ԋश: εςʔλείʔυ

    View full-size slide

  57. هࣄ৘ใҰཡΛऔಘ͢Δ: GET /api/articles
    ID:1ͷهࣄ৘ใΛऔಘ͢Δ: GET /api/articles/1
    هࣄ৘ใΛ࡞੒͢Δ: POST /api/articles
    ID:1ͷهࣄ৘ใΛߋ৽: PUT /api/articles/1
    ID:1ͷهࣄ৘ใΛ࡟আ͢Δ: DELETE /api/articles/1
    ԋश: HTTPϝιου

    View full-size slide

  58. GET /api/articles(200 OK)
    GET /api/articles/1(200 OK)
    POST /api/articles(???)
    PUT /api/articles/1(???)
    DELETE /api/articles/1(???)
    ԋश: εςʔλείʔυ

    View full-size slide

  59. GET /api/articles(200 OK)
    GET /api/articles/1(200 OK)
    POST /api/articles(201 Created)
    PUT /api/articles/1(200 OK)
    DELETE /api/articles/1(204 No Content)
    ԋश: εςʔλείʔυ

    View full-size slide

  60. ΫϥΠΞϯτ΍αʔόͷ
    ڍಈΛܾΊΔ
    ෇Ճ৘ใΛද͢

    View full-size slide

  61. Ϩεϙϯε͕Ͳ͏͍͏ܗࣜͳͷ
    ͔Λڭ͑ͯ͘ΕΔ
    application/json
    image/png
    e.g. Content-Type

    View full-size slide

  62. POST /api/articles
    Location: https://example.jp/
    api/articles/2
    ग़དྷ্͕ͬͨϦιʔεͷURLΛ
    ڭ͑ͯ͋͛Δ
    e.g. هࣄ৘ใΛѻ͏API

    View full-size slide

  63. ϢʔβϑϨϯυϦʔΛڧ͘ҙࣝ͢Δ
    ԿΛඞཁͱ͍ͯ͠Δ͔
    Ͳ͏࢖͍͍ͨͱࢥ͍ͬͯΔ͔
    ޙ͔Βཁૉ଍͍ͨ͠ͱ͖ʹࠔΒͳ
    ͍Α͏ʹ͢Δ
    JSON

    View full-size slide

  64. GET /api/articles(200 OK)
    [
    “id1”,
    “id2”,
    “id3”
    ]
    e.g. هࣄ৘ใΛѻ͏API

    View full-size slide

  65. GET /api/articles(200 OK)
    [
    {
    “id”: “id1”,
    “title”: “title”,
    “body”: “body”
    },

    }
    e.g. هࣄ৘ใΛѻ͏API

    View full-size slide

  66. GET /api/articles(200 OK)
    {
    “articles” : [

    ],

    }
    e.g. هࣄ৘ใΛѻ͏API

    View full-size slide

  67. URL͸ϦιʔεΛҰҙʹࢦ໊ࣔ͢͠ࢺ
    HTTPϝιου͸GET/POST/PUT/DELETEͰද͢ಈ

    εςʔλείʔυ͸2XX/3XX/4XX/5XXͰද֓͢ཁ
    HTTPϔομ͸ڍಈΛܾΊΔ෇Ճ৘ใ
    JSON͸ϢʔβϑϨϯυϦʔͳৄࡉ৘ใ
    ·ͱΊ

    View full-size slide

  68. ΠΧ͕
    ΠϯΫΛ
    ܸͪ߹͏ήʔϜ
    https://twitter.com/omahuko/status/707978301457829889

    View full-size slide

  69. ໊લ
    ॏෳ͸ͳ͠
    ϒΩܥ౷
    γϡʔλʔ, ϩʔϥʔ, νϟʔδϟʔͷ3छ
    ϒΩ͸3छͷͲΕ͔ʹଐ͢Δ
    ϒΩͷ࢓༷

    View full-size slide

  70. ॳ৺ऀγϡʔλʔ
    ϒΩܥ౷: γϡʔλʔ

    View full-size slide

  71. ໊લ ϒΩܥ౷
    ॳ৺ऀγϡʔλʔ γϡʔλʔ
    ॳ৺ऀϩʔϥʔ ϩʔϥʔ
    ॳ৺ऀνϟʔδϟʔ νϟʔδϟʔ
    5SFBTVSFγϡʔλʔ γϡʔλʔ

    View full-size slide

  72. ϒΩ৘ใCRUD API(؅ཧऀ༻)
    Ұཡ
    ৄࡉ
    ࡞੒
    ߋ৽
    ࡟আ
    ࣍ͷAPIΛઃܭ͍ͯͩ͘͠͞

    View full-size slide

  73. ϒΩ৘ใҰཡΛϒΩܥ౷ͰߜΓ
    ࠐΜͰऔಘͰ͖ΔΑ͏ʹͯ͘͠
    ͍ͩ͞
    ࢓༷มߋ

    View full-size slide

  74. ໊લ ϒΩܥ౷
    ॳ৺ऀγϡʔλʔ γϡʔλʔ
    5SFBTVSFγϡʔλʔ γϡʔλʔ

    View full-size slide

  75. ϒΩ৘ใҰཡΛιʔτͰ͖ΔΑ
    ͏ʹ͍ͯͩ͘͠͞
    Ͳͷ߲໨Ͱιʔτ͢Δ͔
    ঢॱ/߱ॱ
    ࢓༷มߋ

    View full-size slide

  76. ಉ໊͡લͷϒΩΛ࡞੒͠Α͏ͱ
    ͨ͠৔߹ΤϥʔͱͳΔΑ͏ʹ
    ߟྀ͍ͯͩ͘͠͞
    ࣍ͷAPIΛઃܭ͍ͯͩ͘͠͞

    View full-size slide

  77. ࣮ӡ༻͕࢝·Δͱෛՙߴಅͳ
    Ͳ৭ʑͱ໰୊͕ى͖Δ
    λΠϜΞ΢τͨ࣌͠
    αʔόΤϥʔ͕ى͖ͨ࣌
    ͲͷΑ͏ʹΞϓϦέʔγϣϯͱͯ͠ৼΔ෣͍·͔͢ʁ

    View full-size slide