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

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

Transcript

1. ϑϩϯτΤϯυϦΞʔ ΩςΫτ 2023 6/8 @ zozo event
2. Twitter: @yosuke_furukawa Github: yosuke-furukawa
3. ஫ҙࣄ߲ • ͜ͷεϥΠυ͸ ZOZO ʹ͓͚ΔϦΞʔΩςΫ τͷ࿩Ͱ͸͋Γ·ͤΜɻ • ॴଐ૊৫ͱ΋ແؔ܎Ͱ͢ɻ • େ෯ʹ΅্͔ͨ͠ͰҰൠతͳ࿩ͱͯ͠ޠͬͯ ͍·͢ɻ
4. ϑϩϯτΤϯυϦΞʔΩςΫτ 2023 • ٕज़ސ໰Λ਺͍ࣾͯ͠·͢ • ٕज़ސ໰ͷதͰҰ൪FAQͳͷ͕ • ʮxxxͰ࡞ͬͨ΋ͷΛϦΞʔΩςΫτ͍ͨ͠ͷͰ͕͢ʯͱ͍͏ ໰͍߹ΘͤͰ͢ • ࠓճ͸ͦ΋ͦ΋ϦΞʔΩςΫτͱ͸Ͳ͏͍͏΋ͷͳͷ͔ • ϦΞʔΩςΫτ͕͏·͍͘͘ͷͱ͏·͍͔͘ͳ͍ͷ͸Կ͕ҧ ͏ͷ͔ʹ͍ͭͯ࿩͠·͢
5. ϦΞʔΩςΫτͱ͸
6. ϦΞʔΩςΫτͱ͸ • Chapter 5: Re-Architecting ϦϑΝΫλϦϯάͷҰछͰ͋Δɻ
   ϝιου΍Ϋϥεͱ͍ͬͨ୯ҐͰ͸ͳ ͘ɺϞδϡʔϧ΍ίϯϙʔωϯτͱ͍ͬ ͨ୯ҐͰઃܭͷݟ௚͠Λߦ͏͜ͱ
