$30 off During Our Annual Pro Sale. View Details »

新規事業開発を支える技術 / Technology for new business

mokuo
December 15, 2018

新規事業開発を支える技術 / Technology for new business

新規事業立ち上げの際に、実際にどのように開発を進めていっているかについて、お話させせていただきました。要件の洗い出しから、技術選定、アーキテクチャ設計、開発サイクルの回し方、実装方針などについて、少しでも参考になれば嬉しいです。

mokuo

December 15, 2018
Tweet

More Decks by mokuo

Other Decks in Programming

Transcript

  1. ৽نࣄۀ։ൃΛ
    ࢧ͑Δٕज़
    2018/12/15 Developers Boost
    Sansanגࣜձࣾ DSOC Development Group ΤϯδχΞ
    ໦ా༔Ұ࿠

    View Slide

  2. ࣗݾ঺հ
    • ໦ా༔Ұ࿠ (mokuo)
    • Twitter : @mokuo_
    • 92೥ੜ·Ε
    • ݸਓ։ൃͨ͠Γϒϩάॻ͍ͨΓ͠·͢
    • ϙουΩϟετ΍ϥδΦΛΑ͘ௌ͖·͢

    View Slide

  3. ܦྺ
    • 2018೥2݄ : Sansanגࣜձࣾೖࣾ
    • Eight ͷϑϩϯτΤϯυɾαʔόʔαΠυͷ։ൃ
    • React + Redux, Ruby on Rails
    • 2018೥6݄ : DSOC ʹҟಈ
    • GEESʢ໊ࢗͷσʔλԽγεςϜʣͷ։ൃɾӡ༻
    • Ruby on Rails
    • ৽نࣄۀ։ൃ <= ຊ೔ͷ͓࿩ʂʂ

    View Slide

  4. ΞδΣϯμ
    • ͸͡Ίʹ
    • ৽نࣄۀ։ൃΛࢧ͑Δٕज़
    • ཁ݅ͷચ͍ग़͠
    • ։ൃϓϩηεͷબఆ
    • ΞʔΩςΫνϟઃܭ
    • ٕज़બఆ
    • DBઃܭ
    • APIఆٛ
    • ը໘ઃܭ
    • ϑϩϯτΤϯυ࣮૷
    • αʔόʔαΠυ࣮૷
    • ·ͱΊ

    View Slide

  5. ͸͡Ίʹ

    View Slide

  6. ࣄۀ಺༰ʹ͍ͭͯ
    • େਓͷࣄ৘ʹΑΓɺݱ࣌఺Ͱ͸ɺ
    ৽نࣄۀͷத਎ʹ͍͓ͭͯ࿩Ͱ͖
    ·ͤΜɻ
    • ࣄۀ಺༰ʹ৮Εͳ͍ൣғͰ͓࿩͞
    ͍͖ͤͯͨͩ·͢ɻ

    View Slide

  7. ຊ೔ͷ͓࿩ʹ͍ͭͯ
    • ৽نࣄۀ։ൃΛ୲౰͢Δ͜ͱʹͳͬͯɺ࣮ࡍ
    ʹࢲ͕औΓ૊ΜͰ͍Δ͜ͱΛ͓࿩͠·͢ɻ
    • ଞʹ΋༷ʑͳ΍Γํ͕͋Δͱࢥ͍·͢ɻ͋͘
    ·Ͱɺࢀߟ৘ใͷҰͭͱͯ͠ฉ͍͍͚ͯͨͩ
    ·͢ͱ޾͍Ͱ͢ɻ

    View Slide

  8. ৽نࣄۀ։ൃΛࢧ͑Δٕज़

    View Slide

  9. લఏ
    • ։ൃ͢ΔγεςϜ͸ෳ਺
    • ͦͷதͷج൫తͳγεςϜΛϝΠϯͰ୲౰

    View Slide

  10. ৺͕͚͍ͯΔ͜ͱ

    View Slide

  11. ࣄۀͷ੒௕͕ୈҰ
    • Ұੜݒ໋ͩ͜Θͬͯ࡞ͬͯ΋ɺചΕͳ͚Ε͹ɺ
    ιϑτ΢ΣΞ͸ࢮΜͰ͠·͍·͢ɻ
    • ࠓٻΊΒΕ͍ͯΔ΋ͷ͸Կͳͷ͔ɺৗʹߟ͑
    ΔΑ͏ʹؾΛ͚͍ͭͯ·͢ɻ

    View Slide

  12. ࣄۀͱٕज़ͷόϥϯεΛऔΔ
    • ͱ͸͍͑ɺεϐʔυ͚ͩΛ༏ઌ͢ΔͷͰ͸ͳ
    ͘ɺٕज़తͳҰઢ͸कΓ͍ͨͱߟ͍͑ͯ·͢
    • ΋͠඼࣭΍։ൃ଎౓Λอͭ͜ͱ͕Ͱ͖Ε͹ɺ
    কདྷతʹ͸ϖΠͰ͖ΔͷͰ͸ͳ͍͔ɺͱࢥͬ
    ͨΓ͍ͯ͠·͢ɻ

    View Slide

  13. ཁ݅ఆٛ

    View Slide

  14. δϣΠϯͨ࣌͠ͷঢ়گ
    • ཁ͕݅·ͩ;Θͬͱ͍ͯ͠Δ͕ɺεέδϡʔ
    ϧ͸ܾ·͍ͬͯΔ

    View Slide

  15. Ұ൪࠷ॳʹ΍ͬͨ͜ͱ
    • ཁ݅ͷચ͍ग़͠
    • ݒ೦఺ͷղফ
    • ͬ͘͟Γͨ͠ݟੵ΋Γ
    • εέδϡʔϧௐ੔

    View Slide

  16. ཁ݅ͷચ͍ग़͠
    • ϓϩμΫτόοάϩάΛ࡞੒
    • ϓϩμΫτΦʔφʔͱҰॹʹɺཁ݅Λεϓ
    Ϩουγʔτʹॻ͖ग़ͨ͠

    View Slide

  17. ٙ໰఺ͷղফ
    • ٙ໰఺͕͋Δͱɺݟੵ΋Γ͕Ͱ͖ͳ͍
    • ୭ʹ֬ೝ͢Δ͔Ͱ෼ྨ
    • ࣗ෼Ͱௐ΂Δ, PO, νʔϜA, νʔϜB, …
    • ҰͭҰͭ௵͍ͯͬͨ͠

    View Slide

  18. ͬ͘͟Γͨ͠ݟੵ΋Γ
    • தؒ͘Β͍ͷ೉қ౓ͷλεΫΛ 3 ϙ
    Πϯτͱ͢Δ
    • 1, 3, 5, 8, 13 ͱϙΠϯτΛ෇͚ͯ૬ର
    ݟੵ΋ΓΛ࣮ࢪ
    • Πϝʔδ͠΍͍͢λεΫΛબͼɺԿ
    ͔͔࣌ؒΓͦ͏͔ݟੵ΋ͬͯΈΔ
    • શମͰ͔͔Δ೔਺Λܭࢉ

    View Slide

  19. εέδϡʔϧௐ੔
    • ཁ݅Λ࡟͗མͱͯ͠εέδϡʔϧʹؒʹ߹Θ
    ͤΔ͔ɺεέδϡʔϧΛ৳͹͔͢ަব
    • डୗ։ൃͳΒɺ2, 3ഒͷόοϑΝΛੵΈ͍ͨͱ
    ͜Ζ͕ͩɺࣗࣾαʔϏεͰ͋Ε͹ɺ͋Δఔ౓
    ͸ॊೈʹௐ੔Ͱ͖Δ

    View Slide

  20. ։ൃϓϩηεͷબఆ

    View Slide

  21. બ୒ࢶ1 : ΢ΥʔλʔϑΥʔϧ
    • ઌʹεέδϡʔϧ͕ܾ·͍ͬͯΔͷͰ͋Ε͹ɺ
    ࠷ॳ͸΢ΥʔλʔϑΥʔϧͰ΋ྑ͍͔΋͠Ε
    ͳ͍
    • σϝϦοτ : ཁٻ͕มΘͬͨͱ͖ʹɺॊೈʹର
    Ԡͮ͠Β͍

    View Slide

  22. બ୒ࢶ2 : ΞδϟΠϧ
    • ΞδϟΠϧιϑτ΢ΣΞͷ12ͷݪଇ
    • Ձ஋ͷ͋Διϑτ΢ΣΞΛૣ͘ܧଓతʹఏڙ͠
    ·͢ɻ
    • ཁٻͷมߋ͸ͨͱ͑։ൃͷޙظͰ͋ͬͯ΋׻ܴ
    ͠·͢ɻ
    => ৽نࣄۀʹ͸ద͍ͯ͠Δͱ൑அ

    View Slide

  23. εΫϥϜΛ࠾༻
    • վΊͯɺ͍͔ͭ͘ͷจݙΛಡΈ௚ͨ͠
    • ΞδϟΠϧιϑτ΢ΣΞ։ൃએݴ
    • εΫϥϜΨΠυ
    • ࠓ·Ͱͷܦݧ΋౿·͑ͯɺ۩ମతͳ
    Πϕϯτ΋ఆٛ͞Ε͍ͯΔεΫϥϜ͕
    ྑ͍ͱ൑அ

    View Slide

  24. ܗࣜʹͩ͜ΘΓա͗ͳ͍
    • ઐ໳༻ޠΛ࢖Θͳ͍
    • ϓϩμΫτόοάϩά => λεΫ
    • εϓϦϯτϓϥϯχϯά => ܭը
    • ϨτϩεϖΫςΟϒ => ;Γ͔͑Γ
    • ϓϩμΫτόοΫϩά͸εϓϨουγʔτͰ؅ཧ
    • ϓϩμΫτΦʔφʔ͕࢖͍΍͍͢΋ͷΛ࠾༻
    • υϥοά&υϩοϓͰॱ൪ΛೖΕସ͑ΒΕΔ͠ɺࠓͷͱ͜Ζ͸ࠔ͍ͬͯͳ͍

    View Slide

  25. ΞʔΩςΫνϟઃܭ

    View Slide

  26. લఏ
    • ୲౰͢ΔγεςϜ͸ Web ΞϓϦέʔγϣϯͷ
    ΈͰɺϞόΠϧΞϓϦ͸։ൃ͠·ͤΜɻ
    • ӡ༻ෛՙΛԼ͍͛ͨͱ͍͏ࢥ͍͕͋Γ·͢ɻ

    View Slide

  27. ΞʔΩςΫνϟઃܭͷมભ
    ᶃ SPA + Firebase

    ᶄ ϚΠΫϩαʔϏεΞʔΩςΫνϟ on GAE

    ᶅ ࠷ॳ͸αʔϏε෼ׂ͸࠷খݶʹ͠Α͏ <= ݱࡏ

    View Slide

  28. SPA + Firebase

    View Slide

  29. SPA + Firebase
    • JavaScript ͷॲཧ͸ඞཁ
    • ϑϩϯτΤϯυͰҰఆҎ্ͷॲཧΛ͢ΔͳΒ SPA ʹͯ͠͠·ͬ
    ͨํ͕ྑ͍ʢͱࢥ͍ͬͯΔʣ
    • ͔͠͠ɺϑϩϯτΤϯυͱαʔόʔαΠυͷ྆ํΛ࣮૷͢Δ͜ͱ
    ͸޻਺͕͔͔Δ
    • Cloud Firestore ͳΒϑϩϯτΤϯυ͔Β௚઀ॻ͖ࠐΊΔ
    • ଟ͘ͷ API ͸࣮૷͢Δඞཁ͕ͳ͘ͳΔ…͸ͣɻ

    View Slide

  30. ۩ମతʹ͸
    • Firebase Authentication Ͱೝূ
    • Cloud Firestore, Cloud Storage ΁ͷॻ͖ࠐΈ
    Λݕ஌ͯ͠ɺCloud Functions Λ૸ΒͤΔ͜ͱ
    ͕Ͱ͖Δ
    • όοΫΤϯυͷॲཧ͸τϦΨʔத৺ʹ͢Δ

    View Slide

  31. SPA + Firebase
    τϦΨʔ

    View Slide

  32. ݒ೦఺
    • ϐλΰϥεΠονతͳγεςϜʹͳΔ͜ͱ͕૝ఆ͞ΕΔ
    • কདྷతʹॲཧ͕ෳࡶʹͳͬͯདྷͨͱ͖ʹɺCloud
    Functions ͚ͩͰ৐Γ੾ΕΔͷ͔
    • Firebase Authentication ͸ B2C ޲͖ʹݟ͑Δ
    • ࡉ͔͍ݖݶ؅ཧΛ͢ΔͨΊʹ͸ɺ࢓૊ΈΛߟ͑ͯࣗ
    લͰ࣮૷͢Δඞཁ͕͋Δ

    View Slide

  33. ͦ΋ͦ΋΍Γ͔ͨͬͨ͜ͱ
    • ӡ༻ෛՙΛԼ͍͛ͨ
    • Firebase ʹͩ͜ΘΔඞཁ͸ͳ͍

    View Slide

  34. ϚΠΫϩαʔϏεΞʔΩςΫνϟ
    on Google App Engine

    View Slide

  35. Google App Engine
    • GCP ͕ఏڙ͢Δ PaaS
    • ϦΫΤετʹԠͯࣗ͡ಈͰεέʔϧ
    • ίϚϯυҰൃͰσϓϩΠͨ͠Βಈ͘
    • Function ୯ҐͰͳ͘ɺαʔϏε୯ҐͰσϓϩΠ
    • FaaS ʹൺ΂ͯɺෳࡶͳॲཧʹ΋ରԠ͠΍͍͢͸ͣ

    View Slide

  36. Microservices Architecture on
    Google App Engine
    • DB, Ωϡʔ ͳͲ͸ڞ༗

    View Slide

  37. جຊͷߟ͑ํ
    • αʔϏεؒͷ΍ΓͱΓ͸جຊ Cloud Tasks Λܦ༝
    • DB ͸Ҿ͖ଓ͖ Cloud Firestore Λ࠾༻
    • ϑϩϯτΤϯυ͔Β௚઀ DB Λ৮Δ͜ͱ͸ͤͣɺAPIܦ༝Ͱ
    ΞΫηεͤ͞Δ
    • কདྷతʹ͸ɺ௚઀৮Δ͜ͱ΋͋Δ͔΋͠Εͳ͍ʢ؅ཧը໘ͱ
    ͔ʁʣ
    • ෳ਺αʔϏεͰίϨΫγϣϯ͸ڞ༗͠ͳ͍

    View Slide

  38. σʔλϕʔε͸Կʹ͢Δ͔
    • Cloud Datastore
    • ࣗಈεέʔϦϯάɾύϑΥʔϚϯεΛߟ͑Δ
    ͱɺGAE ʹద͍ͯ͠Δ
    • Cloud SQL for MySQL
    • Cloud SQL for PostgreSQL

    View Slide

  39. Cloud Firestore Λબ୒
    ެࣜυΩϡϝϯτ ↓↓
    • Cloud Firestore ͱ Cloud Datastore ͷબ୒
    > Cloud Firestore ͸ɺCloud Datastore ͷϦϒϥϯσΟϯάͱͳΔ
    ࣍ظϝδϟʔ όʔδϣϯͰ͢
    • Cloud Firestore ΁ͷࣗಈΞοϓάϨʔυ
    • Cloud Datastore ͸ Cloud Firestore ʹΞοϓάϨʔυ͞ΕΔ༧ఆ

    View Slide

  40. Cloud Firestore ͷϞʔυ
    • Cloud Firestore ͱ Cloud Datastore ͷબ୒
    • Cloud Firestore in Datastore mode
    • Cloud Firestore in Native mode
    • ͦΕͧΕͷಛੑΛݟͯ൑அ

    View Slide

  41. ϚΠΫϩαʔϏεΞʔΩςΫνϟ
    • ຊͰମܥతͳ஌ࣝΛೖΕ௚͢
    • ಡΊ͹ಡΉ΄ͲɺGAE ͸Ϛ
    ΠΫϩαʔϏεͷͨΊͷ
    PaaS ͩͱࢥ͑ͯ͘Δ

    View Slide

  42. αʔϏεؒͷ࿈ܞύλʔϯ

    View Slide

  43. ࢖༻͢Δओͳ GCP ͷαʔϏε
    • App Engine
    • Cloud Storage
    • Cloud Pub/Sub
    • Cloud Tasks
    • Cloud Firestore

    View Slide

  44. Cloud Pub/Sub Notifications
    for Cloud Storage
    Cloud Pub/Sub
    มߋΛݕ஌ Service A

    View Slide

  45. Cloud Pub/Sub
    Service C
    Service B
    Service A Cloud Pub/Sub

    View Slide

  46. Cloud Tasks
    Service A Service B

    View Slide

  47. ϑϩϯτΤϯυ͔Β API Λୟ͘
    Frontend Service Backend Service

    View Slide

  48. ࠷ॳ͸αʔϏε෼ׂ͸࠷খݶ
    ʹ͢Δ

    View Slide

  49. ࣌ظঘૣͳ෼ղ
    • ༷ʑͳ৘ใ΍ɺࣾ಺֎ͷΤ
    ϯδχΞͱͷର࿩Λ௨ͯ͠ɺ
    ࠷ॳ͔ΒαʔϏεΛ෼ׂ͢
    Δͷ͸ةݥͱ൑அ
    • ·ͣ͸࠷খݶͰελʔτ͢
    Δ༧ఆͰ͢

    View Slide

  50. ඇಉظॲཧ
    • Cloud Tasks ͸ΤϯυϙΠϯτΛࢦఆͯ͠
    Ωϡʔʹ٧ΊΔ
    Service A
    ࣗ෼ࣗ਎ʹ໭ͬͯ͘Δ

    View Slide

  51. ٕज़બఆ

    View Slide

  52. ϑϩϯτΤϯυ

    View Slide

  53. ϑϩϯτΤϯυ
    • React + Redux
    • TypeScript
    • Next.js

    View Slide

  54. React + Redux
    • Eight Ͱ React Λ࢖͍ͬͯΔ͜ͱ΋͋Γɺ׳Ε͍ͯΔɻ
    ݸਓతʹ Vue ΑΓ޷͖
    • React ͳΒ Redux, Vue ͳΒ Vuex ͳͲɺFlux ΞʔΩς
    ΫνϟΛ࢖͏͜ͱ͸ɺ΄΅ඞਢͩͱࢥ͍ͬͯΔ
    • ΞϓϦέʔγϣϯશମͰ State Λڞ༗Ͱ͖Δ
    • ڊେͳ JSON Λ͍࣋ͬͯΔΠϝʔδ

    View Slide

  55. TypeScript
    • ࢓ࣄ΍ݸਓ։ൃͰ JS Λॻ͍͍ͯͯɺܕ͕ͳ͍ਏ͞Λײ͍ͯ͡
    ͨ
    • Promise ͕ೖͬͯ͘Δͱɺ΋͸΍Կ͕ฦ͖͍ͬͯͯΔͷ͔Θ
    ͔Βͳ͘ͳͬͨΓ͢Δ
    • ࣮ߦ࣌ΤϥʔͰ௚͢ɺΛ܁Γฦ͢
    • TypeScirpt ΛೖΕͯɺIDE తͳԸܙΛड͚ΒΕΔ
    • ΋ͪΖΜɺٯʹେมͳ͜ͱ΋͋Δ

    View Slide

  56. Next.js
    • pages/ ҎԼʹίϯϙʔωϯτஔ͘ͱࣗಈͰϧʔ
    ςΟϯάͯ͘͠ΕΔ
    • αʔόʔαΠυϨϯμϦϯά΋؆୯
    • ಋೖ͓͍ͯͯ͠ѱ͍͜ͱ͸ͳ͍ͱ൑அ

    View Slide

  57. αʔόʔαΠυ

    View Slide

  58. αʔόʔαΠυ
    • Node.js
    • Express
    • TypeScript
    • swagger-node

    View Slide

  59. αʔόʔαΠυͷݴޠΛԿʹ͢Δ͔
    • ݸਓతʹ΋ɺ෦ॺͱͯ͠΋ɺಘҙͳͷ͸ Rails
    • ͔͠͠ɺݱ࣌఺ͷ Google App Engine ͷ
    Standard Environment Ͱ͸ Ruby ͕࢖͑ͳ͍

    View Slide

  60. GAE ͷ2छྨͷ؀ڥʹ͍ͭͯ
    • Standard Environment
    • ݱ࣌఺Ͱ͸ Python, Java, PHP, Go, Node.js ͷΈ
    • Flexible Environment
    • ্هʹՃ͑ͯ .NET, Ruby, ΧελϜϥϯλΠϜ
    ͕࢖͑Δ

    View Slide

  61. ֤؀ڥͷൺֱʢൈਮʣ
    • https://cloud.google.com/appengine/docs/the-appengine-environments
    ػೳ
    4UBOEBSE
    &OWJSPONFOU
    'MFYJCMF
    &OWJSPONFOU
    Πϯελϯεىಈ࣌ؒ ϛϦඵ ෼
    ϦΫΤετͷ࠷େλΠϜ
    Ξ΢τ
    ඵ ෼
    εέʔϦϯά खಈɺجຊɺࣗಈ खಈɺࣗಈ
    ΧελϚΠζՄೳͳॲཧ
    ελοΫ
    º
    ˓ʢ%PDLFSpMFͷΧε
    λϚΠζͰߏஙʣ
    ྉۚ
    Πϯελϯε࣌ؒ
    ʹجͮ͘
    W$16ɺϝϞϦɺӬଓσ
    ΟεΫͷ࢖༻ྔʹجͮ͘

    View Slide

  62. ஫໨͢΂͖ҧ͍
    • Πϯελϯεىಈ࣌ؒ
    • ྉۚ

    View Slide

  63. جຊ͸ Standard Environment
    • ඞཁͳ͚࣌ͩ Flexible Environment ʹ͢Δ
    • ࠓճ͸ը૾ॲཧʹඞཁͳϥΠϒϥϦΛ࢖͏
    ͨΊʹɺGAE/FE Ͱ Docker Λ࢖༻

    View Slide

  64. Node.js Λ࠾༻
    • ݸਓతʹɺRuby ͷ࣍ʹಘҙͳݴޠ͸ JS
    • Node.js ΋ AWS Lambda, Google Cloud
    Functions Ͱ͸࢖ͬͨ͜ͱ͕͋Δ
    • ࠓޙδϣΠϯ͢Δϝϯόʔʹ͸ɺϑϩϯτΤϯ
    υ΋αʔόʔαΠυ΋ݟͯ΄͍͠ͱ͍͏ࢥ͍΋
    ͋Δ

    View Slide

  65. ϑϨʔϜϫʔΫ͸ Express
    • Node.js ͰҰ൪࢖ΘΕ͍ͯΔϑϨʔϜϫʔΫ
    ͸ɺExpress ͩͱࢥΘΕΔ
    • ܰྔͳϑϨʔϜϫʔΫͰɺϚΠΫϩαʔϏεʹ
    ͸ྑͦ͞͏

    View Slide

  66. TypeScript
    • ϑϩϯτΤϯυͱಉ༷ʹ TypeScript Λ࢖༻

    View Slide

  67. swagger-node
    • Swagger Ͱ API ఆٛΛॻ͘ͱɺϧʔςΟϯά΍ϦΫΤε
    τͷόϦσʔγϣϯΛͯ͘͠ΕΔ
    • ࣮ଶ͸ swagger-express-mw
    • ϝϯς͕ߦ͖ಧ͍͍ͯͳ͍ײ͡΋͢ΔͷͰɺཁ஫ҙ
    • swagger editor ΋ೖ͍ͬͯΔ͕ɺόʔδϣϯ͕ݹ͍
    • swagger project create ίϚϯυ͸ࢀߟఔ౓ʹ࢖༻͢Δ

    View Slide

  68. CI
    • طʹࣾ಺Ͱར༻͍ͯͯ͠ɺಛʹ՝୊ײ΋ͳ͍ͷ
    ͰɺCircleCI, Sider Λ࢖༻
    • CircleCI Ͱ Jest
    • Sider Ͱ TSLint
    • CD ΋΍Γ͍ͨ

    View Slide

  69. DBઃܭ

    View Slide

  70. Cloud Firestore
    • NoSQL υΩϡϝϯτࢦ޲σʔλϕʔε
    • جຊతʹ͸ɺRDB ͷΑ͏ͳਖ਼نԽ͸͠ͳ͍
    • ؔ࿈͸αϒίϨΫγϣϯͱ͍͏ܗͰωετ͢
    Δ

    View Slide

  71. εϓϨουγʔτͰઃܭ
    • ΋ͬͱྑ͍΍Γํ͕͋Ε͹ڭ͍͑ͯͩ͘͞…
    • ↓ Πϝʔδ

    View Slide

  72. APIઃܭ

    View Slide

  73. RESTful API
    • Rails ͷϧʔςΟϯάΛࢀߟ
    • Rails ͷϧʔςΟϯά͸ڧྗ
    • `resouces: photos` ͷΑ͏ʹॻ͚ͩ͘ͰɺϦ
    ιʔεϕʔεͷنଇతͳϧʔςΟϯά͕Ͱ͖Δ
    • Rails ͷϧʔςΟϯά | Rails ΨΠυ ࢀর

    View Slide

  74. Swagger Λ࢖༻
    • APIυΩϡϝϯτͷσϑΝΫτελϯμʔυʹ
    ͳ͖͍ͬͯͯΔͱࢥΘΕΔ
    • swagger-express-mw ͰϧʔςΟϯάͱϦΫΤ
    ετͷόϦσʔγϣϯ͕Ͱ͖Δ͜ͱ΋େ͖͍
    • ͍ͣΕʹͤΑɺAPIυΩϡϝϯτ͸ඞཁ

    View Slide

  75. GraphQL ͸ʁ
    • ϑϩϯτ <=> αʔόʔؒ͸ GraphQL Ͱ΋ྑͦ͞
    ͏
    • طʹɺࣗ෼ͱͯ͠΋෦ॺͱͯ͠΋͋·Γ࢖ͬͯ͜ͳ
    ͔ٕͬͨज़Λ੝ΓࠐΜͰ͍Δ
    • GCP, TypeScript, Node.js, SPA, Atomic Design…
    • ࠓճ͸ݟૹΓ

    View Slide

  76. ίϯϙʔωϯτઃܭ

    View Slide

  77. Atomic Design
    • σβΠϯʹΦϒδΣΫτࢦ޲త
    ͳߟ͑ํΛऔΓೖΕͨײ͡
    • UI ͷมߋʹڧ͘ɺίϯϙʔωϯ
    τΛ࠶ར༻͠΍͍͢

    View Slide

  78. ϑϩϯτΤϯυ࣮૷

    View Slide

  79. ίϯϙʔωϯτ

    View Slide

  80. Storybook
    • Storybook Λ࢖͏͜ͱͰɺίϯϙʔωϯτ͝ͱʹಈ࡞
    ֬ೝ͠ͳ͕Β։ൃͰ͖Δ
    • Storyshot ͰεφοϓγϣοτΛऔΔ͜ͱ΋Ͱ͖Δ
    • Storyshot ʹؔͯ͠͸ɺTypeScript, Next.js ΋࢖༻͠
    ͍ͯΔ͔Β͔ɺΤϥʔ͕ग़ͯղফͰ͖ͣ…
    • ଞͷํ๏Λݕ౼த

    View Slide

  81. Redux

    View Slide

  82. Actions
    • Flux Standard Action (FSA) ʹै͏͜ͱ͕ਪ঑͞Εͯ
    ͍Δ
    • FSA ʹԊͬͨϥΠϒϥϦ͸͍͔ͭ͋͘Δ
    • redux-actions Λ࢖͓͏ͱ͕ͨ͠ɺTypeScript ͱ
    ૬ੑ͕ѱ͔ͬͨʢܕఆ͕ٛෆ׬શʣ
    • typescript-fsa Λ࠾༻

    View Slide

  83. Reducers
    • Immutable.js Λ࢖༻
    • State ͕ωετͨ͠Γෳࡶʹͳͬͯ͘ΔͱɺReducer ͕
    େมͳ͜ͱʹͳΔ
    • Object.assign() ΋ਏ͍
    • Immutable.js ͷ Record Λ࢖͏͜ͱͰɺϞσϧʹϝ
    ιουΛੜ΍ͯ͠ Reducer ΛγϯϓϧʹͰ͖Δ

    View Slide

  84. ࣗಈςετ
    • Jest Λ࠾༻
    • RSpec ϥΠΫͳͷͰɺRuby ग़਎ऀ͸ೃછΈ΍͍͢͸ͣ
    • ΦʔϧΠϯϫϯͳͷ΋ྑ͍
    • Actions ͱ Reducers ͷςετ͸ඞͣॻ͘
    • ίϯϙʔωϯτ΋ɺϩδοΫΛॻ͍ͨϝιου͸ςετ͢Δ
    • ίϯϙʔωϯτࣗମͷςετ͸໛ࡧத

    View Slide

  85. αʔόʔαΠυ࣮૷

    View Slide

  86. Express ͷ͓࡞๏͕Θ͔Βͳ͍

    View Slide

  87. ௐ΂ͯݟ͖͑ͯͨಛ௃
    • Express͸ɺϧʔςΟϯάͱϛυϧ΢ΣΞ͕
    جຊతͳ֓೦Β͍͠

    View Slide

  88. جຊํ਑
    • Swagger Ͱ API ఆٛ
    • ίϯτϩʔϥʔʹϝιουΛ࣮૷
    • swagger-node ͰϧʔςΟϯάɺϦΫΤετͷόϦσʔγϣϯΛ͠
    ͯ͘ΕΔ
    • DB ·ΘΓͷॲཧ͸ϞσϧͰߦ͏
    • ෳࡶͳॲཧ͸Ϟδϡʔϧʹ੾Γग़͢
    • ೝূɺΤϥʔϋϯυϦϯάͳͲ͸ middleware Ͱߦ͏

    View Slide

  89. ࣗಈςετ
    • ϑϩϯτΤϯυͱಉ͘͡ Jest
    • Jest ͸σϑΥϧτͰฒߦͰςετ͕૸ΔͷͰૣ͍͕…
    • CI ༻ͷϓϩδΣΫτΛ࡞ͬͯ͸͍Δ͕ɺFirestore ͸Ұͭ
    • ςετಉ͕࢜ׯবͯ͠ɺͨ·ʹམͪΔ => ྑ͘ͳ͍
    • ରԠࡦ͸ݕ౼த
    • কདྷతʹ͸ E2E ςετ΋͋Δఔ౓ࣗಈԽ͍ͨ͠

    View Slide

  90. ·ͱΊ

    View Slide

  91. ·ͱΊ
    • ͦͷࣄۀʹ͓͍ͯɺԿ͕ٻΊΒΕ͍ͯΔ͔ߟ
    ͑Δ
    • ٕज़తʹ௒͑ͯ͸͍͚ͳ͍Ұઢ͸कΔ
    • ΑΓྑ͍બ୒Λ͢ΔͨΊʹɺ೔ࠒͷ஁࿉Λܽ
    ͔͞ͳ͍

    View Slide

  92. ΤϯδχΞืूʂʂ
    • Sansan Ͱ͸ɺੈքΛม͑Δʮग़ձ͍ʯΛ
    ੜΈग़͢ΤϯδχΞΛืू͍ͯ͠·͢ɻ
    • Twitter ͷ DM ͳͲͰ΋ߏ͍·ͤΜͷͰɺؾܰ
    ʹ͝࿈བྷ͍ͩ͘͞ɻΧδϡΞϧʹ͓࿩͠·͠ΐ
    ͏ʂʂ

    View Slide