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

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

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