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ΞϓϦΛ঎༻ఏڙͯ͠೥൒ɺ
   ӡ༻Λଓ͚ͯΘ͔ͬͨ͜ͱ
2. ԭೄࡏॅ
   ϑϦʔϥϯεΤϯδχΞ ؠଜɹୖ ͍ΘΉʔˏϤΨ͸͍͍ͧ
   !UBLVTBNBS ࣗݾ঺հ ೥݄ʙɹ๭௨৴ࣄۀऀͷΞδϟΠϧ։ൃνʔϜ 
 ೥݄ʙɹɹΞδϟΠϧݚमͷߨࢣɹ
3. BOZDPNNV
   ָ͍͠;Γ͔͑ΓΞϓϦ IUUQTBOZDPNNVXFCBQQ ʢ໦ʣຊ൪ϦϦʔεʂ
4. ϤΨΠϯετϥΫλʔ
5. ಺༁ ऩೖ ۀ຿ҕୗ ߨࢣۀ ݸਓ։ൃ ϤΨ ࣌ؒ ۀ຿ҕୗ ߨࢣۀ ݸਓ։ൃ ϤΨ
6. ຊ೔ͷ͓࿩ ࠓ೔͸ɺ 3FBDU5ZQF4DSJQU'JSFCBTFͰݸ ਓ։ൃͨ͠8FCΞϓϦΛ঎༻ఏڙͯ͠ ೥൒ɺӡ༻Λଓ͚ͯΘ͔ͬͨ͜ͱ ʹ͍ͭͯ࿩͠·͢ɻ
7. ɾੜెͷ৘ใΛ&YDFMͰ؅ཧ͍ͯ͠Δɻ 
 ɹ৽نͷੜెʹ͸ΞϯέʔτʢࢴʣΛॻ͍ͯ΋Β͍ɺ&YDFMʹసه͍ͯ͠Δ 
 ɹग़੮ঢ়گͷνΣοΫɺલճͲΜͳϨοεϯΛड͚͔ͨɺͳͲ೺ѲͰ͖͍ͯͳ͍
   ɾಇ͍͍ͯΔߨࢣͷڅ༩ܭࢉ͕େม 
 ɹड͚࣋ͬͨϨοεϯ਺ͱࢀՃͨ͠ੜె਺ʢελδΦɺΦϯϥΠϯʣʹΑΔา߹੍ 
 ɹϨοεϯޙʹ&YDFMʹೖྗͯ͠΋Β͍ɺϚΫϩͰܭࢉ͍ͯ͠Δ͕ਖ਼௚ͭΒ͍
   ɾ&YDFM͸0OF%SJWFʹอଘ͍ͯ͠Δ͕ɺ0OF%SJWFͷ༰ྔ͕ෆ଍͕ͪ͠ɻ ϤΨελδΦ๊͕͍͑ͯͨ೰Έ ސ٬৘ใ؅ཧγεςϜΛͭ͘Γ·͠ΐ͏ʂ
