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
[OCI Skill Mapping] AWSユーザーのためのOCI – IaaS編(Compute/Storage/Networking) (2025年10月8日開催)
oracle4engineer
PRO
1
180
MCP ✖️ Apps SDKを触ってみた
hisuzuya
0
290
組織改革から開発効率向上まで! - 成功事例から見えたAI活用のポイント - / 20251016 Tetsuharu Kokaki
shift_evolve
PRO
2
230
Introdução a Service Mesh usando o Istio
aeciopires
1
280
物体検出モデルでシイタケの収穫時期を自動判定してみた。 #devio2025
lamaglama39
0
270
生成AIを安心して活用するために──「情報セキュリティガイドライン」策定とポイント
gree_tech
PRO
0
220
serverless team topology
_kensh
2
120
「タコピーの原罪」から学ぶ間違った”支援” / the bad support of Takopii
piyonakajima
0
110
Node.js 2025: What's new and what's next
ruyadorno
0
980
Building a cloud native business on open source
lizrice
0
160
OCIjp_Oracle AI World_Recap
shinpy
1
150
Introduction to Sansan Meishi Maker Development Engineer
sansan33
PRO
0
310
Featured
See All Featured
Thoughts on Productivity
jonyablonski
70
4.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Being A Developer After 40
akosma
91
590k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
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