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
WEAR Webのこれまでの課題とリプレイスの方針 / Wear Web issues and...
Search
mai-f
February 21, 2022
Technology
0
1.2k
WEAR Webのこれまでの課題とリプレイスの方針 / Wear Web issues and replacement policies
ZOZO Tech Talk #3 - Webフロントエンドの発表資料
WEAR Webのリプレイスに至った経緯やリプレイスの方針、取り組みについて説明しています。
mai-f
February 21, 2022
Tweet
Share
Other Decks in Technology
See All in Technology
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
190
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
160
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
300
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1k
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3k
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
710
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
110
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
170
Agile PBL at New Grads Trainings
kawaguti
PRO
1
390
Rustから学ぶ 非同期処理の仕組み
skanehira
1
130
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
19
8.5k
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
280
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Designing Experiences People Love
moore
142
24k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Pragmatic Product Professional
lauravandoore
36
6.9k
The Invisible Side of Design
smashingmag
301
51k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Rails Girls Zürich Keynote
gr2m
95
14k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
Transcript
WEAR Webͷ͜Ε·Ͱͷ՝ͱ ϦϓϨΠεͷํ 2022/02/21 ZOZO Tech Talk #3 גࣜձࣾZOZ O
ϝσΟΞ։ൃຊ෦ WEAR෦ɹϑϩϯτΤϯυϒϩοΫ ౻Ҫ ຑҥ Copyright © ZOZO, Inc.
© ZOZO, Inc. גࣜձࣾZOZ O ϝσΟΞ։ൃຊ෦ WEAR෦ɹϑϩϯτΤϯυϒϩοΫ ౻Ҫ ຑҥ 20155݄ೖࣾ
ೖࣾޙWEAR WebαΠτͷ৽ػೳ։ൃطଘػೳվ मʹैࣄ͠ɺݱࡏϦϓϨΠεΛਐΊ͍ͯΔɻ 2
© ZOZO, Inc. 3 https://wear.jp/ • ϑΝογϣϯίʔσΟωʔτΞϓϦ • 1,500ສμϯϩʔυಥഁɺίʔσΟωʔτߘ૯1,200ສ݅ Ҏ্ʢ202112݄࣌ʣ
• ϐοΫΞοϓλά͔Β࠷৽ͷτϨϯυΛνΣοΫ • ίʔσΟωʔτண༻ΞΠςϜΛϒϥϯυެࣜαΠτͰߪೖՄೳ • WEARެೝͷਓؾϢʔβʔΛWEARISTAͱೝఆɻϞσϧɾλϨϯ τɾσβΠφʔɾΠϯϑϧΤϯαʔͱ͍֤ͬͨքஶ໊ਓࢀՃ
2013 2014 2015 2016 2017 2019 2018 2020 2021 2013.10
WEAR αʔϏε։࢝ 2014.02 100ສμϯϩʔυୡ 2014.03 ॳͷςϨϏCMΛ์ө 2014.05 WEARॳɺਓؾҰൠϢʔβʔ20໊Λ WEARISTAʹೝఆ ॳͷւ֎ల։ͱͯ͠αʔϏε։࢝ 2015.04 શੈքͰμϯϩʔυՄೳ 2015.06 200໊ͷਓؾҰൠϢʔβʔΛ WEARISTAʹೝఆ 2016.02 ਓؾ14ϒϥϯυ͕ҰൠϢʔβʔͱ εϙϯαʔγοϓΛ݁ͼ ϒϥϯυެೝϢʔβʔʹೝఆ 2017.10 Pinterestͱ࿈ܞ։࢝ 2018.10 ৽͍͠ݕࡧػೳʮ৽ݟ͚ͭΔʯϦϦʔε ࠂࣄۀ։࢝ 2019.03 1,300ສμϯϩʔυୡ 2019.05 Amazon Alexa εΩϧ ʮίʔσ૬ஊ by WEARʯϦϦʔε 2020.03 TOPϦχϡʔΞϧ ʮࠓͷϐοΫΞοϓλάʯ։࢝ 2020.04 ػցֶशΛ׆༻ͨ͠ ʮܕผίʔσݕࡧʯϦϦʔε 2020.09 ػցֶशΛ׆༻ͨ͠ ʮྨࣅΞΠςϜݕࡧʯϦϦʔε 2021.10.20 ෳຕߘϦϦʔε coming soon ϑΝογϣϯಈըߘػೳ ʮWAYʯϦϦʔε Ϣʔβʔɾίʔσίϯςϯπ֫ಘظ ࣭ͷྑ͍ίʔσίϯςϯπ֫ಘظ ཉ͍͕͠ݟ͔ͭΔػೳ֦ॆظ ϑΝογϣϯσʔλूΊͯɾಧ͚Δظ WEARͷาΈͱ͜Ε͔Β
© ZOZO, Inc. 5 ࠓ͓͢͠Δ֓ཁ • WEAR WebͷϦϓϨΠεʹࢸͬͨܦҢϦϓϨΠεͷํɺऔΓ Έʹ͍͓ͭͯ͠͠·͢ •
WEAR WebϑϩϯτΤϯυͷ։ൃʹؔ৺ͷ͋ΔํɺWebϑϩϯτΤ ϯυͷϦϓϨΠεʹؔ৺͕͋ΔํͷࢀߟʹͳΕ͍Ͱ͢
© ZOZO, Inc. 6 ΞδΣϯμ • ϦϓϨΠεͷഎܠ • ϦϓϨΠεͷํ •
࣮ࡍͷऔΓΈ • ·ͱΊ
© ZOZO, Inc. 7 ΞδΣϯμ • ϦϓϨΠεͷഎܠ • ϦϓϨΠεͷํ •
࣮ࡍͷऔΓΈ • ·ͱΊ
© ZOZO, Inc. 8 ͜Ε·ͰͷWEAR • 2013 WEARϩʔϯν ◦ αʔϏεϩʔϯν͔Β͏͙͢10
◦ ࣌ͷٕज़ελοΫͷ··։ൃΛܧଓ
© ZOZO, Inc. 9 ͜Ε·Ͱͷٕज़ελοΫ Windows Server (IIS) Load
Balancer VBScript HTM L + JavaScript On-Premise
© ZOZO, Inc. 10 WEAR Web๊͕͍͑ͯͨ՝ᶃ • ݱࡏओྲྀͰͳ͍VBScriptɺjQueryͷར༻ ◦ ϥΠϒϥϦ͕ϝϯςφϯε͞Εͳ͘ͳ͍ͬͯΔ
• ੜ࢈ੑɺอकੑͷ͞ ◦ ετΞυϓϩγʔδϟͷར༻ ▪ ύϑΥʔϚϯε ▪ CI/CDͷڥ͕උ͞Ε͍ͯͳ͍ ◦ 10ؒͷٕज़తෛ࠴ʹΑΔ࣮༷ͷѲίετ͕ߴ͍
© ZOZO, Inc. 11 WEAR Web๊͕͍͑ͯͨ՝ᶄ • ΤϯδχΞͷ֬อɾ࠾༻͕ࠔ ◦ jQueryVBScriptͷΤϯδχΞͷ࠾༻͕ࠔ
◦ ϨΨγʔٕज़ͷ༻ʹΑΔΩϟϦΞෆ҆
© ZOZO, Inc. 12 WEARͷվળ͕ͳ͔ͳ͔ਐ·ͳ͍…
© ZOZO, Inc. 13 ͜ΕΒͷ՝ղܾͷͨΊ WEARͷϦϓϨΠεϓϩδΣΫτΛελʔτ
© ZOZO, Inc. 14 ϦϓϨΠε։࢝ • 2019 ◦ APIϦϓϨΠε։࢝ •
2020 ◦ WebϦϓϨΠε։࢝
© ZOZO, Inc. 15 ΞδΣϯμ • ϦϓϨΠεͷഎܠ • ϦϓϨΠεͷํ •
࣮ࡍͷऔΓΈ • ·ͱΊ
© ZOZO, Inc. 16 Mission ϑΝογϣϯσʔλΛूΊͯ ਓʑͷϑΝογϣϯͷΈΛղܾ͢Δ WEAR FOR CONNECTION
ੈքதͷਓΛͰͭͳ͛Α͏ Vision
© ZOZO, Inc. 17 WebϦϓϨΠεϓϩδΣΫτͷϛογϣϯ • MUS T ◦ ։ൃੜ࢈ੑΛ্ͤ͞Δ
◦ ࠷ݶඞཁͳػೳΛબ ▪ ݱࡏͷར༻ঢ়گΛߟྀͯ͠औࣺબ • WAN T ◦ SEOվળʢSEOྲྀೖͷӾཡϢʔβʔ͕ଟ͍ͨΊʣ ▪ ύϑΥʔϚϯε ▪ UX
© ZOZO, Inc. 18 ΞδΣϯμ • ϦϓϨΠεͷഎܠ • ϦϓϨΠεͷํ •
࣮ࡍͷऔΓΈ • ·ͱΊ
© ZOZO, Inc. 19 WebϦϓϨΠεϓϩδΣΫτͰΔ͜ͱ • Ϟμϯͳٕज़ελοΫͷҠߦ ◦ SEOվળతͰύϑΥʔϚϯεΛॏࢹٕͨ͠ज़બఆ •
ஈ֊తͳϦϓϨΠε ◦ ৽͍͠ػೳͷՃվળฒߦͯ͠ߦ͏ͨΊʹύε୯ҐͰϦϓϨΠ εͰ͖ΔΞʔΩςΫνϟબఆ
© ZOZO, Inc. 20 ΞʔΩςΫνϟ Fastify Preact ALB ECS /
Fargate
© ZOZO, Inc. 21 ݴޠɺϥΠϒϥϦબఆ • TypeScrip t • Fastif
y ◦ ExpressΑΓߴ͍ύϑΥʔϚϯε • Preac t ◦ ϑΝΠϧαΠζ͕େ͖͍ReactDOMΛ༻ͤͣܰྔԽ • ͦͷଞϥΠϒϥϦɾSaa S ◦ Tailwind CS S ◦ Chromati c ◦ Mock Service Worke r ◦ Storybook
© ZOZO, Inc. 22 Fastify + Preactʹ͍ͭͯ Fastify Preact ALB
ECS / Fargate
© ZOZO, Inc. 23 Fastify + Preactʹ͍ͭͯ Fastify Preact ALB
ECS / Fargate HTM L + CSR HTMLʢSSR,SSGʣ CSR༻ͷJavaScript αʔόʔଆͰSEOʹॏཁͳใΛϨϯμϦϯάɺ·ͨSS G CSR͢Δ෦CSR༻ͷJavaScriptͱͯ͠ੜ
© ZOZO, Inc. 24 Fastlyʹ͍ͭͯ - CDNΩϟογϡͷݕ౼ Fastify Preact ALB
ECS / Fargate CD N Ωϟογϡ Ωϟογϡ ͞Εͨ HTML HTMLʢSSR,SSGʣ
© ZOZO, Inc. 25 Fastlyʹ͍ͭͯ - CDNΩϟογϡͷݕ౼ Fastify Preact ALB
ECS / Fargate CD N Ωϟογϡ Ωϟογϡ ͞Εͨ HTML HTMLʢSSR,SSGʣ ϢʔβʔใʹؔΘΒͳ͍෦Λ SSRɺSSG
© ZOZO, Inc. 26 Fastlyʹ͍ͭͯ - CDNΩϟογϡͷݕ౼ Fastify Preact ALB
ECS / Fargate CD N Ωϟογϡ Ωϟογϡ ͞Εͨ HTML HTMLʢSSR,SSGʣ ϢʔβʔใʹؔΘΒͳ͍෦Λ SSRɺSSG ϢʔβʔใʹؔΘΔ෦ΛCSR
© ZOZO, Inc. 27 Fastlyʹ͍ͭͯ - ஈ֊తͳҠߦ Windows Server
(IIS) VBScript Load Balancer On-Premise /foo /bar /baz
© ZOZO, Inc. 28 ΞδΣϯμ • ϦϓϨΠεͷഎܠ • ϦϓϨΠεͷํ •
࣮ࡍͷऔΓΈ • ·ͱΊ
© ZOZO, Inc. 29 ·ͱΊ • WEAR WebͷϦϓϨΠεΛ։࢝͠·ͨ͠ • ٕज़໘
◦ Ϟμϯͳٕज़ελοΫͷϦϓϨΠε ◦ SEOΛॏࢹͨ͠։ൃ • ϓϩμΫτͷ࡞Γ ◦ αʔϏεΛΑΓྑ͍Χλν ◦ ਓࡐҭɺ৫՝ͷղܾ
None