10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021

2021/12/4に、Piyogrammer Conference 2021にて登壇した際の資料です。

Transcript

1. © Crescware
   ϲ݄Ͱ8FCαʔϏεΛ࡞ͬͨ࿩
   %FD 1JZPHSBNNFS$POGFSFODF
   !DSFTDXBSF
   ೥ͱ
   

   View Slide

2. © Crescware
   ୭
   w ΫϨε΢ΣΞגࣜձࣾ
   w Ԟ໺ݡଠ࿠ !PLVOPLFOUBSP
   
   w Իֶָߍߨࢣ
   

   ˠ࡞ۂՈ
   

   ˠ8FCσϕϩούʔ
   

   ˠࣾ௕
   w 5ZQF4DSJQU೥
   w "OHVMBS೥ɺ
   /FYUKT 3FBDU
   ೥
   

   View Slide

3. © Crescware
   ͳΜͷ࿩Λ͢Δ͔
   w 8FCαʔϏεΛ࡞ͬͨ
   w ͳͥ࡞ͬͨͷ͔
   w Ͳ͏΍ͬͯ࡞ͬͨͷ͔
   

   View Slide

4. © Crescware
   8FCαʔϏεΛ࡞ͬͨ
   

   View Slide

5. © Crescware
   

   View Slide

6. © Crescware
   .PUJGBSZ
   wʰ͢΂ͯͷۂΛɺ
   ·ͱΊΑ
   ͏ɻ
   ʱ
   Λϛογϣϯʹܝ͛Δ
   

   Իָσʔλϕʔε
   ɾ
   αʔϏε
   w ஍ٿ্͢΂ͯͷɺ
   ྺ্࢙͢΂ͯͷɺ
   

   จࣈ௨Γ͢΂ͯͷۂΛ·ͱΊΔͨΊͷϓϥ
   ο
   τϑΥʔϜ
   

   View Slide

7. © Crescware
   ͳͥ࡞ͬͨͷ͔
   

   View Slide

8. © Crescware
   ೥
   w ࡞ۂՈͱͯ͠ऩೖΛಘ͍ͯͨԞ໺
   w ࢴͷखாʹ͸๲େͳϝϞ͕
   w ͋ͷۂͷίʔ
   υਐߦɺ
   ͋ͷۂͷϝϩσΟʜ
   w ࡭ͷϞϨεΩϯखாʹϏογϦ
   ͱॻ͖ࠐ·ΕΔ
   

   View Slide

9. © Crescware
   ࢴͷݕࡧੑͷѱ͞
   w J1IPOFΛ࢖͍ͬͯͨ
   w Ͱ΋·ͩ·ͩࢴͷ࣌୅
   w ϖʔδ͍ۙखாͷͲ͜ʹԿΛϝϞ͔ͨ͠
   

   ୳͢ͷ͕ͭΒ͍
   

   View Slide

10. © Crescware
    J1IPOFͷϝϞػೳ
    w ౰࣌΋ࠓ΋Իָʹ͸ಛԽ͍ͯ͠ͳ͍
    w ָේΛϝϞͰ͖ͳ͍
    w खாͷԿ࡭໨ͷԿϖʔδʹͲΜͳ৘ใΛ࢒͔ͨ͠
    

    ΤΫηϧͰه࿥͢Δ͜ͱʹ
    

    View Slide

11. © Crescware
    ΤΫηϧͷݶք
    w ೖྗ΋ݕࡧ΋໘౗͘
    ͍͞
    w Իָ৘ใΛೖྗ͠Α
    ͏
    ͱͯ͠΋ϊʔόϦσʔγϣϯ
    w ܭࢉࣜ΍ϚΫϩΛ͍Ζ͍ΖؤுΔ͕టপ
    w ΤΫηϧ͸ϛϡʔδγϟϯʹ༏͘͠ͳ͍
    

    View Slide

