20221119_FrontendConfOkinawa_iwamu

2022/11/19(Sat)
FRONTEND CONFERENCE OKINAWA 2022
React/TypeScript/Firebaseで個人開発したWebアプリを商用提供して1年半、運用を続けてわかったこと

Transcript

1. ϑϩϯτΤϯυΧϯϑΝϨϯεԭೄ
   4BU
   
   :PH"HJMF&OHJOFFS
   ؠଜɹୖ
   3FBDU5ZQF4DSJQU'JSFCBTFͰݸਓ։ൃͨ͠
   8FCΞϓϦΛ঎༻ఏڙͯ͠೥൒ɺ
   ӡ༻Λଓ͚ͯΘ͔ͬͨ͜ͱ
   

   View Slide

2. ԭೄࡏॅ
   ϑϦʔϥϯεΤϯδχΞ
   ؠଜɹୖ
   ͍ΘΉʔˏϤΨ͸͍͍ͧ
   !UBLVTBNBS
   ࣗݾ঺հ
   ೥݄ʙɹ๭௨৴ࣄۀऀͷΞδϟΠϧ։ൃνʔϜ
   

   ೥݄ʙɹɹΞδϟΠϧݚमͷߨࢣɹ
   

   View Slide

3. BOZDPNNVָ͍͠;Γ͔͑ΓΞϓϦ
   IUUQTBOZDPNNVXFCBQQ
   ʢ໦ʣຊ൪ϦϦʔεʂ
   

   View Slide

4. ϤΨΠϯετϥΫλʔ
   

   View Slide

5. ಺༁
   ऩೖ
   ۀ຿ҕୗ
   ߨࢣۀ
   ݸਓ։ൃ
   ϤΨ
   ࣌ؒ
   ۀ຿ҕୗ
   ߨࢣۀ
   ݸਓ։ൃ
   ϤΨ
   

   View Slide

6. ຊ೔ͷ͓࿩
   ࠓ೔͸ɺ
   3FBDU5ZQF4DSJQU'JSFCBTFͰݸ
   ਓ։ൃͨ͠8FCΞϓϦΛ঎༻ఏڙͯ͠
   ೥൒ɺӡ༻Λଓ͚ͯΘ͔ͬͨ͜ͱ
   ʹ͍ͭͯ࿩͠·͢ɻ
   

   View Slide

7. ɾੜెͷ৘ใΛ&YDFMͰ؅ཧ͍ͯ͠Δɻ
   

   ɹ৽نͷੜెʹ͸ΞϯέʔτʢࢴʣΛॻ͍ͯ΋Β͍ɺ&YDFMʹసه͍ͯ͠Δ
   

   ɹग़੮ঢ়گͷνΣοΫɺલճͲΜͳϨοεϯΛड͚͔ͨɺͳͲ೺ѲͰ͖͍ͯͳ͍
   ɾಇ͍͍ͯΔߨࢣͷڅ༩ܭࢉ͕େม
   

   ɹड͚࣋ͬͨϨοεϯ਺ͱࢀՃͨ͠ੜె਺ʢελδΦɺΦϯϥΠϯʣʹΑΔา߹੍
   

   ɹϨοεϯޙʹ&YDFMʹೖྗͯ͠΋Β͍ɺϚΫϩͰܭࢉ͍ͯ͠Δ͕ਖ਼௚ͭΒ͍
   ɾ&YDFM͸0OF%SJWFʹอଘ͍ͯ͠Δ͕ɺ0OF%SJWFͷ༰ྔ͕ෆ଍͕ͪ͠ɻ
   ϤΨελδΦ๊͕͍͑ͯͨ೰Έ
   ސ٬৘ใ؅ཧγεςϜΛͭ͘Γ·͠ΐ͏ʂ
   

   View Slide

