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
AIをプライベートや業務で使ってみよう!効果的な認定資格の活かし方
fukazawashun
0
100
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
10k
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
450
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
170
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
300
エンジニアリングマネージャーの成長の道筋とキャリア / Developers Summit 2025 KANSAI
daiksy
2
450
roppongirb_20250911
igaiga
1
240
Rustから学ぶ 非同期処理の仕組み
skanehira
1
150
新規プロダクトでプロトタイプから正式リリースまでNext.jsで開発したリアル
kawanoriku0
1
160
💡Ruby 川辺で灯すPicoRubyからの光
bash0c7
0
120
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
210
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.3k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
70
11k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Speed Design
sergeychernyshev
32
1.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Balancing Empowerment & Direction
lara
3
620
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Faster Mobile Websites
deanohume
309
31k
Making Projects Easy
brettharned
117
6.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
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