12. © Crescware
    σʔλϕʔεԽ
    w ΤΫηϧΛఘΊΔ
    w 'JMF.BLFS1SPΛ࢝ΊΔ
    w ͜ͷͱ͖8FCσβΠϯձࣾͰΞϧόΠ
    τΛ͍ͯͨ͠Ԟ໺
    w ͦ͜ͷސ٬؅ཧʹ'JMF.BLFS1SP͕࢖ΘΕ͍ͯͨ
    w 'JMF.BLFS1SP͸Ϧ
    ονͳ(6*͕૊ΊΔ
    

    View Slide

13. © Crescware
    ϊʔίʔ
    υͷݶք
    w 'JMF.BLFS1SPʹ͸εΫ
    Ϧ
    ϓτػೳ͕͋Δ
    w ύϨο
    τ͔ΒॲཧΛબ୒ͯ͠
    υϥ
    οά
    ɾ
    υϩοϓͰฒͼସ͑Δײ͡
    w ঃʑʹෳࡶԽ
    w ςε
    τ΋ॻ͚ͳ͍ͨΊόά͕໨ཱͭ
    w σʔλͷೖྗΑ
    Γ
    ΋εΫ
    Ϧ
    ϓτमਖ਼ʹ࣌ؒΛඅ΍͢͜ͱʹͳΓ
    ε
    τ
    Ϩε
    

    View Slide

14. © Crescware
    ΞϓϦԽΛࢥ͍ͭ͘
    w 'JMF.BLFS1SPͰࣗ෼ͷཧ૝ͷσʔλϕʔεΛ࡞Δͷ͸ݫ͍͠
    w J1IPOFΞϓϦʹ͢Δ
    ʁ
    
    w J1IPOFΞϓϦͬͯͲ͏΍ͬͯ࡞ΕΔ
    ʁ
    
    w ԿΛษڧ͢Ε͹͍͍
    ʁ
    
    w ͔Ζ͏
    ͯ͡K2VFSZ͚ͩ৮ͬͨ͜ͱ͋Δঢ়ଶ
    w ແ๳ʹ΋0CKFDUJWF$ͷֶशΛ࢝ΊΔ
    

    View Slide

15. © Crescware
    Կ͕Θ͔Βͳ͍͔Θ͔Βͳ͍
    w 0CKFDUJWF$͕Կ΋Θ͔Βͳ͍
    w ΦϒδΣΫ
    τࢦ޲ͬͯԿ
    ʁ
    
    w ΠϯελϯεͬͯԿ
    ʁ
    
    w γϯάϧ
    τϯͬͯԿ
    ʁ
    
    w ฉ͍ͨ͜ͱͷͳ͍୯ޠͩΒ͚ͷຊΛಡΜͰ΋
    

    ͦ΋ͦ΋ॻ͔Ε͍ͯΔ͜ͱ͕Ұ੾Θ͔Βͳ͍
    

    View Slide

16. © Crescware
    ࠳ં͔Βͷ1)1
    w 0CKFDUJWF$ʹͯɺ
    νϡʔ
    τ
    ϦΞϧͷΞϓϦ͢Β׬੒ͤ͞ΒΕͣ࠳ં
    w ͪΐ
    ͏
    Ͳ8FCσβΠϯͷόΠ
    τͰ8PSE1SFTTͷҊ݅Λॳ୲౰
    w QIQ.Z"ENJOΛΑ
    ͘৮Δ
    w 1)1ͩͬͨΒ0CKFDUJWF$Α
    Γ؆୯
    ʁ
    

    View Slide

17. © Crescware
    .".1ελοΫ
    w .".1ελοΫΛֶͿ
    w .BDJOUPTI "QBDIF .Z42- 1)1ʹΑΔߏ੒ͷ͜ͱ
    

    View Slide

18. © Crescware
    .&"/ελοΫ
    w ΄Ͳͳ͘
    ͯ͠ʜ
    w .&"/ελοΫΛֶͿ
    w .POHP%# &YQSFTT+4 "OHVMBS+4 /PEFKTʹΑΔߏ੒ͷ͜ͱ
    

    View Slide

19. © Crescware
    ୤"QQMFɺ
    ͦͯ͠8FC΁
    w ೥
    w ΋͠0CKFDUJWF$ΛۃΊͯ΋
    

    "QQMF͕কདྷ
    ʮ0CKFDUJWF$΍Ί·͢ʯ
    ͱ͔ݴ͍ग़ͨ͠ΒແବʹͳΓͦ͏
    w "QQMFҎ֎΋࢖ͬͯΔݴޠ
    ɾ
    ٕज़ͷํ͕౤ࢿͷՁ஋͕͋Γͦ͏
    w .&"/ελοΫΛؤுͬͯΈΕ͹
    

    ͲΜͳ؀ڥͰ΋ಈ͖ͦ͏ͳͷͰɺ
    ΍ΔՁ஋͋ΔͷͰ͸
    ʁ
    
    w 8FCΛͪΌΜͱ΍Ζ͏
    ͱܾ৺͢Δ
    w ح੻తʹͦΕʹؾ෇͍ͨ൒೥ޙɺ
    "QQMF͕4XJGUΛެ։͢Δ͜ͱͱͳΔ
    

    View Slide