7. ϦΞʔΩςΫτͱ͸ • ϦϑΝΫλϦϯάɿίʔυ୯ҐͰͷ࠶࣮૷ • ϦΞʔΩςΫτɿઃܭ୯ҐͰͷ࠶ߏஙɺϞ δϡʔϧΛ෼ׂͯ͠Ұ෦Λॻ͖׵͑Δ • ϏοάϦϥΠτɿॻ͖௚͠ɺθϩϕʔεͰͷ ࠶ߏங
8. ͦ΋ͦ΋ͳΜͰ ϦΞʔΩςΫτ͕ඞཁͳͷ͔
9. ͦ΋ͦ΋ͳΜͰϦΞʔΩςΫτ ͕ඞཁͳͷ͔ • ͜͜ʹ̎ͭͷ໨త͕͋Δ • ιϑτ΢ΣΞ࣮རతͳ࿩ʢ୹ظతͳϝϦο τʣ • ૊৫ͷٕज़ܧঝͷ࿩ʢத௕ظతͳϝϦοτʣ
10. ιϑτ΢ΣΞ࣮རతͳ࿩ • ϞδϡʔϧΛ෼ׂ͢Δ͜ͱͰಠཱੑΛߴΊɺґଘΛݮΒ͢ • ΠϯλϑΣʔεͱ࣮૷Λ෼཭͢Δ͜ͱͰؔ৺Λ෼཭Ͱ͖Δ ʢόοΫΤϯυͱϑϩϯτΤϯυͰΠϯλϑΣʔε͚ͩఆٛ ͢Ε͹͓ޓ͍ͷ࣮૷͸ؔ৺ͷ֎ʹͳΔʣ • ͻ͍ͯ͸શମతʹϝϯςφϯείετ͕Լ͕Δํ޲ʹಇ͘ • Ұํɺܾ·Γࣄ΋૿͑Δ͠ɺ੍໿͕શ͘ͳ͍༁Ͱ͸ແ͍ʢΠ ϯλϑΣʔεͷมߋʹ͸௧Έ͕൐͏ɺίʔυΛ࠶ઃܭ͢Δ͜ ͱͰͷҭ੒ίετ΋ൃੜ͢Δʣ
11. ૊৫ͷٕज़ܧঝͷ࿩ • ఆظతʹϦΞʔΩςΫτɾϦϑΝΫλϦϯά Λߦ͏͜ͱ͕ίʔυͷϒϥοΫϘοΫεԽΛ ๷͙͜ͱʹͳΔ • ͻ͍ͯ͸ٕज़ͷ఻ঝʹͭͳ͕Δ
12. ૊৫ͷٕज़ܧঝͷ࿩ • ίʔυͷΦʔφʔγοϓ͕ॏཁ • ࣗ෼ͷίʔυͰ͋Δɺࣗ෼ͷ͜ͱͰ͋Δͱ͍͏ ҙࣝ • ʮ࡞Δ͚ͩ࡞ͬͯޙ͸ଞਓʹ೚ͤΔʯͱ͍͏Ϛ ΠϯυͰ͸ൃల͠ͳ͍ • ࣗ෼ͷ΋ͷͩͱ͍͏ҙࣝΛ࣋ͭ
13. ૊৫ͷٕज़ܧঝͷ࿩ • ࣜ೥ભٶͱ͍͏ߟ͑ํ • ࣜ೥ʢఆظతʹʣભٶʢ৽఼͍ࣾ͠Λ଄ΓɺޚਆମΛભ͢ʣ • ۩ମతʹ͸20೥ʹҰ౓ඞͣߦ͏ɻભٶʹΑΔࣄۀඅ͸2013೥Ͱ໿550ԯԁ • ࣜ೥ભٶࣗମ͸ਖ਼ٶͷҠಈʢϝΠϯϞδϡʔϧͷҠ͠ସ͑ʣ͕ऴΘͬͨ ޙɺผٶͷҠಈʢαϒϞδϡʔϧͷೖΕସ͑ʣ͕͋Δɻ • ͜ͷؒɺ2೥ؒ͸໿160໊ͷٕೳऀͷޏ༻͕ଓ͘ɻผٶͷભٶऴྃޙɺएख ΍ٕೳ༏लऀ30໊΄ͲΛਆٶͷৗۈ৬һͱͯ͠࢒͢ɻ • ࠃ౔ަ௨লͷίϥϜʮࣜ೥ભٶʹݟΔٕज़ܧঝͱٕज़ऀ֬อ https://www.mlit.go.jp/hakusyo/mlit/h25/hakusho/h26/html/ n1233c20.htmlʯΑΓ
14. ૊৫ͷٕज़ܧঝͷ࿩ • ࣜ೥ભٶͰ͸ఆظతʹϦΞʔΩςΫτΛߦ͏͜ͱͰɺ ٕज़ऀͷҭ੒ͱΦʔφʔγοϓͷ֬อΛߦ͍ͬͯΔ • γεςϜͷϦΞʔΩςΫτ΋͕͜͜ૂ͍Ͱ͋Δࣄ͕ଟ ͍ • ୯७ʹ୹ظతͳ඼࣭վળ͕໨త͚ͩͩͱ͢Δͱ୹ظͷ අ༻ରޮՌͷ࿩͚ͩʹͳͬͯ͠·͏͕ɺ͜͜ΛΘ͔ͬ ͯ͘Ε͍ͯΔਓ͕ݱ৔Λޙԡͯ͘͠͠ΕΔͱॿ͔Δ
15. ϑϩϯτΤϯυ 
 ϦΞʔΩςΫτ