8. ԿͰͭ͘Δ͔ʁ LJOUPOF (PPHMF
   "QQ
   4DSJQU 3FBDU
   'JSFCBTF අ༻ ˚ ˓ ˓ Ϣʔβʔࣗ਎ͷ
   ΧελϚΠζੑ ˚ ˚ º ࣗ෼ͷεΩϧ ˚ ˚ ˓
9. ը໘Πϝʔδ
10. ը໘ͱσʔλϕʔεͷؔ܎ ߨࢣ ߨ࠲ ސ٬ Ϩοεϯ ࢀՃ  /    / / / σʔλ ը໘ ߨ࠲Ұཡ ߨ࠲ৄࡉ ߨࢣҰཡ ߨࢣৄࡉ ސ٬Ұཡ ސ٬ৄࡉ ϨοεϯҰཡ Ϩοεϯৄࡉ
11. ݴޠ΍؀ڥ React TypeScript Material UI (MUIʣ Storybook GitHub Trello Figma Visual Studio Code
12. ෺ཧతͳ؀ڥ Ergohuman ¥99,800 43 inch monitorɹ¥39,322 HHKB Professional Type-Sɹ¥33,200 Mac mini ¥124,080 ஌໊ޚଟग़ԣ խ Miyabiɹ¥xxx,xxx
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 ຊ൪σʔλ ςετ༻σʔλ
14. εέδϡʔϧ ೥ळࠒɹɹɹɹɹ՝୊ώΞϦϯά
    ೥ͷ೥຤ʙ೥࢝ɹౙٳΈͷ̎िؒͰϓϩτλΠϓΛ։ൃ
    ೥݄ʙ݄ɹɹ
    Ќ൛ϦϦʔεɺ͓ࢼ͠ར༻
    ೥݄ʙɹɹɹɹਖ਼ࣜϦϦʔεʢ༗ঈʹͯαʔϏεఏڙʣ
    ೥݄ɹސ٬ࢯ໊ɾॅॴͷ$47ΤΫεϙʔτػೳ
    ೥݄ɹϨοεϯه࿥Λ݄ผʹҰཡදࣔʢߴ଎Խɺෛՙ௿ݮʣɹ
    ೥݄ɹ'JSFCBTF
    4%,
    WରԠ
    ೥݄ɹ6*σβΠϯมߋʢϊʔτ1$ͷը໘αΠζʹ߹ΘͤΔʣ
    ೥݄ɹ.BUFSJBM
    6*ʢ.6*ʣWରԠ
    ೥݄ɹ3FBDU
    3PVUFS
    WରԠ ೥݄
    'JSFCBTF
    4%,
    W ೥݄
    .6*
    W ೥݄
    3FBDU
    3PVUFS
    W
15. Θ͔ͬͨ͜ͱ ࣗ෼͕ಘҙͳ
    ٕज़ΛબͿ ࠷৽ٕज़ΑΓ΋
    ރΕٕͨज़ ա৒඼࣭͸
    ཁΒͳ͍ ӡ༻ίετΛ
    ॏࢹ͢Δ ސ٬΁ͷฦࣄ͸
    ͱʹ͔͘ૣ͘ ܖ໿ॻΛͭ͘Δ
    ޱ໿ଋ͸ةݥ
16. ࣦഊͨ͠ྫʢผҊ݅ʣ wεϚϗΞϓϦʢ'MVUUFSʣͷ࡞੒
    w஌Γ߹͍͔Βͷґཔɻܖ໿ॻ͸࡞੒͠ͳ͔ͬͨ
    w͓ۚͰ͸ͳͦ͘ͷਓ͕ఏڙ͍ͯ͠ΔαʔϏεΛແྉͰར༻Ͱ͖Δɻ 
 ͱ͍͏ަ׵৚݅ ୲౰ൣғ͸ϓϩτ λΠϓʢ.71ʣΛ ࡞Δͱ͜Ζ·Ͱ ൃ஫ऀ͕.71Λ ࢖ͬͯϢʔβʔݕ ূΛ͢Δ Ϣʔβʔݕূͷ݁ Ռɺ։ൃΛܧଓ͢ Δ৔߹͸ผܖ໿ ຊ൪ϦϦʔεՄೳͳ ঢ়ଶ·Ͱ࢓্͛ͯ ΋Β͏ ࣗ෼ͷೝࣝ ૬खͷೝࣝ
17. ܖ໿ॻαϯϓϧ
18. ੥ٻॻͱೖۚ 1BZ1BMͷϏδωεΞΧ΢ϯτΛ࡞੒ ຖ݄ɺ੥ٻॻΛ࡞੒ɾૹ෇ ೖۚΛ֬ೝ -*/&Ͱ΋
    ࿈བྷ͢Δ ͍ͭͰʹ௥Ճ ཁ๬ΛώΞϦ ϯά ੥ٻɾೖۚ͸ސ٬ͱͷίϛϡχέʔγϣϯ
19. ·ͱΊ ٕज़͸େࣄ
    ސ٬ͱͷର࿩͸
    ΋ͬͱେࣄ ୭ʹ΋པΕͳ͍
    ࣗ෼Ͱ
    ίϯτϩʔϧ
    ՄೳͳൣғͰ΍Δ ޱ໿ଋͰ͸ͳ͘
    ܖ໿ॻΛͭ͘Ζ͏ ఏڙͨ͠
    αʔϏεͷରՁ͸
    ͓ۚͰ΋Β͏ ݸਓ։ൃ͸ٕज़͚ͩͰͳ͘Ϗδωεͷֶͼ͕ଟ͍
    ػձ͕͋Ε͹ͥͻ௅ઓͯ͠ΈΑ͏
20. ϑΣχοΫεϓϩδΣΫτ
    %FW0QTγϛϡϨʔγϣϯݚम IUUQTXXXJUQSFOFVSTDPKQFWFOUUQQUPVS גࣜձࣾ*5ϓϨφʔζδϟύϯɾΞδΞύγϑΟοΫ %9ਪਐʹ͓͚ΔΧΪͱͳΔʮ%FW0QTʯΛ ήʔϛϑΟέʔγϣϯͰମײͰ͖Δɺγϛϡ ϨʔγϣϯܕݚमʮϑΣχοΫεϓϩδΣΫ τ
    %FW0QTγϛϡϨʔγϣϯݚमʯ 
 
 डߨऀ͸༷ʑͳ໰୊Λ๊͑ͨՍۭͷاۀͷҰ һͱͳΓɺଓʑͱൃੜ͢Δ໰୊ʹରॲ͠ͳ͕ Βۀ຿Λ਱ߦ͠ɺͲͷΑ͏ʹ%FW0QTΛ࣮຿ ؀ڥʹద༻͢Δ͔Λ࣮ફతʹֶ΂·͢ɻ ԭೄͰ΋։࠵͍ͨ͠ʂ
21. εΫϥϜϑΣεΛԭೄͰ։࠵͠Α͏ʂ ݄
    ઋ୆ ݄
    େࡕ ݄
    ࡳຈ ݄
    ৽ׁ ݄
    ෱Ԭ ݄
    ࡾՏ ݄
    ౦ژ ݄ʙ೔
    ԭೄ
    4QSJOU
22. ΞδϟΠϧମݧϫʔΫγϣοϓ ࠙਌ձʢҿ৯ແྉʣ ΞϯΧϯϑΝϨϯε
23. ෩ͷ࣌୅ɺ͋Γͷ··ʹɻࣗ෼ͷਓੜΛָ͠Έ·͠ΐ͏
    ୭͔ͷͨΊͰͳ͘ɺࣗ෼ͷͨΊʹ ࠓ೔͓ձ͍ͨ͠օ༷͕਎΋৺΋݈߁Ͱաͤ͝·͢Α͏ʹ  4BU
    :PH"HJMF
    &OHJOFFS
    ؠଜɹୖ