8. ԿͰͭ͘Δ͔ʁ
   LJOUPOF
   (PPHMF
   "QQ4DSJQU
   3FBDU
   'JSFCBTF
   අ༻ ˚ ˓ ˓
   Ϣʔβʔࣗ਎ͷ
   ΧελϚΠζੑ
   ˚ ˚ º
   ࣗ෼ͷεΩϧ ˚ ˚ ˓
   

   View Slide

9. ը໘Πϝʔδ
   

   View Slide

10. ը໘ͱσʔλϕʔεͷؔ܎
    ߨࢣ
    ߨ࠲
    ސ٬
    Ϩοεϯ
    ࢀՃ
    
    /
    
    
    
    /
    /
    /
    σʔλ
    ը໘
    ߨ࠲Ұཡ ߨ࠲ৄࡉ
    ߨࢣҰཡ
    ߨࢣৄࡉ
    ސ٬Ұཡ
    ސ٬ৄࡉ
    ϨοεϯҰཡ
    Ϩοεϯৄࡉ
    

    View Slide

11. ݴޠ΍؀ڥ
    React
    TypeScript
    Material UI
    (MUIʣ
    Storybook
    GitHub
    Trello
    Figma
    Visual Studio Code
    

    View Slide

12. ෺ཧతͳ؀ڥ
    Ergohuman ¥99,800
    43 inch monitorɹ¥39,322
    HHKB Professional
    Type-Sɹ¥33,200
    Mac mini ¥124,080
    ஌໊ޚଟग़ԣ
    խ Miyabiɹ¥xxx,xxx
    

    View Slide

13. ։ൃͷྲྀΕ
    git pull
    ᶃ
    yarn start ᶄ
    yarn storybook
    ιʔείʔυमਖ਼
    testΛॻ͍࣮ͯߦ
    StorybookͰUI֬ೝ
    git commit
    git push
    ᶅ Production
    Staging
    Development
    ᶆ
    fi
    rebase deploy -P dev
    ᶇ
    fi
    rebase deploy -P stg
    ᶈ
    fi
    rebase deploy -P prd
    Export&Import
    ຊ൪σʔλ
    ςετ༻σʔλ
    

    View Slide

14. εέδϡʔϧ
    ೥ळࠒɹɹɹɹɹ՝୊ώΞϦϯά
    ೥ͷ೥຤ʙ೥࢝ɹౙٳΈͷ̎िؒͰϓϩτλΠϓΛ։ൃ
    ೥݄ʙ݄ɹɹЌ൛ϦϦʔεɺ͓ࢼ͠ར༻
    ೥݄ʙɹɹɹɹਖ਼ࣜϦϦʔεʢ༗ঈʹͯαʔϏεఏڙʣ
    ೥݄ɹސ٬ࢯ໊ɾॅॴͷ$47ΤΫεϙʔτػೳ
    ೥݄ɹϨοεϯه࿥Λ݄ผʹҰཡදࣔʢߴ଎Խɺෛՙ௿ݮʣɹ
    ೥݄ɹ'JSFCBTF4%,WରԠ
    ೥݄ɹ6*σβΠϯมߋʢϊʔτ1$ͷը໘αΠζʹ߹ΘͤΔʣ
    ೥݄ɹ.BUFSJBM6*ʢ.6*ʣWରԠ
    ೥݄ɹ3FBDU3PVUFSWରԠ
    ೥݄
    'JSFCBTF4%,W
    ೥݄
    .6*W
    ೥݄
    3FBDU3PVUFSW
    

    View Slide

15. Θ͔ͬͨ͜ͱ
    ࣗ෼͕ಘҙͳ
    ٕज़ΛબͿ
    ࠷৽ٕज़ΑΓ΋
    ރΕٕͨज़
    ա৒඼࣭͸
    ཁΒͳ͍
    ӡ༻ίετΛ
    ॏࢹ͢Δ
    ސ٬΁ͷฦࣄ͸
    ͱʹ͔͘ૣ͘
    ܖ໿ॻΛͭ͘Δ
    ޱ໿ଋ͸ةݥ
    

    View Slide

16. ࣦഊͨ͠ྫʢผҊ݅ʣ
    wεϚϗΞϓϦʢ'MVUUFSʣͷ࡞੒
    w஌Γ߹͍͔Βͷґཔɻܖ໿ॻ͸࡞੒͠ͳ͔ͬͨ
    w͓ۚͰ͸ͳͦ͘ͷਓ͕ఏڙ͍ͯ͠ΔαʔϏεΛແྉͰར༻Ͱ͖Δɻ
    

    ͱ͍͏ަ׵৚݅
    ୲౰ൣғ͸ϓϩτ
    λΠϓʢ.71ʣΛ
    ࡞Δͱ͜Ζ·Ͱ
    ൃ஫ऀ͕.71Λ
    ࢖ͬͯϢʔβʔݕ
    ূΛ͢Δ
    Ϣʔβʔݕূͷ݁
    Ռɺ։ൃΛܧଓ͢
    Δ৔߹͸ผܖ໿
    ຊ൪ϦϦʔεՄೳͳ
    ঢ়ଶ·Ͱ࢓্͛ͯ
    ΋Β͏
    ࣗ෼ͷೝࣝ ૬खͷೝࣝ
    

    View Slide

17. ܖ໿ॻαϯϓϧ
    

    View Slide

18. ੥ٻॻͱೖۚ
    1BZ1BMͷϏδωεΞΧ΢ϯτΛ࡞੒ ຖ݄ɺ੥ٻॻΛ࡞੒ɾૹ෇ ೖۚΛ֬ೝ
    -*/&Ͱ΋
    ࿈བྷ͢Δ
    ͍ͭͰʹ௥Ճ
    ཁ๬ΛώΞϦ
    ϯά
    ੥ٻɾೖۚ͸ސ٬ͱͷίϛϡχέʔγϣϯ
    

    View Slide

19. ·ͱΊ
    ٕज़͸େࣄ
    ސ٬ͱͷର࿩͸
    ΋ͬͱେࣄ
    ୭ʹ΋པΕͳ͍
    ࣗ෼Ͱ
    ίϯτϩʔϧ
    ՄೳͳൣғͰ΍Δ
    ޱ໿ଋͰ͸ͳ͘
    ܖ໿ॻΛͭ͘Ζ͏
    ఏڙͨ͠
    αʔϏεͷରՁ͸
    ͓ۚͰ΋Β͏
    ݸਓ։ൃ͸ٕज़͚ͩͰͳ͘Ϗδωεͷֶͼ͕ଟ͍
    ػձ͕͋Ε͹ͥͻ௅ઓͯ͠ΈΑ͏
    

    View Slide

20. ϑΣχοΫεϓϩδΣΫτ%FW0QTγϛϡϨʔγϣϯݚम
    IUUQTXXXJUQSFOFVSTDPKQFWFOUUQQUPVS
    גࣜձࣾ*5ϓϨφʔζδϟύϯɾΞδΞύγϑΟοΫ
    %9ਪਐʹ͓͚ΔΧΪͱͳΔʮ%FW0QTʯΛ
    ήʔϛϑΟέʔγϣϯͰମײͰ͖Δɺγϛϡ
    ϨʔγϣϯܕݚमʮϑΣχοΫεϓϩδΣΫ
    τ%FW0QTγϛϡϨʔγϣϯݚमʯ
    

    

    डߨऀ͸༷ʑͳ໰୊Λ๊͑ͨՍۭͷاۀͷҰ
    һͱͳΓɺଓʑͱൃੜ͢Δ໰୊ʹରॲ͠ͳ͕
    Βۀ຿Λ਱ߦ͠ɺͲͷΑ͏ʹ%FW0QTΛ࣮຿
    ؀ڥʹద༻͢Δ͔Λ࣮ફతʹֶ΂·͢ɻ
    ԭೄͰ΋։࠵͍ͨ͠ʂ
    

    View Slide

21. εΫϥϜϑΣεΛԭೄͰ։࠵͠Α͏ʂ
    ݄ઋ୆
    ݄େࡕ
    ݄ࡳຈ
    ݄৽ׁ
    ݄෱Ԭ
    ݄ࡾՏ
    ݄౦ژ
    ݄ʙ೔
    ԭೄ4QSJOU
    

    View Slide

22. ΞδϟΠϧମݧϫʔΫγϣοϓ
    ࠙਌ձʢҿ৯ແྉʣ
    ΞϯΧϯϑΝϨϯε
    

    View Slide

23. ෩ͷ࣌୅ɺ͋Γͷ··ʹɻࣗ෼ͷਓੜΛָ͠Έ·͠ΐ͏
    ୭͔ͷͨΊͰͳ͘ɺࣗ෼ͷͨΊʹ
    ࠓ೔͓ձ͍ͨ͠օ༷͕਎΋৺΋݈߁Ͱաͤ͝·͢Α͏ʹ
    4BU
    
    :PH"HJMF&OHJOFFS
    ؠଜɹୖ
    

    View Slide