20. © Crescware
    "OHVMBS+45ZQF4DSJQU
    w .&"/ελοΫͰάάΔͱ৭ʑग़ͯ͘
    Δ
    wʮ͍·ΞϓϦέʔγϣϯΛ࡞ΔͷͰ͋Ε͹"OHVMBS+4͕͍͍Αʯ
    
    wʮ͍·ֶͿͳΒ"MU+4͕͍͍Αʯ
    
    w "MU+4ʹ͸$PGGFF4DSJQUͱ͔5ZQF4DSJQUͱ͔͕͋ΔΒ͍͠
    • https://teppeis.hatenablog.com/entry/typescript-0.9.1
    
    
    w 0CKFDUJWF$Λগͳ͔Βͣ৮ͬͨͷͰ
    

    ܕ෇͖ίϯύΠϧ͋Γͷ5ZQF4DSJQUͷ΄͏͕خ͔ͬͨ͠
    

    View Slide

21. © Crescware
    ษڧձσϏϡʔ
    w "OHVMBS+4͕શવΘ͔ΒΜ
    w ख୳ΓͰ͍Ζ͍Ζ͕Μ͹Δ
    w 5ZQF4DSJQUͷ೔ຊޠࢿྉ΋΄΅ͳ͍
    w Α
    ͏΍͘5ZQF4DSJQU͕ग़ͨ
    w "OHVMBS+4ษڧձʹࢀՃ͢Ε͹ɺ
    ͦ͜Ͱ஌Γ߹ͬͨਓʹ࣭໰Ͱ͖Δ͔΋
    w ژ౎ʹॅΜͰ͍ͨͷͰେࡕͷษڧձʹਃ͠ࠐΉ
    

    View Slide

22. © Crescware
    ਓੜΛม͑ͯ͠·ͬͨग़ձ͍
    

    View Slide

23. © Crescware
    ࠷ڧͷ༑ਓ
    w ೔ຊେֶจཧֶ෦৘ใՊֶՊඌ্ݚڀࣨͷ
    

    ඌ্༸հ͞Μ !MJLS
    ͱ͸͜͜Ͱ஌Γ߹͏
    w ٕज़ྗ͕ڪΖ͍͘͠
    Β͍ߴ͍
    w ࡀ͕ಉ͘͡
    Β͍ͷ͸ͣͳͷʹ࠷ڧײ͕ඬ͍ͬͯΔ
    wʮ͜Ε͕ϓϩͷΤϯδχΞͬͯ΍͔ͭ
    ʂ
    ʂ
    ʯ
    
    w ౰࣌8FC੍࡞ͷΞϧόΠ
    τͩͬͨԞ໺
    

    ΤϯδχΞͷҰൠతͳਫ४ඌ্͞ΜͰ͋Δͱࢥ͍͜ΜͰ͠·
    ͏
    w ͻΑ͜͸ॳΊͯݟͨ΋ͷΛ਌ͩͱೝࣝ͢Δͱ͍͏
    ΞϨ
    

    View Slide

24. © Crescware
    8FCͷྗ
    w ඌ্͞Μʹग़ձͬͯ͠·ͬͨ͜ͱͰ
    

    8FCͷٕज़Λຏ͖8FCٕज़Λۦ࢖ͯ͠Կ͔ΛੜΈग़͢͜ͱʹڧ͘ڵຯΛ࣋ͭ
    w Իָۀքͷ࢓ࣄͱ8FC੍࡞ͷΞϧόΠ
    τͷɺ
    ೋ଍ͷΘΒ͡ͷԞ໺
    

    ʮԻָͱ8FCΛ྆ํͰ͖Δ།Ұແೋͷϓϩʯ
    ʹͳΓ͍ͨͱߟ͑࢝ΊΔ
    

    View Slide

25. © Crescware
    .PUJGBSZͷ๖ժ
    w ೥͔Β೥·Ͱɺ
    ࢼߦࡨޡͯ͠͸࠳ં͍ͯͨ͠Իָσʔλϕʔε΋
    

    ΋ͬͱ಺༰Λݕ౼ͨ͠Βࣗ෼Ҏ֎ͷਓͷ໾ʹ΋ཱͯΔΜ͡Όͳ͔Ζ͏͔
    ʁ
    
    w ࣗ෼༻ͷศརπʔϧͱͯ͠"OHVMBS+4ͳͲΛؤு͍͕ͬͯͨ
    

    ͔ͤͬ͘ͳΒଟ͘ͷਓʹ࢖ͬͯ΋Β͑Δ΋ͷʹ͍ͨ͠
    

    View Slide

26. © Crescware
    8FCαʔϏεͱ
    ͯ͠ग़͢͜ͱͰੈքΛม͍͑ͨ
    

    View Slide

27. © Crescware
    8FCۀք΁
    

    View Slide

