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

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

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