16. ϑϩϯτΤϯυϦΞʔΩςΫτ • όοΫΤϯυͱϑϩϯτΤϯυΛ੾Γ෼͚Δ ͱ͜Ζ͔Βελʔτ • ͜Ε͸ϨΨγʔιϑτ΢ΣΞվળΨΠυʹ΋ ࡌͬͯΔํ๏ • ͦͷޙ͸Ͳ͏͢Δͱྑ͍ͷ͔
17. ϑϩϯτΤϯυϦΞʔΩςΫτ • Α͋͘Δύλʔϯ • ಛఆͷը໘͚ܾͩΊ͔ͯͦ͜ΒऔΓ૊ΉʢZOZO͕͜ͷύ λʔϯɺτοϓϖʔδ͔Βมߋ͢Δʣ • ΋ͬͱίϯϙʔωϯτΛ෼ׂͯ͠ڞ௨ͷίϯϙʔωϯτʹ੾ Γग़͢ͱ͜Ζ͔Β࢝ΊΔʢύʔπΛ·ͣ࠷ॳʹ࡞ͬͯ͠· ͍ɺ͔ͦ͜Β૊Έ্͍͛ͯ͘ʣ • Ұؾʹϒϧυʔβʔ࡞ઓʢΧοͱͳͬͯશ෦ Next.js ͰϦϥΠ τ͠·ͨ͠Έ͍ͨͳʣ
18. ಛఆͷը໘΍ίϯϙʔωϯτ͚ܾͩ Ί͔ͯͦ͜Βখ࢝͘͞ΊΔύλʔϯ • ࣮͸Ұ൪ଟ͍͔΋ • ଟ͘ͷػೳ͕͋ͬͯɺશ෦Λஔ͖׵͑Δͷ͕೉͠ ͘ɺঃʑʹஔ͖׵͑Δ͔͠ํ๏͕ͳ͍࣌ʹ΍Δύ λʔϯ • ͍͖ͳΓϏοάϦϥΠτ͠Α͏ͱ͢Δͱࣦഊ͕͠ ͪͳͷͰɺطଘͷػೳ௥ՃΛ͠ͳ͕Β৽نϦΞʔ ΩςΫτΛซ༻͢Δ࣌ʹߦ͏
19. ΋ͬͱίϯϙʔωϯτΛ෼ׂͯ͠ɺڞ௨ ύʔπΛ࡞Δͱ͜Ζ͔Β࢝Ίͯޙ͔Βঃʑ ʹڞ௨ύʔπʹدͤͯྑ͍ͯ͘͘͠ • ϘτϜΞοϓʹڞ௨ͷίϯϙʔωϯτ͔Β࣮ࢪ͢ΔΞ ϓϩʔν • ϨΠϠΛػೳ࣠Ͱ෼ׂ࣮ͯ͠ࢪ͢Δͷ͕̍ͭ໨ͷύλʔ ϯͩͱ͢Δͱɺ෦඼ͷಛੑͰ෼ׂ࣮ͯ͠ࢪ͢Δํ๏ • ౷Ұ͞Εͨίϯϙʔωϯτ͕ͪΌΜͱΑ͘Ͱ͖ͨ΋ͷ Ͱ͋Ε͹੔߹ੑ΋੔͑ΒΕΔ͠ɺ͏·͍͚͘͹ύʔπ ͷ࠶ར༻ੑ͕ߴ·Γੜ࢈ੑ΋্͕Δ
20. ΋ͬͱίϯϙʔωϯτΛ෼ׂͯ͠ɺڞ௨ ύʔπΛ࡞Δͱ͜Ζ͔Β࢝Ίͯޙ͔Βঃʑ ʹڞ௨ύʔπʹدͤͯྑ͍ͯ͘͘͠ • ҰํͰڞ௨ίϯϙʔωϯτ͸ઃܭ͕೉͍͠ɻ • ޙ൒ʹ৮ΕΔ͕ɺϏοάϦϥΠτʹͳΓ͕ͪ • ͜ͷํ๏Ͱ͏·͍͘͘ύλʔϯ͸͋·Γݟͨ͜ ͱ͕ͳ͍ • ෼ׂͷ࢓ํ͕ஞ࣍తʹͳΒͣɺൈຊతͳ෼ׂʹ ͳΔࣄ͕͋Δ
21. Ұؾʹϒϧυʔβʔ࡞ઓ • Χοͱͳͬͯશ෦΍ͬͱ͖·ͨ͠ • Զʹ1ि͍ؒͩ͘͞ɻຊ෺ͷϦΞʔΩςΫτΛ ͓ݟͤ͠·͢Αύλʔϯ • ୹ظతʹऴΘΔ͠ɺ಺෦඼࣭͕ؾʹͳΔ͕ɺ ϨϏϡʔ͕Ͱ͖ΔͳΒ࠷ߴ
22. Ұؾʹϒϧυʔβʔ࡞ઓ • ͦΜͳʹ؁͘ͳ͍ • ݸਓͷྗྔʹґଘͯ͠͠·͏ • ͦ΋ͦ΋ٕज़ͷܧঝΛ͍ͨ͠ͷʹɺ݁ہগ਺ͷ ਓʹ͔͠ܧঝ͞Εͳ͍ • ͨͩ୹ظతʹऴΘΒͤΔ͜ͱ͕Ͱ͖ͯɺ࿩͕Ұ ؾʹਐΉ
23. ݁ہϦΞʔΩςΫτͷϑϩϯτ ΤϯυͰ΍Δํ๏ͬͯ • ಛఆͷը໘ɾػೳɾίϯϙʔωϯτΛܾΊͯϦΞʔ ΩςΫτͯ͠ɺஞ࣍తʹม͍͑ͯ͘ํ๏͔͋͠· ΓϫʔΫͨ͠ͷΛݟͳ͍ • ϏοάϦϥΠτʹͳΒͳ͍Α͏ʹ͠ͳ͍ͱ͍͚ͳ ͍ • ݸਓͷྗྔͰୡ੒Ͱ͖Ε͹ྑ͍͕ɺ౎߹Αͦ͘͏ ͍͏ύϫʔͷ͋Δਓ͕͍ͳ͍͜ͱ΋ଟ͍
24. ϦΞʔΩςΫτ Ξϯνύλʔϯू
25. ϦΞʔΩςΫτΞϯνύλʔϯ ू • पลͷٕज़͹͔ͬΓ΍ͬͪΌ͏ύλʔϯ • eslint, prettier, pnpm, yarn, vite, vitest, ͜͏͍͏πʔ ϧΛͲ͏͢Δ͔͹͔Γ೰ΜͰલʹਐΜͰͳ͍ύλʔϯ • ඪ४ͷղ๏Έ͍ͨͳͷΛ௥͍ٻΊ͗ͯ͢Δ • ਖ਼ղͳΜͯແ͍ɺ೰·ͣʹਐΊͨΒͦΕ͕ਖ਼ղ • ޙ͔ΒͳΜͱͰ΋ͳͬͨΓ͢Δ
26. ϦΞʔΩςΫτΞϯνύλʔϯ ू • ·ͩݟ͵ແݶͷকདྷʹࢥ͍Λ஘ͤͯ͠·͏ύλʔϯ • ͜Μͳ͜ͱ͍͍ͳ • Ͱ͖ͨΒ͍͍ͳ • ͋Μͳػೳ͜Μͳίϯϙʔωϯτ͍ͬͺ͍͋Δ͚Ͳ • ਐ·ͳ͍ʂʂʂ • શ෦Λ·Δͬͱ࠷ॳ͔ΒΑ͘͢Δ͜ͱ͸Ͱ͖ͳ͍ • ͪΐͬͱͣͭͪΐͬͱͣͭܧଓతʹΑ͘͢Δ͜ͱ͔͠Ͱ͖ͳ͍
27. ϦΞʔΩςΫτΞϯνύλʔϯ ू • طଘػೳͷΤϯϋϯεΛετοϓͤͯ͞ϦΞʔΩςΫτ༏ઌͪ͠Ό͏ύλʔ ϯ • γϯϓϧʹαʔϏεͷػೳ௥Ճ͕ࢭ·Δ • جຊ͸ࣹܸͭͭ͠લਐ • ελʔτΞοϓͱ͔ͩͱ྆ํ΍Βͳ͍ͱ͍͚ͳ͍ͷ͕ਏ͍ͱ͜Ζ • ܦӦ൑அͰϦΞʔΩςΫτ༏ઌ͢ΔͳΒྑ͍͕ɺΤϯϋϯε͠ͳ͕Β΍ Δͷ͕Ұൠత • ػೳ΍ը໘͕෼ׂ͞ΕͯͨΒ͚ͩ͜͜ػೳ௥Ճ͠ͳ͍Ͱ΄͍͠ͱ͍͏ ͷ͸ݴ͍΍͍͢
28. ·ͱΊ
29. ·ͱΊ • ϦΞʔΩςΫτͱ͸࠶ઃܭͷ͜ͱ • ϦΞʔΩςΫτΛ΍Δҙຯ͸඼࣭޲্ɺੜ࢈ੑվળ͚ͩͰ͸ͳ͍ • ٕज़ͷܧঝͱίʔυͷΦʔφʔγοϓΛ࣋ͭ͜ͱʢࣜ೥ભٶʣ • ϦΞʔΩςΫτΛ΍Δࡍ͸είʔϓΛௐ੔͢Δ͜ͱ • ΋ͪΖΜҰؾʹͰ͖ΔͳΒͦΕͰ΋ྑ͍͕ɺݸਓʹґଘ͢ΔͷͰؾ Λ͚ͭΔ͜ͱ • Ξϯνύλʔϯ΋͍͔ͭ͋͘Δɺࣗ෼ͨͪʹ౰ͯ͸·ͬͯͳ͍͔Λ֬ ೝ͍ͨ͠