28. © Crescware
    ษڧձొஃσϏϡʔ
    w "OHVMBS+4ษڧձͷελοϑͷํ͔Β
    

    Ͱ஻Βͳ͍͔ͱ༠ΘΕΔ
    w ͜Μͳ8FC੍࡞όΠ
    τͷ
    υૉਓ͕
    

    ਓલͰ஻͍͍ͬͯͷ͔ʜͱͳΔ
    w ͜ͷ࣌·ͩɺ
    ੈͷΤϯδχΞ͸શһ͕ඌ্͞ΜΫϥε
    

    ͩͱࢥ͍͜ΜͰ͍ΔͷͰ
    

    ͦΕʹஏ͡ͳ͍಺༰ʹͤͶ͹ɺ
    ͱؾ߹ΛೖΕΔ
    w ਓલͰ੹೚Λ࣋ͬͯԿ͔Λ఻͑ΔͨΊʹ
    

    ཪऔΓΛ೦ೖΓʹ͢Δ
    

    View Slide

29. © Crescware
    ඌ্͞ΜΫϥεʹͳΔͨΊʹ
    w ษڧձొஃσϏϡʔΛܦͯɺ
    
    w ษڧձͰൃද͢Δ
    w -5Ͱ஻Δ
    w ٕज़هࣄΛॻ͍ͯಡΜͰ΋Β͏
    

    ͜ͱ͕ࣗ෼ͷதͰ౰ͨΓલʹͳ͍ͬͯ͘
    w Ξ΢
    τϓο
    τͷ਺͚ͩ੒௕Λ࣮ײ͢Δ
    w ͜ͷͱ͖͸·ͩɺ
    ੒௕ͨ͠Β͍͔ͭඌ্͞ΜΫϥεʹͳΔͱࢥͬͯΔ
    

    View Slide

30. © Crescware
    ࣌͸ྲྀΕͯʜ
    w ژ౎͔Βϓϩࢤ๬Ͱస৬׆ಈΛ࢝ΊͨΒ
    

    $IBUXPSLגࣜձࣾʹ༠͍͚ͬͯͨͩΔ
    w ͦͯ͠ɺ
    גࣜձࣾϐΫηϧάϦ
    ο
    υʹస৬͢Δ
    w ͦͯ͠ɺ
    ϑ
    Ϧʔϥϯεͷϑϩϯ
    τΤϯ
    υʹͳΔ
    

    View Slide

31. © Crescware
    Ͱɺ
    .PUJGBSZ͸
    ʁ
    ʁ
    w ͳ·͡4BB4اۀ΍डୗاۀʹॴଐͨ͠ͷͰɺ
    ͍Ζ͍Ζͱݱ࣮͕ݟ͑ͯ͘
    Δ
    w ҰਓͰ8FCαʔϏεͷ͢΂ͯΛ࣮૷͢ΔͭΒ͞ΛޛΔ
    w ϑϩϯ
    τΤϯ
    υ΋େม
    w όοΫΤϯ
    υͳΜͯ΍ͬͨ͜ͱ͢Βͳ͍
    w σʔλϕʔεΠϯϑϥ΋Α
    ͘෼͔ͬͯͳ͍
    w ͦ΋ͦ΋8FCαʔϏεͬͯɺ
    Ͳ͏΍ͬͯͰ͖ͯΔͷ͔࣮͸Θ͔ͬͯͳ͍
    w ࣗ෼ͷٕज़ྗͷແ͞ΛטΈకΊɺ
    ΍Γ͍͕ͨલʹ౿Έग़ͤͳ͍
    w ͋ͱඌ্͞Μ͸όέϞϊ
    

    View Slide

32. © Crescware
    ࠓ͸·ͩૣ͍Λݴ͍༁ʹͯ͠͠·
    ͏
    w ࠓͷࣗ෼ͷεΩϧͰ͸·ͩ8FCαʔϏεΛ࡞ΔҬʹୡ͍ͯ͠ͳ͍
    w ͱ͸͍͑8FCαʔϏεΛ࡞Βͳ͘
    ͯ΋ੜ׆අ͸Ք͛ͯΔ͠ɺ
    

    ָ͍͠5ZQF4DSJQUͰͷ։ൃۀ຿͸ଓ͚ΒΕΔ͠ɺ
    

    ࠓͦ΋ͦ΋ࣗ෼͸΋͏Իָۀք཭Εͨ͠ɺ
    

    ΋͏͍͍͔ͳʜ
    

    View Slide

33. © Crescware
    ʮ͍ͭϦ
    Ϧʔε͢ΔΜͰ͔͢ʯ
    

    View Slide

