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ΞϓϦΛ঎༻ఏڙͯ͠೥൒ɺ
    ӡ༻Λଓ͚ͯΘ͔ͬͨ͜ͱ

    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