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

フロントエンドリアーキテクトの話

 フロントエンドリアーキテクトの話

ZOZO Tech Meetup で話したフロントエンドリアーキテクトの話です。

Yosuke Furukawa
PRO

June 08, 2023
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

  1. ϑϩϯτΤϯυϦΞʔ
    ΩςΫτ 2023
    6/8 @ zozo event

    View Slide

  2. Twitter: @yosuke_furukawa


    Github: yosuke-furukawa

    View Slide

  3. ஫ҙࣄ߲
    • ͜ͷεϥΠυ͸ ZOZO ʹ͓͚ΔϦΞʔΩςΫ
    τͷ࿩Ͱ͸͋Γ·ͤΜɻ


    • ॴଐ૊৫ͱ΋ແؔ܎Ͱ͢ɻ


    • େ෯ʹ΅্͔ͨ͠ͰҰൠతͳ࿩ͱͯ͠ޠͬͯ
    ͍·͢ɻ

    View Slide

  4. ϑϩϯτΤϯυϦΞʔΩςΫτ
    2023
    • ٕज़ސ໰Λ਺͍ࣾͯ͠·͢


    • ٕज़ސ໰ͷதͰҰ൪FAQͳͷ͕


    • ʮxxxͰ࡞ͬͨ΋ͷΛϦΞʔΩςΫτ͍ͨ͠ͷͰ͕͢ʯͱ͍͏
    ໰͍߹ΘͤͰ͢


    • ࠓճ͸ͦ΋ͦ΋ϦΞʔΩςΫτͱ͸Ͳ͏͍͏΋ͷͳͷ͔


    • ϦΞʔΩςΫτ͕͏·͍͘͘ͷͱ͏·͍͔͘ͳ͍ͷ͸Կ͕ҧ
    ͏ͷ͔ʹ͍ͭͯ࿩͠·͢

    View Slide

  5. ϦΞʔΩςΫτͱ͸

    View Slide

  6. ϦΞʔΩςΫτͱ͸
    • Chapter 5: Re-Architecting
    ϦϑΝΫλϦϯάͷҰछͰ͋Δɻ
    ϝιου΍Ϋϥεͱ͍ͬͨ୯ҐͰ͸ͳ
    ͘ɺϞδϡʔϧ΍ίϯϙʔωϯτͱ͍ͬ
    ͨ୯ҐͰઃܭͷݟ௚͠Λߦ͏͜ͱ

    View Slide

  7. ϦΞʔΩςΫτͱ͸
    • ϦϑΝΫλϦϯάɿίʔυ୯ҐͰͷ࠶࣮૷


    • ϦΞʔΩςΫτɿઃܭ୯ҐͰͷ࠶ߏஙɺϞ
    δϡʔϧΛ෼ׂͯ͠Ұ෦Λॻ͖׵͑Δ


    • ϏοάϦϥΠτɿॻ͖௚͠ɺθϩϕʔεͰͷ
    ࠶ߏங

    View Slide

  8. ͦ΋ͦ΋ͳΜͰ


    ϦΞʔΩςΫτ͕ඞཁͳͷ͔

    View Slide

  9. ͦ΋ͦ΋ͳΜͰϦΞʔΩςΫτ
    ͕ඞཁͳͷ͔
    • ͜͜ʹ̎ͭͷ໨త͕͋Δ


    • ιϑτ΢ΣΞ࣮རతͳ࿩ʢ୹ظతͳϝϦο
    τʣ


    • ૊৫ͷٕज़ܧঝͷ࿩ʢத௕ظతͳϝϦοτʣ

    View Slide

  10. ιϑτ΢ΣΞ࣮རతͳ࿩
    • ϞδϡʔϧΛ෼ׂ͢Δ͜ͱͰಠཱੑΛߴΊɺґଘΛݮΒ͢


    • ΠϯλϑΣʔεͱ࣮૷Λ෼཭͢Δ͜ͱͰؔ৺Λ෼཭Ͱ͖Δ
    ʢόοΫΤϯυͱϑϩϯτΤϯυͰΠϯλϑΣʔε͚ͩఆٛ
    ͢Ε͹͓ޓ͍ͷ࣮૷͸ؔ৺ͷ֎ʹͳΔʣ


    • ͻ͍ͯ͸શମతʹϝϯςφϯείετ͕Լ͕Δํ޲ʹಇ͘


    • Ұํɺܾ·Γࣄ΋૿͑Δ͠ɺ੍໿͕શ͘ͳ͍༁Ͱ͸ແ͍ʢΠ
    ϯλϑΣʔεͷมߋʹ͸௧Έ͕൐͏ɺίʔυΛ࠶ઃܭ͢Δ͜
    ͱͰͷҭ੒ίετ΋ൃੜ͢Δʣ

    View Slide

  11. ૊৫ͷٕज़ܧঝͷ࿩
    • ఆظతʹϦΞʔΩςΫτɾϦϑΝΫλϦϯά
    Λߦ͏͜ͱ͕ίʔυͷϒϥοΫϘοΫεԽΛ
    ๷͙͜ͱʹͳΔ


    • ͻ͍ͯ͸ٕज़ͷ఻ঝʹͭͳ͕Δ

    View Slide

  12. ૊৫ͷٕज़ܧঝͷ࿩
    • ίʔυͷΦʔφʔγοϓ͕ॏཁ


    • ࣗ෼ͷίʔυͰ͋Δɺࣗ෼ͷ͜ͱͰ͋Δͱ͍͏
    ҙࣝ


    • ʮ࡞Δ͚ͩ࡞ͬͯޙ͸ଞਓʹ೚ͤΔʯͱ͍͏Ϛ
    ΠϯυͰ͸ൃల͠ͳ͍


    • ࣗ෼ͷ΋ͷͩͱ͍͏ҙࣝΛ࣋ͭ

    View Slide

  13. ૊৫ͷٕज़ܧঝͷ࿩
    • ࣜ೥ભٶͱ͍͏ߟ͑ํ


    • ࣜ೥ʢఆظతʹʣભٶʢ৽఼͍ࣾ͠Λ଄ΓɺޚਆମΛભ͢ʣ


    • ۩ମతʹ͸20೥ʹҰ౓ඞͣߦ͏ɻભٶʹΑΔࣄۀඅ͸2013೥Ͱ໿550ԯԁ


    • ࣜ೥ભٶࣗମ͸ਖ਼ٶͷҠಈʢϝΠϯϞδϡʔϧͷҠ͠ସ͑ʣ͕ऴΘͬͨ
    ޙɺผٶͷҠಈʢαϒϞδϡʔϧͷೖΕସ͑ʣ͕͋Δɻ


    • ͜ͷؒɺ2೥ؒ͸໿160໊ͷٕೳऀͷޏ༻͕ଓ͘ɻผٶͷભٶऴྃޙɺएख
    ΍ٕೳ༏लऀ30໊΄ͲΛਆٶͷৗۈ৬һͱͯ͠࢒͢ɻ


    • ࠃ౔ަ௨লͷίϥϜʮࣜ೥ભٶʹݟΔٕज़ܧঝͱٕज़ऀ֬อ https://www.mlit.go.jp/hakusyo/mlit/h25/hakusho/h26/html/
    n1233c20.htmlʯΑΓ

    View Slide

  14. ૊৫ͷٕज़ܧঝͷ࿩
    • ࣜ೥ભٶͰ͸ఆظతʹϦΞʔΩςΫτΛߦ͏͜ͱͰɺ
    ٕज़ऀͷҭ੒ͱΦʔφʔγοϓͷ֬อΛߦ͍ͬͯΔ


    • γεςϜͷϦΞʔΩςΫτ΋͕͜͜ૂ͍Ͱ͋Δࣄ͕ଟ
    ͍


    • ୯७ʹ୹ظతͳ඼࣭վળ͕໨త͚ͩͩͱ͢Δͱ୹ظͷ
    අ༻ରޮՌͷ࿩͚ͩʹͳͬͯ͠·͏͕ɺ͜͜ΛΘ͔ͬ
    ͯ͘Ε͍ͯΔਓ͕ݱ৔Λޙԡͯ͘͠͠ΕΔͱॿ͔Δ

    View Slide

  15. ϑϩϯτΤϯυ

    ϦΞʔΩςΫτ

    View Slide

  16. ϑϩϯτΤϯυϦΞʔΩςΫτ
    • όοΫΤϯυͱϑϩϯτΤϯυΛ੾Γ෼͚Δ
    ͱ͜Ζ͔Βελʔτ


    • ͜Ε͸ϨΨγʔιϑτ΢ΣΞվળΨΠυʹ΋
    ࡌͬͯΔํ๏


    • ͦͷޙ͸Ͳ͏͢Δͱྑ͍ͷ͔

    View Slide

  17. ϑϩϯτΤϯυϦΞʔΩςΫτ
    • Α͋͘Δύλʔϯ


    • ಛఆͷը໘͚ܾͩΊ͔ͯͦ͜ΒऔΓ૊ΉʢZOZO͕͜ͷύ
    λʔϯɺτοϓϖʔδ͔Βมߋ͢Δʣ


    • ΋ͬͱίϯϙʔωϯτΛ෼ׂͯ͠ڞ௨ͷίϯϙʔωϯτʹ੾
    Γग़͢ͱ͜Ζ͔Β࢝ΊΔʢύʔπΛ·ͣ࠷ॳʹ࡞ͬͯ͠·
    ͍ɺ͔ͦ͜Β૊Έ্͍͛ͯ͘ʣ


    • Ұؾʹϒϧυʔβʔ࡞ઓʢΧοͱͳͬͯશ෦ Next.js ͰϦϥΠ
    τ͠·ͨ͠Έ͍ͨͳʣ

    View Slide

  18. ಛఆͷը໘΍ίϯϙʔωϯτ͚ܾͩ
    Ί͔ͯͦ͜Βখ࢝͘͞ΊΔύλʔϯ
    • ࣮͸Ұ൪ଟ͍͔΋


    • ଟ͘ͷػೳ͕͋ͬͯɺશ෦Λஔ͖׵͑Δͷ͕೉͠
    ͘ɺঃʑʹஔ͖׵͑Δ͔͠ํ๏͕ͳ͍࣌ʹ΍Δύ
    λʔϯ


    • ͍͖ͳΓϏοάϦϥΠτ͠Α͏ͱ͢Δͱࣦഊ͕͠
    ͪͳͷͰɺطଘͷػೳ௥ՃΛ͠ͳ͕Β৽نϦΞʔ
    ΩςΫτΛซ༻͢Δ࣌ʹߦ͏

    View Slide

  19. ΋ͬͱίϯϙʔωϯτΛ෼ׂͯ͠ɺڞ௨
    ύʔπΛ࡞Δͱ͜Ζ͔Β࢝Ίͯޙ͔Βঃʑ
    ʹڞ௨ύʔπʹدͤͯྑ͍ͯ͘͘͠
    • ϘτϜΞοϓʹڞ௨ͷίϯϙʔωϯτ͔Β࣮ࢪ͢ΔΞ
    ϓϩʔν


    • ϨΠϠΛػೳ࣠Ͱ෼ׂ࣮ͯ͠ࢪ͢Δͷ͕̍ͭ໨ͷύλʔ
    ϯͩͱ͢Δͱɺ෦඼ͷಛੑͰ෼ׂ࣮ͯ͠ࢪ͢Δํ๏


    • ౷Ұ͞Εͨίϯϙʔωϯτ͕ͪΌΜͱΑ͘Ͱ͖ͨ΋ͷ
    Ͱ͋Ε͹੔߹ੑ΋੔͑ΒΕΔ͠ɺ͏·͍͚͘͹ύʔπ
    ͷ࠶ར༻ੑ͕ߴ·Γੜ࢈ੑ΋্͕Δ

    View Slide

  20. ΋ͬͱίϯϙʔωϯτΛ෼ׂͯ͠ɺڞ௨
    ύʔπΛ࡞Δͱ͜Ζ͔Β࢝Ίͯޙ͔Βঃʑ
    ʹڞ௨ύʔπʹدͤͯྑ͍ͯ͘͘͠
    • ҰํͰڞ௨ίϯϙʔωϯτ͸ઃܭ͕೉͍͠ɻ


    • ޙ൒ʹ৮ΕΔ͕ɺϏοάϦϥΠτʹͳΓ͕ͪ


    • ͜ͷํ๏Ͱ͏·͍͘͘ύλʔϯ͸͋·Γݟͨ͜
    ͱ͕ͳ͍


    • ෼ׂͷ࢓ํ͕ஞ࣍తʹͳΒͣɺൈຊతͳ෼ׂʹ
    ͳΔࣄ͕͋Δ

    View Slide

  21. Ұؾʹϒϧυʔβʔ࡞ઓ
    • Χοͱͳͬͯશ෦΍ͬͱ͖·ͨ͠


    • Զʹ1ि͍ؒͩ͘͞ɻຊ෺ͷϦΞʔΩςΫτΛ
    ͓ݟͤ͠·͢Αύλʔϯ


    • ୹ظతʹऴΘΔ͠ɺ಺෦඼࣭͕ؾʹͳΔ͕ɺ
    ϨϏϡʔ͕Ͱ͖ΔͳΒ࠷ߴ

    View Slide

  22. Ұؾʹϒϧυʔβʔ࡞ઓ
    • ͦΜͳʹ؁͘ͳ͍


    • ݸਓͷྗྔʹґଘͯ͠͠·͏


    • ͦ΋ͦ΋ٕज़ͷܧঝΛ͍ͨ͠ͷʹɺ݁ہগ਺ͷ
    ਓʹ͔͠ܧঝ͞Εͳ͍


    • ͨͩ୹ظతʹऴΘΒͤΔ͜ͱ͕Ͱ͖ͯɺ࿩͕Ұ
    ؾʹਐΉ

    View Slide

  23. ݁ہϦΞʔΩςΫτͷϑϩϯτ
    ΤϯυͰ΍Δํ๏ͬͯ
    • ಛఆͷը໘ɾػೳɾίϯϙʔωϯτΛܾΊͯϦΞʔ
    ΩςΫτͯ͠ɺஞ࣍తʹม͍͑ͯ͘ํ๏͔͋͠·
    ΓϫʔΫͨ͠ͷΛݟͳ͍


    • ϏοάϦϥΠτʹͳΒͳ͍Α͏ʹ͠ͳ͍ͱ͍͚ͳ
    ͍


    • ݸਓͷྗྔͰୡ੒Ͱ͖Ε͹ྑ͍͕ɺ౎߹Αͦ͘͏
    ͍͏ύϫʔͷ͋Δਓ͕͍ͳ͍͜ͱ΋ଟ͍

    View Slide

  24. ϦΞʔΩςΫτ


    Ξϯνύλʔϯू

    View Slide

  25. ϦΞʔΩςΫτΞϯνύλʔϯ

    • पลͷٕज़͹͔ͬΓ΍ͬͪΌ͏ύλʔϯ


    • eslint, prettier, pnpm, yarn, vite, vitest, ͜͏͍͏πʔ
    ϧΛͲ͏͢Δ͔͹͔Γ೰ΜͰલʹਐΜͰͳ͍ύλʔϯ


    • ඪ४ͷղ๏Έ͍ͨͳͷΛ௥͍ٻΊ͗ͯ͢Δ


    • ਖ਼ղͳΜͯແ͍ɺ೰·ͣʹਐΊͨΒͦΕ͕ਖ਼ղ


    • ޙ͔ΒͳΜͱͰ΋ͳͬͨΓ͢Δ

    View Slide

  26. ϦΞʔΩςΫτΞϯνύλʔϯ

    • ·ͩݟ͵ແݶͷকདྷʹࢥ͍Λ஘ͤͯ͠·͏ύλʔϯ


    • ͜Μͳ͜ͱ͍͍ͳ


    • Ͱ͖ͨΒ͍͍ͳ


    • ͋Μͳػೳ͜Μͳίϯϙʔωϯτ͍ͬͺ͍͋Δ͚Ͳ


    • ਐ·ͳ͍ʂʂʂ


    • શ෦Λ·Δͬͱ࠷ॳ͔ΒΑ͘͢Δ͜ͱ͸Ͱ͖ͳ͍


    • ͪΐͬͱͣͭͪΐͬͱͣͭܧଓతʹΑ͘͢Δ͜ͱ͔͠Ͱ͖ͳ͍

    View Slide

  27. ϦΞʔΩςΫτΞϯνύλʔϯ

    • طଘػೳͷΤϯϋϯεΛετοϓͤͯ͞ϦΞʔΩςΫτ༏ઌͪ͠Ό͏ύλʔ
    ϯ


    • γϯϓϧʹαʔϏεͷػೳ௥Ճ͕ࢭ·Δ


    • جຊ͸ࣹܸͭͭ͠લਐ


    • ελʔτΞοϓͱ͔ͩͱ྆ํ΍Βͳ͍ͱ͍͚ͳ͍ͷ͕ਏ͍ͱ͜Ζ


    • ܦӦ൑அͰϦΞʔΩςΫτ༏ઌ͢ΔͳΒྑ͍͕ɺΤϯϋϯε͠ͳ͕Β΍
    Δͷ͕Ұൠత


    • ػೳ΍ը໘͕෼ׂ͞ΕͯͨΒ͚ͩ͜͜ػೳ௥Ճ͠ͳ͍Ͱ΄͍͠ͱ͍͏
    ͷ͸ݴ͍΍͍͢

    View Slide

  28. ·ͱΊ

    View Slide

  29. ·ͱΊ
    • ϦΞʔΩςΫτͱ͸࠶ઃܭͷ͜ͱ


    • ϦΞʔΩςΫτΛ΍Δҙຯ͸඼࣭޲্ɺੜ࢈ੑվળ͚ͩͰ͸ͳ͍


    • ٕज़ͷܧঝͱίʔυͷΦʔφʔγοϓΛ࣋ͭ͜ͱʢࣜ೥ભٶʣ


    • ϦΞʔΩςΫτΛ΍Δࡍ͸είʔϓΛௐ੔͢Δ͜ͱ


    • ΋ͪΖΜҰؾʹͰ͖ΔͳΒͦΕͰ΋ྑ͍͕ɺݸਓʹґଘ͢ΔͷͰؾ
    Λ͚ͭΔ͜ͱ


    • Ξϯνύλʔϯ΋͍͔ͭ͋͘Δɺࣗ෼ͨͪʹ౰ͯ͸·ͬͯͳ͍͔Λ֬
    ೝ͍ͨ͠

    View Slide