34. © Crescware
    ͋ͷͱ͖ͷ೤ҙ
    w ೥
    w ඌ্͞Μͱग़ձͬͨͱ͖ͷিܸ
    w .PUJGBSZΛ͍͔ͭੈʹग़͢ͱ͍͏೤ҙ
    w ෆ޾ʹ΋ඌ্͞ΜʹͦΕΛᕵʑ
    ͱઆ͍ͨͨΊʹ
    

    ඌ্͞Μ͔Β
    ʮͰɺ
    ͍ͭϦ
    Ϧʔε͢Δͷʯ
    ͱຖ೥ແݶʹݴΘΕଓ͚Δ
    w ͜͜Ͱग़͞ͳ͔ͬͨΒࢮ͵·ͰݴΘΕͦ͏
    w ͦ͏ͩɺ
    Զ͸Ϧ
    Ϧʔε͢ΔΜͩ
    

    View Slide

35. © Crescware
    Ͱɺ
    Ϧ
    Ϧʔεͨ͠
    

    View Slide

36. © Crescware
    ҰਓͰͲ͜·ͰͰ͖Δ͔
    w ޾͍/PEFKT5ZQF4DSJQUͷ͜ͱ͚ͩΛߟ͑Ε͹
    

    ϑϩϯ
    τΤϯ
    υόοΫΤϯ
    υશମΛಠྗͰ࣮૷͖͠ΔεΩϧ͸͍ͭͨ
    w ίʔ
    υΛॻ͚ͩ͘ͳΒ୯७ʹͻͨ͢Βॻ͚͹Ͱ͖ͦ͏
    w ۀ຿தɺ
    ଞਓʹ೚͍ͤͯͨྖҬ
    w σʔλϕʔεͷҡ࣋΍ϚΠάϨʔγϣϯͷۀ຿ϊ΢ϋ΢͸ͳ͍
    w Πϯϑϥҡ࣋ͷϊ΢ϋ΢΋࣋ͬͯͳ͍
    w ͦͷ΁ΜͷྖҬΛͲ͏͢Δ͔
    

    View Slide

37. © Crescware
    Ξ΢
    τιʔε͢Δ
    w ೥݄ʹΫϨε΢ΣΞגࣜձࣾͱͯ͠๏ਓԽͨ͠
    w Ͱ΋ैۀһΛޏ͑Δ΄Ͳͷച্͸ͳ͍
    w ࣗ෼ͷۤखͳྖҬΛ೚ͤΒΕΔਓΛޏ͏
    Α
    Γɺ
    

    4BB4 #BB4Λ׆༻͍ͯ͘͠
    w ͜ΕΒ4BB4ͷ஌ࣝ͸ɺ
    ೔ࠒͷۀ຿ܦݧͷࣀ෺
    w ࠷ऴతʹɺ
    ӬଓԽ͞Εͨ஋Λϒϥ΢β্ʹදࣔͰ͖Ε͹উͪ
    

    View Slide

38. © Crescware
    ιϩ։ൃΛࢧ͑Δ4BB4ͨͪ
    

    View Slide

39. © Crescware
    "VUI
    w ೝূܥ4BB4
    

    ύεϫʔ
    υ؅ཧΛࣗ࡞͢Δ࣌୅͸ͨͿΜऴΘͬͨͱࢥ͍ͬͯΔ
    w 5XJUUFS0"VUI (PPHMF0"VUIͳͲͷ
    

    ιʔγϟϧϩάΠϯ΋ରԠҰॠ
    w 'JSFCBTF"VUI೿΋͍Δͱࢥ͏͚Ͳ
    

    "VUI+85WFSJGZͷۀ຿ܦݧ͕͋ͬͨͨΊͪ͜ΒΛ࠾༻
    

    View Slide

