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

by mokuo

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

͸͡Ίʹ

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

৽نࣄۀ։ൃΛࢧ͑Δٕज़

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

৺͕͚͍ͯΔ͜ͱ

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

ཁ݅ఆٛ

Slide 14

Slide 14 text

δϣΠϯͨ࣌͠ͷঢ়گ • ཁ͕݅·ͩ;Θͬͱ͍ͯ͠Δ͕ɺεέδϡʔ ϧ͸ܾ·͍ͬͯΔ

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

։ൃϓϩηεͷબఆ

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

ΞʔΩςΫνϟઃܭ

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

ΞʔΩςΫνϟઃܭͷมભ ᶃ SPA + Firebase ⊗ ᶄ ϚΠΫϩαʔϏεΞʔΩςΫνϟ on GAE ⊗ ᶅ ࠷ॳ͸αʔϏε෼ׂ͸࠷খݶʹ͠Α͏ <= ݱࡏ

Slide 28

Slide 28 text

SPA + Firebase

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

SPA + Firebase τϦΨʔ

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Cloud Pub/Sub Notiﬁcations for Cloud Storage Cloud Pub/Sub มߋΛݕ஌ Service A

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Cloud Tasks Service A Service B

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

࠷ॳ͸αʔϏε෼ׂ͸࠷খݶ ʹ͢Δ

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

ٕज़બఆ

Slide 52

Slide 52 text

ϑϩϯτΤϯυ

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

αʔόʔαΠυ

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

TypeScript • ϑϩϯτΤϯυͱಉ༷ʹ TypeScript Λ࢖༻

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

DBઃܭ

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

APIઃܭ

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

ίϯϙʔωϯτઃܭ

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

ϑϩϯτΤϯυ࣮૷

Slide 79

Slide 79 text

ίϯϙʔωϯτ

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

Redux

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

αʔόʔαΠυ࣮૷

Slide 86

Slide 86 text

Express ͷ͓࡞๏͕Θ͔Βͳ͍

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

·ͱΊ

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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