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
三菱電機・ソニーグループ共同の「Agile Japan企業内サテライト」_2025
sony
0
110
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
AWSにおけるTrend Vision Oneの効果について
shimak
0
140
Trust as Infrastructure
bcantrill
1
370
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
4
350
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
230
データエンジニアがこの先生きのこるには...?
10xinc
0
470
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
360
AI ReadyなData PlatformとしてのAutonomous Databaseアップデート
oracle4engineer
PRO
0
230
許しとアジャイル
jnuank
1
140
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
2
930
Vibe Coding Year in Review. From Karpathy to Real-World Agents by Niels Rolland, CEO Paatch
vcoisne
0
110
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
970
The World Runs on Bad Software
bkeepers
PRO
71
11k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Statistics for Hackers
jakevdp
799
220k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
The Language of Interfaces
destraynor
162
25k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
What's in a price? How to price your products and services
michaelherold
246
12k
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