40. © Crescware
    )"463"
    w ӬଓԽϨΠϠʔͷ#BB4
    w 1PTUHSF42-ͱ઀ଓ͢Δ͜ͱͰɺ
    ͦͷϚΠάϨʔγϣϯΛࣗಈԽ
    w ಉ࣌ʹ(SBQI2-ͷSFTPMWFSΛ͢΂ͯͷΧϥϜʹ͍ͭͯࣗಈੜ੒
    w ͖Ίࡉ͔͍3PMFͱ1FSNJTTJPOͷઃఆʹΑͬͯ"VUIͷ
    

    +85τʔΫϯʹج͍ͮͨσʔλऔಘͷ੍ݶΛॊೈʹ࣮૷
    

    View Slide

41. © Crescware
    7FSDFM
    w σϓϩΠ
    ɾ
    ϗεςΟ
    ϯάϨΠϠʔͷ#BB4
    w (JU)VCͱ࿈ܞ͠ɺ
    NBJOCSBODIʹNFSHF͢Δ͚ͩͰϓϩμΫγϣϯσϓϩΠ
    w ։ൃ؀ڥσϓϩΠ΋༰қ
    w υϝΠϯઃఆ΋Ұॠ
    w ଞͷ$*αʔϏεΛೖΕͣͱ΋׬݁͢ΔϏϧυॲཧ
    ʢ-JOU΍ςε
    τ΋ಉ࣮࣌ߦʣ
    
    w ॊೈͳ؀ڥม਺ઃఆ
    

    View Slide

42. © Crescware
    'JSFCBTF
    w ը૾ͷΞοϓϩʔ
    υ·ΘΓ
    w ϦΞϧλΠϜσʔλϕʔεʹΑΔଈ࣌ߋ৽·ΘΓ
    

    View Slide

43. © Crescware
    4FOUSZ
    w ΤϥʔऩूͱϩΪϯά
    w τϥϯβΫγϣϯ୯Ґͷύϑ
    ΥʔϚϯεܭଌͱΞϥʔ
    τ
    

    View Slide

44. © Crescware
    γεςϜΞʔΩςΫνϟ
    .PUJGBSZ؅ཧ .PUJGBSZຊମ .PUJGBSZ؅ཧ
    7FSDFM 7FSDFM 7FSDFM
    )BTVSB
    ϓϩμΫγϣϯ؀ڥ εςʔδϯά؀ڥ
    "VUI
    )FSPLV1PTUHSF42-
    )FSPLV1PTUHSF42-
    4FOUSZ "VUI
    7FSDFM
    )BTVSB
    .PUJGBSZຊମ
    3FBDU 5ZQF4DSJQU FTMJOU KFTU QSFUUJFS
    

    View Slide

