2022/11/19(Sat) FRONTEND CONFERENCE OKINAWA 2022 React/TypeScript/Firebaseで個人開発したWebアプリを商用提供して1年半、運用を続けてわかったこと
ϑϩϯτΤϯυΧϯϑΝϨϯεԭೄ 4BU:PH"HJMF&OHJOFFSؠଜɹୖ3FBDU5ZQF4DSJQU'JSFCBTFͰݸਓ։ൃͨ͠8FCΞϓϦΛ༻ఏڙͯ͠ɺӡ༻Λଓ͚ͯΘ͔ͬͨ͜ͱ
View Slide
ԭೄࡏॅϑϦʔϥϯεΤϯδχΞؠଜɹୖ͍ΘΉʔˏϤΨ͍͍ͧ!UBLVTBNBSࣗݾհ݄ʙɹ௨৴ࣄۀऀͷΞδϟΠϧ։ൃνʔϜ ݄ʙɹɹΞδϟΠϧݚमͷߨࢣɹ
BOZDPNNVָ͍͠;Γ͔͑ΓΞϓϦIUUQTBOZDPNNVXFCBQQʢʣຊ൪ϦϦʔεʂ
ϤΨΠϯετϥΫλʔ
༁ऩೖۀҕୗߨࢣۀݸਓ։ൃϤΨ࣌ؒۀҕୗߨࢣۀݸਓ։ൃϤΨ
ຊͷ͓ࠓɺ3FBDU5ZQF4DSJQU'JSFCBTFͰݸਓ։ൃͨ͠8FCΞϓϦΛ༻ఏڙͯ͠ɺӡ༻Λଓ͚ͯΘ͔ͬͨ͜ͱʹ͍ͭͯ͠·͢ɻ
ɾੜెͷใΛ&YDFMͰཧ͍ͯ͠Δɻ ɹ৽نͷੜెʹΞϯέʔτʢࢴʣΛॻ͍ͯΒ͍ɺ&YDFMʹసه͍ͯ͠Δ ɹग़੮ঢ়گͷνΣοΫɺલճͲΜͳϨοεϯΛड͚͔ͨɺͳͲѲͰ͖͍ͯͳ͍ɾಇ͍͍ͯΔߨࢣͷڅ༩ܭࢉ͕େม ɹड͚࣋ͬͨϨοεϯͱࢀՃͨ͠ੜెʢελδΦɺΦϯϥΠϯʣʹΑΔา߹੍ ɹϨοεϯޙʹ&YDFMʹೖྗͯ͠Β͍ɺϚΫϩͰܭࢉ͍ͯ͠Δ͕ਖ਼ͭΒ͍ɾ&YDFM0OF%SJWFʹอଘ͍ͯ͠Δ͕ɺ0OF%SJWFͷ༰ྔ͕ෆ͕ͪ͠ɻϤΨελδΦ๊͕͍͑ͯͨΈސ٬ใཧγεςϜΛͭ͘Γ·͠ΐ͏ʂ
ԿͰͭ͘Δ͔ʁLJOUPOF(PPHMF"QQ4DSJQU3FBDU'JSFCBTFඅ༻ ˚ ˓ ˓ϢʔβʔࣗͷΧελϚΠζੑ˚ ˚ ºࣗͷεΩϧ ˚ ˚ ˓
ը໘Πϝʔδ
ը໘ͱσʔλϕʔεͷؔߨࢣߨ࠲ސ٬ϨοεϯࢀՃ////σʔλը໘ߨ࠲Ұཡ ߨ࠲ৄࡉߨࢣҰཡߨࢣৄࡉސ٬Ұཡސ٬ৄࡉϨοεϯҰཡϨοεϯৄࡉ
ݴޠڥReactTypeScriptMaterial UI(MUIʣStorybookGitHubTrelloFigmaVisual Studio Code
ཧతͳڥErgohuman ¥99,80043 inch monitorɹ¥39,322HHKB ProfessionalType-Sɹ¥33,200Mac mini ¥124,080໊ޚଟग़ԣխ Miyabiɹ¥xxx,xxx
։ൃͷྲྀΕgit pullᶃyarn start ᶄyarn storybookιʔείʔυमਖ਼testΛॻ͍࣮ͯߦStorybookͰUI֬ೝgit commitgit pushᶅ ProductionStagingDevelopmentᶆfirebase deploy -P devᶇfirebase deploy -P stgᶈfirebase deploy -P prdExport&Importຊ൪σʔλςετ༻σʔλ
εέδϡʔϧळࠒɹɹɹɹɹ՝ώΞϦϯάͷʙ࢝ɹౙٳΈͷ̎िؒͰϓϩτλΠϓΛ։ൃ݄ʙ݄ɹɹЌ൛ϦϦʔεɺ͓ࢼ͠ར༻݄ʙɹɹɹɹਖ਼ࣜϦϦʔεʢ༗ঈʹͯαʔϏεఏڙʣ݄ɹސ٬ࢯ໊ɾॅॴͷ$47ΤΫεϙʔτػೳ݄ɹϨοεϯهΛ݄ผʹҰཡදࣔʢߴԽɺෛՙݮʣɹ݄ɹ'JSFCBTF4%,WରԠ݄ɹ6*σβΠϯมߋʢϊʔτ1$ͷը໘αΠζʹ߹ΘͤΔʣ݄ɹ.BUFSJBM6*ʢ.6*ʣWରԠ݄ɹ3FBDU3PVUFSWରԠ݄'JSFCBTF4%,W݄.6*W݄3FBDU3PVUFSW
Θ͔ͬͨ͜ͱ͕ࣗಘҙͳٕज़ΛબͿ࠷৽ٕज़ΑΓރΕٕͨज़ա࣭ཁΒͳ͍ӡ༻ίετΛॏࢹ͢Δސ٬ͷฦࣄͱʹ͔͘ૣ͘ܖॻΛͭ͘Δޱଋةݥ
ࣦഊͨ͠ྫʢผҊ݅ʣwεϚϗΞϓϦʢ'MVUUFSʣͷ࡞wΓ߹͍͔Βͷґཔɻܖॻ࡞͠ͳ͔ͬͨw͓ۚͰͳͦ͘ͷਓ͕ఏڙ͍ͯ͠ΔαʔϏεΛແྉͰར༻Ͱ͖Δɻ ͱ͍͏ަ݅୲ൣғϓϩτλΠϓʢ.71ʣΛ࡞Δͱ͜Ζ·Ͱൃऀ͕.71ΛͬͯϢʔβʔݕূΛ͢ΔϢʔβʔݕূͷ݁Ռɺ։ൃΛܧଓ͢Δ߹ผܖຊ൪ϦϦʔεՄೳͳঢ়ଶ·Ͱ্͛ͯΒ͏ࣗͷೝࣝ ૬खͷೝࣝ
ܖॻαϯϓϧ
ٻॻͱೖۚ1BZ1BMͷϏδωεΞΧϯτΛ࡞ ຖ݄ɺٻॻΛ࡞ɾૹ ೖۚΛ֬ೝ-*/&Ͱ࿈བྷ͢Δ͍ͭͰʹՃཁΛώΞϦϯάٻɾೖۚސ٬ͱͷίϛϡχέʔγϣϯ
·ͱΊٕज़େࣄސ٬ͱͷରͬͱେࣄ୭ʹཔΕͳ͍ࣗͰίϯτϩʔϧՄೳͳൣғͰΔޱଋͰͳ͘ܖॻΛͭ͘Ζ͏ఏڙͨ͠αʔϏεͷରՁ͓ۚͰΒ͏ݸਓ։ൃٕज़͚ͩͰͳ͘Ϗδωεͷֶͼ͕ଟ͍ػձ͕͋Εͥͻઓͯ͠ΈΑ͏
ϑΣχοΫεϓϩδΣΫτ%FW0QTγϛϡϨʔγϣϯݚमIUUQTXXXJUQSFOFVSTDPKQFWFOUUQQUPVSגࣜձࣾ*5ϓϨφʔζδϟύϯɾΞδΞύγϑΟοΫ%9ਪਐʹ͓͚ΔΧΪͱͳΔʮ%FW0QTʯΛήʔϛϑΟέʔγϣϯͰମײͰ͖ΔɺγϛϡϨʔγϣϯܕݚमʮϑΣχοΫεϓϩδΣΫτ%FW0QTγϛϡϨʔγϣϯݚमʯ डߨऀ༷ʑͳΛ๊͑ͨՍۭͷاۀͷҰһͱͳΓɺଓʑͱൃੜ͢Δʹରॲ͠ͳ͕ΒۀΛߦ͠ɺͲͷΑ͏ʹ%FW0QTΛ࣮ڥʹద༻͢Δ͔Λ࣮ફతʹֶ·͢ɻԭೄͰ։࠵͍ͨ͠ʂ
εΫϥϜϑΣεΛԭೄͰ։࠵͠Α͏ʂ݄ઋ݄େࡕ݄ࡳຈ݄৽ׁ݄Ԭ݄ࡾՏ݄౦ژ݄ʙԭೄ4QSJOU
ΞδϟΠϧମݧϫʔΫγϣοϓ࠙ձʢҿ৯ແྉʣΞϯΧϯϑΝϨϯε
෩ͷ࣌ɺ͋Γͷ··ʹɻࣗͷਓੜΛָ͠Έ·͠ΐ͏୭͔ͷͨΊͰͳ͘ɺࣗͷͨΊʹࠓ͓ձ͍ͨ͠օ༷͕৺݈߁Ͱաͤ͝·͢Α͏ʹ 4BU:PH"HJMF&OHJOFFSؠଜɹୖ