Upgrade to Pro — share decks privately, control downloads, hide ads and more …

20221119_FrontendConfOkinawa_iwamu

takusamar
November 19, 2022

 20221119_FrontendConfOkinawa_iwamu

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

takusamar

November 19, 2022
Tweet

More Decks by takusamar

Other Decks in Programming

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 "QQ4DSJQU 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ΤΫεϙʔτػೳ ೥݄ɹϨοεϯه࿥Λ݄ผʹҰཡදࣔʢߴ଎Խɺෛՙ௿ݮʣɹ ೥݄ɹ'JSFCBTF4%,WରԠ ೥݄ɹ6*σβΠϯมߋʢϊʔτ1$ͷը໘αΠζʹ߹ΘͤΔʣ ೥݄ɹ.BUFSJBM6*ʢ.6*ʣWରԠ

    ೥݄ɹ3FBDU3PVUFSWରԠ ೥݄ 'JSFCBTF4%,W ೥݄ .6*W ೥݄ 3FBDU3PVUFSW
  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 ؠଜɹୖ