45. © Crescware
    ͦΕ($1c"84ͰͰ͖ΔΑ
    w ஌ͬͯΔ
    w ($1 "84ͷ
    υΩϡϝϯ
    τ͸͍ͣΕ΋ඇৗʹաࠅ
    w ͍··Ͱͷۀ຿Ͱ͸ৗʹ
    

    ($1ͷϓϩϑΣογϣφϧɺ
    "84ͷϓϩϑΣογϣφϧͱڞʹ͍ͯͨ͠
    w ࠓճ͸׬શιϩͳͷͰɺ
    ීஈۀ຿Ͱ࢖ͬͨ͜ͱͷ͋ͬͨ4BB4ͳͲͰ
    

    ͦͬͪͷܦݧ஋ͷ׆༻ʹશৼΓ
    ͨ͠
    wʮҡ࣋අ͕Ͳͬͪͷ΄͏͕͍͘
    Β͍҆ʯ
    ͳͲ͸׬શʹ౓֎ࢹͷϑΣʔζ
    

    View Slide

46. © Crescware
    8FCαʔϏεˠ஫ҙ఺
    

    View Slide

47. © Crescware
    ؀ڥม਺ͷऔΓѻ͍͕൥ࡶ
    w 4BB4͕ͨ͘
    ͞Μग़ͯ͘
    Δͱɺ
    ΞΫηε
    τʔΫϯ΍γʔΫϨο
    τͷࢁʹͳΔ
    w ຊ൪؀ڥͱ։ൃ؀ڥͷܥ౷༻ҙ͢Δͱɺ
    ͦΕΒ
    ʷͱͳΓऔΓҧ͑ʹ஫ҙ
    w 1BTTXPSEͱ͔ʹಥͬࠐΜͰ͓͘
    ͱɺ
    ෳ਺ϚγϯͰͷ։ൃͰศར
    w npx vercel env pullͱ͍͏
    ίϚϯ
    υ΋ศར
    

    View Slide

48. © Crescware
    ྫ֎ॲཧΛ೦ೖΓʹ
    w Կ͔໰୊͕ىͬͨ͜ͱ͖ʹɺ
    ໰୊͕ىͬͨ͜ॠؒͰྫ֎ѻ͍ʹ͢Δ
    w ͨͱ͑͹ ͳͲΛ࢖ͬͯ஋͕ͳ͍৔߹ʹɺ
    ͷ͏ͷ͏
    ͱੜ͖ଓ͚ͳ͍
    w 6ODBVHIU&YDFQUJPOΛݶΓͳ͘ແ͘
    ͢
    wʮͳ͔ͥͲ͔͜ͰόάͬͯΔʯ
    Ͱ͸ͳ͘ɺ
    ΤϥʔϩάΛಡΜͩॠؒ
    

    ൜ਓΛಛఆͰ͖Δఔ౓·Ͱ͸ΤϥʔϩΪϯάΛۃΊΔ
    w ܖ໿ϓϩάϥϛϯάɺ
    ๷ޚతϓϩάϥϛϯά
    w 4FOUSZΛಋೖ͢Δ͜ͱͰຊ൪؀ڥͷྫ֎Λྻڍ͠ɺ
    ॱ࣍मਖ਼͢Δ
    w Ұਓ͔͍͠ͳ͍ͷͰௐࠪΛґཔ͢Δͱ͔΋Ͱ͖ͳ͍ɺ
    ղܾ͸࣌ؒউෛʹͳΔ
    

    View Slide

49. © Crescware
    ա౓ͳந৅Խ͸ආ͚Δɺ
    ڞ௨Խ͸͢Δ
    wʮকདྷ͍͋͋͏ϢʔεέʔεΛ࣮ݱ͢ΔͨΊʹɺ
    ࠓͷ͏
    ͪʹ͜͏͍͏ߏ଄ʹͯ͠ʜʯ
    
    w ͍͍ͩͨె࿑ʹऴΘΔ
    w ͍ΘΏΔ:"(/*
    w ͍͍ͩͨͦͷϢʔεέʔεΛ࣮ݱ͢Δͱ͖ʹ͸ɺ
    ΋ͬͱ͍͍؀ڥ͕ੜ·ΕͯΔ
    w ͋Δ͍͸ͦͷϢʔεέʔεΛ΍Βͳ͍ࣄۀ൑அͱ͔͕ԼΔ
    w ͨͩɺ
    ໌Β͔ʹ܁Γฦ͠ॻ͘όϦσʔγϣϯͷؔ਺΍ఆ਺ͳͲ͸
    

    ԣணͤͣʹ֎෦ϑΝΠϧʹಀͯ͠JNQPSUͰڞ༗͢Δ
    

    View Slide

50. © Crescware
    ຊ൪؀ڥͰͷσϓϩΠ
    ͱಈ࡞֬ೝ͸೦ೖΓʹ
    w ։ൃ͕௕Ҿ͘৔߹
    w ˠͷϑΣʔζͰ͋Ε͹ҡ࣋අΛݒ೦ͯ͠
    

    εςʔδϯάͱͯ͠ແྉϓϥϯͰ࡞Γଓ͚ͯɺ
    

    Ϣʔεέʔε͕ݻ·ͬͨΒ༗ྉϓϥϯͰϓϩμΫγϣϯ
    ɾ
    σϓϩΠɺ
    

    ͱ͍͏
    ͜ͱ͕͋Δ
    ʢಛʹ
    υϕϯνϟʔʣ
    
    w ؀ڥม਺ͷ࿩୊Ͱ΋৮Ε͕ͨɺ
    

    εςʔδϯάͰ͸ಈ͘ͷʹϓϩμΫγϣϯͰ͸ࢮ͵
    

    Έ͍ͨͳࣄଶׂ͕ͱසൃ͢Δ
    w ༧ࢉʹ༨༟͕͋ΔͷͰ͋Ε͹ɺ
    ͬ͞͞ͱ༗ྉܖ໿Λͯ͠ૄ௨͓ͯ͘͠
    ͱΑ͍
    

    View Slide

51. © Crescware
    ͏
    ͔ͬΓ๨Ε͕ͪࣄ߲
    w 0(1ϝλσʔλͱ0(1༻ը૾Λઃఆ͢Δ
    w UP$ઐ໳Ͱଓ͚͍ͯΔਓʹ͸
    ʮͦΜͳͷ౰ͨΓલͰ͸ʯ
    ͱͳΔ͔΋
    w UP#ઐ໳ͷۀ຿Λଓ͚͍ͯΔͱૉͰ0(1ͱ͍͏֓೦ࣗମ๨٫͢Δ
    ʢݴ͍༁ʣ
    
    w ಉ༷ʹ'BWJDPO΋๨Εͳ͍Α
    ͏ʹ
    w -JHIUIPVTF΋ͪΌΜͱຊ൪؀ڥͰ௨ͯ͠
    

    ՄೳͰ͋Ε͹Ϧ
    Ϧʔεલʹ఺਺ΛߴΊ͓ͯ͘
    w ͱʹ͔͘
    Ϧ
    Ϧʔεεέδϡʔϧʹ༨༟Λ࣋ͭ
    

    View Slide

52. © Crescware
    ϲ݄։ൃͷഎܠ
    

    View Slide

53. © Crescware
    ϑ
    Ϧʔϥϯε࣌୅ʹϦ
    Ϧʔε͍ͯ͠ͳ͍ͷ͸ͳͥ
    w εΩϧతʹ͸೥ͱ೥Ͱ͸ׂͱ͍ۙ΋ͷ͕͋Δ
    w ͜Ε͸େਓͷࣄ৘
    w ݸਓ໊ٛͰԻָؔ܎ͷαʔϏεΛ
    Ϧ
    Ϧʔεͯ͠͠·
    ͏
    ͱ
    

    ݖརؔ܎Ͱ໰୊͕ൃੜͨ͠৔߹ͷ༗ݶ੹೚͕ൃੜͤͣݒ೦͕࢒Δ
    w ݸਓࣄۀओ͸ແݶ੹೚
    w גࣜձࣾ͸༗ݶ੹೚
    w ͜ͷ৔Ͱݴ͏
    ͜ͱͰ͸ͳ͍͕ɺ
    ๏ਓԽ͸ଞʹ΋༷ʑͳཧ༝͕͋Δ
    

    View Slide

54. © Crescware
    ར༻ن໿ͱ
    ϓϥΠόγʔϙϦγʔ
    w ݸਓͰ্ཱͪ͛Δ8FCαʔϏεͷ৔߹
    

    ͋·
    Γؾʹ͞Εͳ͍͔΋͠Εͳ͍ɺ
    ར༻ن໿ͱ
    ϓϥΠόγʔϙϦγʔ
    w ๏ਓͱͯ͠Ϧ
    Ϧʔεɺ
    ӡӦ͍ͯ͘͠৔߹ʹ͸͜ͷลΓͷΫΦϦςΟ
    ΋ٻΊΒΕΔ
    w หޢ࢜ͱͷٞ࿦ʹΑͬͯ͢΂ͯฐࣾ༻ʹॻ͖ԼΖͯ͠΋Β͍ͬͯΔ
    w ͜ͷล͸ૉਓ͕ςϯϓϨʔ
    τίϐϖ͢Δͷ͸
    ʢ๏ਓͱͯ͠ͳΒ͹ʣ
    ةݥ
    

    View Slide

55. © Crescware
    ঎ඪొ࿥
    w λΠ
    ϛϯάతʹ͋·
    Γৄ͍͠࿩͸Ͱ͖ͳ͍͕ɺ
    ։ൃॳظ͔Βख഑͍ͯ͠Δ
    

    View Slide

56. © Crescware
    υϝΠϯ໊
    w ೥ʹ.PUJGBSZͱ͍͏αʔϏε໊Λࢥ͍͍͍ͭͯΔͷͰɺ
    ଈ࠲ʹऔಘ
    w ݁Ռతʹ೥·ͰԘ௮͚ʹͳ͍ͬͯͨ
    

    View Slide

57. © Crescware
    ϲ݄Ͱ࡞ͬͨͱ͸Ͳ͏͍͏
    ͜ͱ͔
    w npx create-next-appΛ࣮ߦ͔ͯ͠Βϲ݄ڧͰެ։೔݄೔Λܴ͑Δ
    w ࣮͸ϲ݄ఔ౓Ͱ࡞͍ͬͯΔ
    w ݱଘ͢Δ໿ສߦͷ5ZQF4DSJQUίʔ
    υ
    ʢۭߦɺ
    ςε
    τϑ
    ΝΠϧؚΉʣ
    
    w ड़΂ສߦͷίϛο
    τ
    ʢQBDLBHFMPDLKTPOͷࠩ෼আ͘ʣ
    
    w ड़΂࣌ؒ
    ʢ˺ਓ೔ʣ
    ໿೥෼ͷΞΠσΞ
    w ౔೔ɺ
    ฏ೔໷ͳͲʹਐḿ
    w ͜Ε·Ͱʹϓϩ
    τλΠ
    ϓ͸ੈ୅͘
    Β͍ɺ
    ࡞ͬͯ͸ഁغ͍ͯ͠Δ
    

    View Slide

58. © Crescware
    ࠓ೔ݴ͍͔ͨͬͨ͜ͱ
    w ೥લ͔Βࢥ͍ͬͯͨ͜ͱΛੈʹ൸࿐Ͱ͖ΔͱࠐΈ্͛Δ΋ͷ͕͋Δ
    w ৴པײͷ͋Δ৘ใൃ৴Λ೔ʑ܁Γฦͤ͹
    

    ೥લʹૉਓͩͱͯ͠΋ɺ
    ͜͜·ͰདྷΒΕΔ
    w ৭ʑ׆༻͢Ε͹ιϩ։ൃϲ݄ͰͦΕͳΓͷ8FCαʔϏε͸্ཱͪ͛ΒΕΔ
    w 8FCͰͳʹ͔Λಈ͔͢ͷ͸ָ͍͔͠Β
    

    ΈΜͳ8FC΍Ζ͏
    w ͋ͱඌ্͞Μ͸όέϞϊ
    

    View Slide

59. © Crescware
    5IBOLZPV
    

    View Slide