Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンドリアーキテクトの話
Search
Yosuke Furukawa
PRO
June 08, 2023
Programming
18
8.9k
フロントエンドリアーキテクトの話
ZOZO Tech Meetup で話したフロントエンドリアーキテクトの話です。
Yosuke Furukawa
PRO
June 08, 2023
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
AppRouter Panel Talk
yosuke_furukawa
PRO
1
530
Node.js v22 で変わること
yosuke_furukawa
PRO
12
4.2k
リアーキテクトと開発生産性について
yosuke_furukawa
PRO
22
8.4k
JavaScript Server Runtime History
yosuke_furukawa
PRO
8
3k
tc39 x jsconf.jp Panel Discussion
yosuke_furukawa
PRO
0
1.2k
フロントエンドの開発生産性とは
yosuke_furukawa
PRO
16
9.8k
7 principles for rich web apps And how next.js achieves these principles
yosuke_furukawa
PRO
6
2.4k
Deep Dive International Conference
yosuke_furukawa
PRO
0
110
フロントエンドのDXと今後
yosuke_furukawa
PRO
6
3.9k
Other Decks in Programming
See All in Programming
教えて!スクラムコーチ品質とスピードのバランスはどうすりゃいいの?
pinboro
0
160
The World is a Network (and We Are Just Nodes)
whatyouhide
0
100
チーム立ち上げにAWSを活用したらClaudeさんに褒められた話
mkdev10
3
230
TypeScriptで使いやすいOpenAPIの書き方
yukimochi_dwango
1
960
GNU Makeの使い方 / How to use GNU Make
kaityo256
PRO
13
4.4k
Revisiting the Hotwire Landscape after Turbo 8 @ RailsConf 2024, Detroit
marcoroth
3
610
mb_trim関数を作りました
youkidearitai
PRO
1
250
FoodGram
iseruuuuu
0
230
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
7
1.2k
JavaScript Closure
asoluka
0
2k
Try creating your own orderedmap
kazamori
1
290
slow types ってなんだろう?
karad
0
210
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.5k
Designing for humans not robots
tammielis
247
25k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
22
1.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Writing Fast Ruby
sferik
622
60k
Navigating Team Friction
lara
179
13k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.4k
Why Our Code Smells
bkeepers
PRO
331
56k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Transcript
ϑϩϯτΤϯυϦΞʔ ΩςΫτ 2023 6/8 @ zozo event
Twitter: @yosuke_furukawa Github: 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, ͜͏͍͏πʔ ϧΛͲ͏͢Δ͔͔ΓΜͰલʹਐΜͰͳ͍ύλʔϯ • ඪ४ͷղ๏Έ͍ͨͳͷΛ͍ٻΊ͗ͯ͢Δ • ਖ਼ղͳΜͯແ͍ɺ·ͣʹਐΊͨΒͦΕ͕ਖ਼ղ • ޙ͔ΒͳΜͱͰͳͬͨΓ͢Δ
ϦΞʔΩςΫτΞϯνύλʔϯ ू • ·ͩݟ͵ແݶͷকདྷʹࢥ͍Λͤͯ͠·͏ύλʔϯ • ͜Μͳ͜ͱ͍͍ͳ • Ͱ͖ͨΒ͍͍ͳ • ͋Μͳػೳ͜Μͳίϯϙʔωϯτ͍ͬͺ͍͋Δ͚Ͳ
• ਐ·ͳ͍ʂʂʂ • શ෦Λ·Δͬͱ࠷ॳ͔ΒΑ͘͢Δ͜ͱͰ͖ͳ͍ • ͪΐͬͱͣͭͪΐͬͱͣͭܧଓతʹΑ͘͢Δ͜ͱ͔͠Ͱ͖ͳ͍
ϦΞʔΩςΫτΞϯνύλʔϯ ू • طଘػೳͷΤϯϋϯεΛετοϓͤͯ͞ϦΞʔΩςΫτ༏ઌͪ͠Ό͏ύλʔ ϯ • γϯϓϧʹαʔϏεͷػೳՃ͕ࢭ·Δ • جຊࣹܸͭͭ͠લਐ •
ελʔτΞοϓͱ͔ͩͱ྆ํΒͳ͍ͱ͍͚ͳ͍ͷ͕ਏ͍ͱ͜Ζ • ܦӦஅͰϦΞʔΩςΫτ༏ઌ͢ΔͳΒྑ͍͕ɺΤϯϋϯε͠ͳ͕Β Δͷ͕Ұൠత • ػೳը໘ׂ͕͞ΕͯͨΒ͚ͩ͜͜ػೳՃ͠ͳ͍Ͱ΄͍͠ͱ͍͏ ͷݴ͍͍͢
·ͱΊ
·ͱΊ • ϦΞʔΩςΫτͱ࠶ઃܭͷ͜ͱ • ϦΞʔΩςΫτΛΔҙຯ্࣭ɺੜ࢈ੑվળ͚ͩͰͳ͍ • ٕज़ͷܧঝͱίʔυͷΦʔφʔγοϓΛ࣋ͭ͜ͱʢࣜભٶʣ • ϦΞʔΩςΫτΛΔࡍείʔϓΛௐ͢Δ͜ͱ •
ͪΖΜҰؾʹͰ͖ΔͳΒͦΕͰྑ͍͕ɺݸਓʹґଘ͢ΔͷͰؾ Λ͚ͭΔ͜ͱ • Ξϯνύλʔϯ͍͔ͭ͋͘Δɺࣗͨͪʹͯ·ͬͯͳ͍͔Λ֬ ೝ͍ͨ͠