ZOZO Tech Meetup で話したフロントエンドリアーキテクトの話です。
ϑϩϯτΤϯυϦΞʔΩςΫτ 20236/8 @ zozo event
View Slide
Twitter: @yosuke_furukawaGithub: yosuke-furukawa
ҙࣄ߲• ͜ͷεϥΠυ ZOZO ʹ͓͚ΔϦΞʔΩςΫτͷͰ͋Γ·ͤΜɻ• ॴଐ৫ͱແؔͰ͢ɻ• େ෯ʹ΅্͔ͨ͠ͰҰൠతͳͱͯ͠ޠ͍ͬͯ·͢ɻ
ϑϩϯτΤϯυϦΞʔΩςΫτ2023• ٕज़ސΛ͍ࣾͯ͠·͢• ٕज़ސͷதͰҰ൪FAQͳͷ͕• ʮxxxͰ࡞ͬͨͷΛϦΞʔΩςΫτ͍ͨ͠ͷͰ͕͢ʯͱ͍͏͍߹ΘͤͰ͢• ࠓճͦͦϦΞʔΩςΫτͱͲ͏͍͏ͷͳͷ͔• ϦΞʔΩςΫτ͕͏·͍͘͘ͷͱ͏·͍͔͘ͳ͍ͷԿ͕ҧ͏ͷ͔ʹ͍ͭͯ͠·͢
ϦΞʔΩςΫτͱ
ϦΞʔΩςΫτͱ• Chapter 5: Re-ArchitectingϦϑΝΫλϦϯάͷҰछͰ͋ΔɻϝιουΫϥεͱ͍ͬͨ୯ҐͰͳ͘ɺϞδϡʔϧίϯϙʔωϯτͱ͍ͬͨ୯ҐͰઃܭͷݟ͠Λߦ͏͜ͱ
ϦΞʔΩςΫτͱ• ϦϑΝΫλϦϯάɿίʔυ୯ҐͰͷ࠶࣮• ϦΞʔΩςΫτɿઃܭ୯ҐͰͷ࠶ߏஙɺϞδϡʔϧΛׂͯ͠Ұ෦Λॻ͖͑Δ• ϏοάϦϥΠτɿॻ͖͠ɺθϩϕʔεͰͷ࠶ߏங
ͦͦͳΜͰϦΞʔΩςΫτ͕ඞཁͳͷ͔
ͦͦͳΜͰϦΞʔΩςΫτ͕ඞཁͳͷ͔• ͜͜ʹ̎ͭͷత͕͋Δ• ιϑτΣΞ࣮རతͳʢظతͳϝϦοτʣ• ৫ͷٕज़ܧঝͷʢதظతͳϝϦοτʣ
ιϑτΣΞ࣮རతͳ• ϞδϡʔϧΛׂ͢Δ͜ͱͰಠཱੑΛߴΊɺґଘΛݮΒ͢• ΠϯλϑΣʔεͱ࣮Λ͢Δ͜ͱͰؔ৺ΛͰ͖ΔʢόοΫΤϯυͱϑϩϯτΤϯυͰΠϯλϑΣʔε͚ͩఆٛ͢Ε͓ޓ͍ͷ࣮ؔ৺ͷ֎ʹͳΔʣ• ͻ͍ͯશମతʹϝϯςφϯείετ͕Լ͕Δํʹಇ͘• Ұํɺܾ·Γࣄ૿͑Δ͠ɺ੍͕શ͘ͳ͍༁Ͱແ͍ʢΠϯλϑΣʔεͷมߋʹ௧Έ͕͏ɺίʔυΛ࠶ઃܭ͢Δ͜ͱͰͷҭίετൃੜ͢Δʣ
৫ͷٕज़ܧঝͷ• ఆظతʹϦΞʔΩςΫτɾϦϑΝΫλϦϯάΛߦ͏͜ͱ͕ίʔυͷϒϥοΫϘοΫεԽΛ͙͜ͱʹͳΔ• ͻ͍ٕͯज़ͷঝʹͭͳ͕Δ
৫ͷٕज़ܧঝͷ• ίʔυͷΦʔφʔγοϓ͕ॏཁ• ࣗͷίʔυͰ͋Δɺࣗͷ͜ͱͰ͋Δͱ͍͏ҙࣝ• ʮ࡞Δ͚ͩ࡞ͬͯޙଞਓʹͤΔʯͱ͍͏ϚΠϯυͰൃల͠ͳ͍• ࣗͷͷͩͱ͍͏ҙࣝΛ࣋ͭ
৫ͷٕज़ܧঝͷ• ࣜભٶͱ͍͏ߟ͑ํ• ࣜʢఆظతʹʣભٶʢ৽఼͍ࣾ͠ΛΓɺޚਆମΛભ͢ʣ• ۩ମతʹ20ʹҰඞͣߦ͏ɻભٶʹΑΔࣄۀඅ2013Ͱ550ԯԁ• ࣜભٶࣗମਖ਼ٶͷҠಈʢϝΠϯϞδϡʔϧͷҠ͠ସ͑ʣ͕ऴΘͬͨޙɺผٶͷҠಈʢαϒϞδϡʔϧͷೖΕସ͑ʣ͕͋Δɻ• ͜ͷؒɺ2ؒ160໊ͷٕೳऀͷޏ༻͕ଓ͘ɻผٶͷભٶऴྃޙɺएखٕೳ༏लऀ30໊΄ͲΛਆٶͷৗۈ৬һͱͯ͢͠ɻ• ࠃަ௨লͷίϥϜʮࣜભٶʹݟΔٕज़ܧঝͱٕज़ऀ֬อ https://www.mlit.go.jp/hakusyo/mlit/h25/hakusho/h26/html/n1233c20.htmlʯΑΓ
৫ͷٕज़ܧঝͷ• ࣜભٶͰఆظతʹϦΞʔΩςΫτΛߦ͏͜ͱͰɺٕज़ऀͷҭͱΦʔφʔγοϓͷ֬อΛߦ͍ͬͯΔ• γεςϜͷϦΞʔΩςΫτ͕͜͜ૂ͍Ͱ͋Δࣄ͕ଟ͍• ୯७ʹظతͳ࣭վળ͕త͚ͩͩͱ͢Δͱظͷඅ༻ରޮՌͷ͚ͩʹͳͬͯ͠·͏͕ɺ͜͜ΛΘ͔ͬͯ͘Ε͍ͯΔਓ͕ݱΛޙԡͯ͘͠͠ΕΔͱॿ͔Δ
ϑϩϯτΤϯυ ϦΞʔΩςΫτ
ϑϩϯτΤϯυϦΞʔΩςΫτ• όοΫΤϯυͱϑϩϯτΤϯυΛΓ͚Δͱ͜Ζ͔Βελʔτ• ͜ΕϨΨγʔιϑτΣΞվળΨΠυʹࡌͬͯΔํ๏• ͦͷޙͲ͏͢Δͱྑ͍ͷ͔
ϑϩϯτΤϯυϦΞʔΩςΫτ• Α͋͘Δύλʔϯ• ಛఆͷը໘͚ܾͩΊ͔ͯͦ͜ΒऔΓΉʢZOZO͕͜ͷύλʔϯɺτοϓϖʔδ͔Βมߋ͢Δʣ• ͬͱίϯϙʔωϯτΛׂͯ͠ڞ௨ͷίϯϙʔωϯτʹΓग़͢ͱ͜Ζ͔Β࢝ΊΔʢύʔπΛ·ͣ࠷ॳʹ࡞ͬͯ͠·͍ɺ͔ͦ͜ΒΈ্͍͛ͯ͘ʣ• Ұؾʹϒϧυʔβʔ࡞ઓʢΧοͱͳͬͯશ෦ Next.js ͰϦϥΠτ͠·ͨ͠Έ͍ͨͳʣ
ಛఆͷը໘ίϯϙʔωϯτ͚ܾͩΊ͔ͯͦ͜Βখ࢝͘͞ΊΔύλʔϯ• ࣮Ұ൪ଟ͍͔• ଟ͘ͷػೳ͕͋ͬͯɺશ෦Λஔ͖͑Δͷ͕͘͠ɺঃʑʹஔ͖͑Δ͔͠ํ๏͕ͳ͍࣌ʹΔύλʔϯ• ͍͖ͳΓϏοάϦϥΠτ͠Α͏ͱ͢Δͱࣦഊ͕ͪ͠ͳͷͰɺطଘͷػೳՃΛ͠ͳ͕Β৽نϦΞʔΩςΫτΛซ༻͢Δ࣌ʹߦ͏
ͬͱίϯϙʔωϯτΛׂͯ͠ɺڞ௨ύʔπΛ࡞Δͱ͜Ζ͔Β࢝Ίͯޙ͔Βঃʑʹڞ௨ύʔπʹدͤͯྑ͍ͯ͘͘͠• ϘτϜΞοϓʹڞ௨ͷίϯϙʔωϯτ͔Β࣮ࢪ͢ΔΞϓϩʔν• ϨΠϠΛػೳ࣠Ͱׂ࣮ͯ͠ࢪ͢Δͷ͕̍ͭͷύλʔϯͩͱ͢Δͱɺ෦ͷಛੑͰׂ࣮ͯ͠ࢪ͢Δํ๏• ౷Ұ͞Εͨίϯϙʔωϯτ͕ͪΌΜͱΑ͘Ͱ͖ͨͷͰ͋Ε߹ੑ͑ΒΕΔ͠ɺ͏·͍͚͘ύʔπͷ࠶ར༻ੑ͕ߴ·Γੜ࢈ੑ্͕Δ
ͬͱίϯϙʔωϯτΛׂͯ͠ɺڞ௨ύʔπΛ࡞Δͱ͜Ζ͔Β࢝Ίͯޙ͔Βঃʑʹڞ௨ύʔπʹدͤͯྑ͍ͯ͘͘͠• ҰํͰڞ௨ίϯϙʔωϯτઃܭ͕͍͠ɻ• ޙʹ৮ΕΔ͕ɺϏοάϦϥΠτʹͳΓ͕ͪ• ͜ͷํ๏Ͱ͏·͍͘͘ύλʔϯ͋·Γݟͨ͜ͱ͕ͳ͍• ׂͷํ͕ஞ࣍తʹͳΒͣɺൈຊతͳׂʹͳΔࣄ͕͋Δ
Ұؾʹϒϧυʔβʔ࡞ઓ• Χοͱͳͬͯશ෦ͬͱ͖·ͨ͠• Զʹ1ि͍ؒͩ͘͞ɻຊͷϦΞʔΩςΫτΛ͓ݟͤ͠·͢Αύλʔϯ• ظతʹऴΘΔ͠ɺ෦࣭͕ؾʹͳΔ͕ɺϨϏϡʔ͕Ͱ͖ΔͳΒ࠷ߴ
Ұؾʹϒϧυʔβʔ࡞ઓ• ͦΜͳʹ͘ͳ͍• ݸਓͷྗྔʹґଘͯ͠͠·͏• ٕͦͦज़ͷܧঝΛ͍ͨ͠ͷʹɺ݁ہগͷਓʹ͔͠ܧঝ͞Εͳ͍• ͨͩظతʹऴΘΒͤΔ͜ͱ͕Ͱ͖ͯɺ͕ҰؾʹਐΉ
݁ہϦΞʔΩςΫτͷϑϩϯτΤϯυͰΔํ๏ͬͯ• ಛఆͷը໘ɾػೳɾίϯϙʔωϯτΛܾΊͯϦΞʔΩςΫτͯ͠ɺஞ࣍తʹม͍͑ͯ͘ํ๏͔͋͠·ΓϫʔΫͨ͠ͷΛݟͳ͍• ϏοάϦϥΠτʹͳΒͳ͍Α͏ʹ͠ͳ͍ͱ͍͚ͳ͍• ݸਓͷྗྔͰୡͰ͖Εྑ͍͕ɺ߹Αͦ͘͏͍͏ύϫʔͷ͋Δਓ͕͍ͳ͍͜ͱଟ͍
ϦΞʔΩςΫτΞϯνύλʔϯू
ϦΞʔΩςΫτΞϯνύλʔϯू• पลͷٕज़͔ͬΓͬͪΌ͏ύλʔϯ• eslint, prettier, pnpm, yarn, vite, vitest, ͜͏͍͏πʔϧΛͲ͏͢Δ͔͔ΓΜͰલʹਐΜͰͳ͍ύλʔϯ• ඪ४ͷղ๏Έ͍ͨͳͷΛ͍ٻΊ͗ͯ͢Δ• ਖ਼ղͳΜͯແ͍ɺ·ͣʹਐΊͨΒͦΕ͕ਖ਼ղ• ޙ͔ΒͳΜͱͰͳͬͨΓ͢Δ
ϦΞʔΩςΫτΞϯνύλʔϯू• ·ͩݟ͵ແݶͷকདྷʹࢥ͍Λͤͯ͠·͏ύλʔϯ• ͜Μͳ͜ͱ͍͍ͳ• Ͱ͖ͨΒ͍͍ͳ• ͋Μͳػೳ͜Μͳίϯϙʔωϯτ͍ͬͺ͍͋Δ͚Ͳ• ਐ·ͳ͍ʂʂʂ• શ෦Λ·Δͬͱ࠷ॳ͔ΒΑ͘͢Δ͜ͱͰ͖ͳ͍• ͪΐͬͱͣͭͪΐͬͱͣͭܧଓతʹΑ͘͢Δ͜ͱ͔͠Ͱ͖ͳ͍
ϦΞʔΩςΫτΞϯνύλʔϯू• طଘػೳͷΤϯϋϯεΛετοϓͤͯ͞ϦΞʔΩςΫτ༏ઌͪ͠Ό͏ύλʔϯ• γϯϓϧʹαʔϏεͷػೳՃ͕ࢭ·Δ• جຊࣹܸͭͭ͠લਐ• ελʔτΞοϓͱ͔ͩͱ྆ํΒͳ͍ͱ͍͚ͳ͍ͷ͕ਏ͍ͱ͜Ζ• ܦӦஅͰϦΞʔΩςΫτ༏ઌ͢ΔͳΒྑ͍͕ɺΤϯϋϯε͠ͳ͕ΒΔͷ͕Ұൠత• ػೳը໘ׂ͕͞ΕͯͨΒ͚ͩ͜͜ػೳՃ͠ͳ͍Ͱ΄͍͠ͱ͍͏ͷݴ͍͍͢
·ͱΊ
·ͱΊ• ϦΞʔΩςΫτͱ࠶ઃܭͷ͜ͱ• ϦΞʔΩςΫτΛΔҙຯ্࣭ɺੜ࢈ੑվળ͚ͩͰͳ͍• ٕज़ͷܧঝͱίʔυͷΦʔφʔγοϓΛ࣋ͭ͜ͱʢࣜભٶʣ• ϦΞʔΩςΫτΛΔࡍείʔϓΛௐ͢Δ͜ͱ• ͪΖΜҰؾʹͰ͖ΔͳΒͦΕͰྑ͍͕ɺݸਓʹґଘ͢ΔͷͰؾΛ͚ͭΔ͜ͱ• Ξϯνύλʔϯ͍͔ͭ͋͘Δɺࣗͨͪʹͯ·ͬͯͳ͍͔Λ֬ೝ͍ͨ͠