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.8k
フロントエンドリアーキテクトの話
ZOZO Tech Meetup で話したフロントエンドリアーキテクトの話です。
Yosuke Furukawa
PRO
June 08, 2023
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
リアーキテクトと開発生産性について
yosuke_furukawa
PRO
21
7.9k
JavaScript Server Runtime History
yosuke_furukawa
PRO
8
2.7k
tc39 x jsconf.jp Panel Discussion
yosuke_furukawa
PRO
0
870
フロントエンドの開発生産性とは
yosuke_furukawa
PRO
16
9.5k
7 principles for rich web apps And how next.js achieves these principles
yosuke_furukawa
PRO
6
2.1k
Deep Dive International Conference
yosuke_furukawa
PRO
0
96
フロントエンドのDXと今後
yosuke_furukawa
PRO
6
3.6k
new_urlparser.pdf
yosuke_furukawa
PRO
1
420
キャリアの悩みについて
yosuke_furukawa
PRO
22
11k
Other Decks in Programming
See All in Programming
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
170
どうしてこうなった命名集 ~🔥編~ / OOC 2024 LT
pictiny
4
2.8k
BuefyのMaintainerを引き継いだ件
kikuomax
0
510
Deep Dive 大規模システムアーキテクチャ/開発組織エンジニアリング / Deep Dive Large-Scale System Architecture, Development Organization Engineering
nrslib
15
2.9k
TCAの Shared Stateって どういう仕組みになってんの?
yimajo
0
330
クソコード動画『カプセル化 Mk-II』 で考える 上手くカプセル化できない理由 / encapsulation2
minodriven
11
7.7k
AppDeveloperCon 2024 EU: Building polyglot developer experiences in 2024
salaboy
0
370
Laravel標準バリデーションでできること
hmb_ok
2
360
イベントストーミングによるオブジェクトモデリング・オブジェクト指向プログラミングの適用・開発プロセスの変遷・アーキテクチャの変革 / Object modeling with Event Storming.
nrslib
12
2.9k
コミュニティに参加したことで起きた変化
ohmori_yusuke
3
130
PHPerKaigi 2024〜10年以上動いているレガシーなバッチシステムを Kubernetes(Amazon EKS) に移行する取り組み〜
tshinowpub
1
220
DDD, necessary but insufficient: physical design principles for microservices
cer
PRO
0
2.1k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
113
18k
For a Future-Friendly Web
brad_frost
170
8.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
11
1.4k
Optimizing for Happiness
mojombo
369
69k
Git: the NoSQL Database
bkeepers
PRO
421
63k
How GitHub (no longer) Works
holman
301
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.6k
Into the Great Unknown - MozCon
thekraken
10
830
A designer walks into a library…
pauljervisheath
199
23k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
GraphQLの誤解/rethinking-graphql
sonatard
48
9.1k
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, ͜͏͍͏πʔ ϧΛͲ͏͢Δ͔͔ΓΜͰલʹਐΜͰͳ͍ύλʔϯ • ඪ४ͷղ๏Έ͍ͨͳͷΛ͍ٻΊ͗ͯ͢Δ • ਖ਼ղͳΜͯແ͍ɺ·ͣʹਐΊͨΒͦΕ͕ਖ਼ղ • ޙ͔ΒͳΜͱͰͳͬͨΓ͢Δ
ϦΞʔΩςΫτΞϯνύλʔϯ ू • ·ͩݟ͵ແݶͷকདྷʹࢥ͍Λͤͯ͠·͏ύλʔϯ • ͜Μͳ͜ͱ͍͍ͳ • Ͱ͖ͨΒ͍͍ͳ • ͋Μͳػೳ͜Μͳίϯϙʔωϯτ͍ͬͺ͍͋Δ͚Ͳ
• ਐ·ͳ͍ʂʂʂ • શ෦Λ·Δͬͱ࠷ॳ͔ΒΑ͘͢Δ͜ͱͰ͖ͳ͍ • ͪΐͬͱͣͭͪΐͬͱͣͭܧଓతʹΑ͘͢Δ͜ͱ͔͠Ͱ͖ͳ͍
ϦΞʔΩςΫτΞϯνύλʔϯ ू • طଘػೳͷΤϯϋϯεΛετοϓͤͯ͞ϦΞʔΩςΫτ༏ઌͪ͠Ό͏ύλʔ ϯ • γϯϓϧʹαʔϏεͷػೳՃ͕ࢭ·Δ • جຊࣹܸͭͭ͠લਐ •
ελʔτΞοϓͱ͔ͩͱ྆ํΒͳ͍ͱ͍͚ͳ͍ͷ͕ਏ͍ͱ͜Ζ • ܦӦஅͰϦΞʔΩςΫτ༏ઌ͢ΔͳΒྑ͍͕ɺΤϯϋϯε͠ͳ͕Β Δͷ͕Ұൠత • ػೳը໘ׂ͕͞ΕͯͨΒ͚ͩ͜͜ػೳՃ͠ͳ͍Ͱ΄͍͠ͱ͍͏ ͷݴ͍͍͢
·ͱΊ
·ͱΊ • ϦΞʔΩςΫτͱ࠶ઃܭͷ͜ͱ • ϦΞʔΩςΫτΛΔҙຯ্࣭ɺੜ࢈ੑվળ͚ͩͰͳ͍ • ٕज़ͷܧঝͱίʔυͷΦʔφʔγοϓΛ࣋ͭ͜ͱʢࣜભٶʣ • ϦΞʔΩςΫτΛΔࡍείʔϓΛௐ͢Δ͜ͱ •
ͪΖΜҰؾʹͰ͖ΔͳΒͦΕͰྑ͍͕ɺݸਓʹґଘ͢ΔͷͰؾ Λ͚ͭΔ͜ͱ • Ξϯνύλʔϯ͍͔ͭ͋͘Δɺࣗͨͪʹͯ·ͬͯͳ͍͔Λ֬ ೝ͍ͨ͠