WEAR Webのこれまでの課題とリプレイスの方針 / Wear Web issues and replacement policies

ZOZO Tech Talk #3 - Webフロントエンドの発表資料
WEAR Webのリプレイスに至った経緯やリプレイスの方針、取り組みについて説明しています。

Transcript

1. WEAR Webͷ͜Ε·Ͱͷ՝୊ͱ ϦϓϨΠεͷํ਑ 2022/02/21 ZOZO Tech Talk #3 גࣜձࣾZOZ O ϝσΟΞ։ൃຊ෦ WEAR෦ɹϑϩϯτΤϯυϒϩοΫ ౻Ҫ ຑҥ Copyright © ZOZO, Inc.
2. © ZOZO, Inc. גࣜձࣾZOZ O ϝσΟΞ։ൃຊ෦ WEAR෦ɹϑϩϯτΤϯυϒϩοΫ ౻Ҫ ຑҥ 2015೥5݄ೖࣾ ೖࣾޙ͸WEAR WebαΠτͷ৽ػೳ։ൃ΍طଘػೳվ मʹैࣄ͠ɺݱࡏϦϓϨΠεΛਐΊ͍ͯΔɻ 2
3. © ZOZO, Inc. 3 https://wear.jp/ • ϑΝογϣϯίʔσΟωʔτΞϓϦ • 1,500ສμ΢ϯϩʔυಥഁɺίʔσΟωʔτ౤ߘ૯਺͸1,200ສ݅ Ҏ্ʢ2021೥12݄຤࣌఺ʣ • ϐοΫΞοϓλά͔Β࠷৽ͷτϨϯυΛνΣοΫ • ίʔσΟωʔτண༻ΞΠςϜΛϒϥϯυެࣜαΠτͰߪೖՄೳ • WEARެೝͷਓؾϢʔβʔΛWEARISTAͱೝఆɻϞσϧɾλϨϯ τɾσβΠφʔɾΠϯϑϧΤϯαʔͱ͍֤ͬͨքஶ໊ਓ΋ࢀՃ
4. 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ͷาΈͱ͜Ε͔Β
5. © ZOZO, Inc. 5 ࠓ೔͓࿩͢͠Δ֓ཁ • WEAR WebͷϦϓϨΠεʹࢸͬͨܦҢ΍ϦϓϨΠεͷํ਑ɺऔΓ૊ Έʹ͍͓ͭͯ࿩͠͠·͢ • WEAR WebϑϩϯτΤϯυͷ։ൃʹؔ৺ͷ͋ΔํɺWebϑϩϯτΤ ϯυͷϦϓϨΠεʹؔ৺͕͋ΔํͷࢀߟʹͳΕ͹޾͍Ͱ͢
6. © ZOZO, Inc. 6 ΞδΣϯμ • ϦϓϨΠεͷഎܠ • ϦϓϨΠεͷํ਑ • ࣮ࡍͷऔΓ૊Έ • ·ͱΊ
7. © ZOZO, Inc. 7 ΞδΣϯμ • ϦϓϨΠεͷഎܠ • ϦϓϨΠεͷํ਑ • ࣮ࡍͷऔΓ૊Έ • ·ͱΊ
8. © ZOZO, Inc. 8 ͜Ε·ͰͷWEAR • 2013೥ WEARϩʔϯν ◦ αʔϏεϩʔϯν͔Β΋͏͙͢10೥ ◦ ౰࣌ͷٕज़ελοΫͷ··։ൃΛܧଓ
9. © ZOZO, Inc. 9 ͜Ε·Ͱͷٕज़ελοΫ Windows Server 
 (IIS) Load Balancer VBScript HTM L + JavaScript On-Premise
10. © ZOZO, Inc. 10 WEAR Web๊͕͍͑ͯͨ՝୊ᶃ • ݱࡏओྲྀͰ͸ͳ͍VBScriptɺjQueryͷར༻ ◦ ϥΠϒϥϦ͕ϝϯςφϯε͞Εͳ͘ͳ͍ͬͯΔ • ੜ࢈ੑɺอकੑͷ௿͞ ◦ ετΞυϓϩγʔδϟͷར༻ ▪ ύϑΥʔϚϯε ▪ CI/CDͷ؀ڥ͕੔උ͞Ε͍ͯͳ͍ ◦ ໿10೥ؒͷٕज़తෛ࠴ʹΑΔ࣮૷΍࢓༷ͷ೺Ѳίετ͕ߴ͍
11. © ZOZO, Inc. 11 WEAR Web๊͕͍͑ͯͨ՝୊ᶄ • ΤϯδχΞͷ֬อɾ࠾༻͕ࠔ೉ ◦ jQuery΍VBScriptͷΤϯδχΞͷ࠾༻͕ࠔ೉ ◦ ϨΨγʔٕज़ͷ࢖༻ʹΑΔΩϟϦΞෆ҆
12. © ZOZO, Inc. 12 WEARͷվળ͕ͳ͔ͳ͔ਐ·ͳ͍…
13. © ZOZO, Inc. 13 ͜ΕΒͷ՝୊ղܾͷͨΊ WEARͷϦϓϨΠεϓϩδΣΫτΛελʔτ
14. © ZOZO, Inc. 14 ϦϓϨΠε։࢝ • 2019೥ ◦ APIϦϓϨΠε։࢝ • 2020೥ ◦ WebϦϓϨΠε։࢝
15. © ZOZO, Inc. 15 ΞδΣϯμ • ϦϓϨΠεͷഎܠ • ϦϓϨΠεͷํ਑ • ࣮ࡍͷऔΓ૊Έ • ·ͱΊ
16. © ZOZO, Inc. 16 Mission ϑΝογϣϯσʔλΛूΊͯ ਓʑͷϑΝογϣϯͷ೰ΈΛղܾ͢Δ WEAR FOR CONNECTION ੈքதͷਓΛ෰Ͱͭͳ͛Α͏ Vision
17. © ZOZO, Inc. 17 WebϦϓϨΠεϓϩδΣΫτͷϛογϣϯ • MUS T ◦ ։ൃੜ࢈ੑΛ޲্ͤ͞Δ ◦ ࠷௿ݶඞཁͳػೳΛબ୒ ▪ ݱࡏͷར༻ঢ়گΛߟྀͯ͠औࣺબ୒ • WAN T ◦ SEOվળʢSEOྲྀೖͷӾཡϢʔβʔ͕ଟ͍ͨΊʣ ▪ ύϑΥʔϚϯε ▪ UX
18. © ZOZO, Inc. 18 ΞδΣϯμ • ϦϓϨΠεͷഎܠ • ϦϓϨΠεͷํ਑ • ࣮ࡍͷऔΓ૊Έ • ·ͱΊ
19. © ZOZO, Inc. 19 WebϦϓϨΠεϓϩδΣΫτͰ΍Δ͜ͱ • Ϟμϯͳٕज़ελοΫ΁ͷҠߦ ◦ SEOվળ໨తͰύϑΥʔϚϯεΛॏࢹٕͨ͠ज़બఆ • ஈ֊తͳϦϓϨΠε ◦ ৽͍͠ػೳͷ௥Ճ΍վળ΋ฒߦͯ͠ߦ͏ͨΊʹύε୯ҐͰϦϓϨΠ εͰ͖ΔΞʔΩςΫνϟબఆ
20. © ZOZO, Inc. 20 ΞʔΩςΫνϟ Fastify Preact ALB ECS / Fargate
21. © ZOZO, Inc. 21 ݴޠɺϥΠϒϥϦબఆ • TypeScrip t • Fastif y ◦ ExpressΑΓ΋ߴ͍ύϑΥʔϚϯε • Preac t ◦ ϑΝΠϧαΠζ͕େ͖͍ReactDOMΛ࢖༻ͤͣܰྔԽ • ͦͷଞϥΠϒϥϦɾSaa S ◦ Tailwind CS S ◦ Chromati c ◦ Mock Service Worke r ◦ Storybook
22. © ZOZO, Inc. 22 Fastify + Preactʹ͍ͭͯ Fastify Preact ALB ECS / Fargate
23. © ZOZO, Inc. 23 Fastify + Preactʹ͍ͭͯ Fastify Preact ALB ECS / Fargate HTM L + CSR HTMLʢSSR,SSGʣ CSR༻ͷJavaScript αʔόʔଆͰSEOʹॏཁͳ৘ใΛϨϯμϦϯάɺ·ͨ͸SS G CSR͢Δ෦෼͸CSR༻ͷJavaScriptͱͯ͠ੜ੒
24. © ZOZO, Inc. 24 Fastlyʹ͍ͭͯ - CDNΩϟογϡͷݕ౼ Fastify Preact ALB ECS / Fargate CD N Ωϟογϡ Ωϟογϡ ͞Εͨ HTML HTMLʢSSR,SSGʣ
25. © ZOZO, Inc. 25 Fastlyʹ͍ͭͯ - CDNΩϟογϡͷݕ౼ Fastify Preact ALB ECS / Fargate CD N Ωϟογϡ Ωϟογϡ ͞Εͨ HTML HTMLʢSSR,SSGʣ Ϣʔβʔ৘ใʹؔΘΒͳ͍෦෼Λ SSRɺSSG
26. © ZOZO, Inc. 26 Fastlyʹ͍ͭͯ - CDNΩϟογϡͷݕ౼ Fastify Preact ALB ECS / Fargate CD N Ωϟογϡ Ωϟογϡ ͞Εͨ HTML HTMLʢSSR,SSGʣ Ϣʔβʔ৘ใʹؔΘΒͳ͍෦෼Λ SSRɺSSG Ϣʔβʔ৘ใʹؔΘΔ෦෼ΛCSR
27. © ZOZO, Inc. 27 Fastlyʹ͍ͭͯ - ஈ֊తͳҠߦ Windows Server 
 (IIS) VBScript Load Balancer On-Premise /foo /bar /baz
28. © ZOZO, Inc. 28 ΞδΣϯμ • ϦϓϨΠεͷഎܠ • ϦϓϨΠεͷํ਑ • ࣮ࡍͷऔΓ૊Έ • ·ͱΊ
29. © ZOZO, Inc. 29 ·ͱΊ • WEAR WebͷϦϓϨΠεΛ։࢝͠·ͨ͠ • ٕज़໘ ◦ Ϟμϯͳٕज़ελοΫ΁ͷϦϓϨΠε ◦ SEOΛॏࢹͨ͠։ൃ • ϓϩμΫτ੒௕΁ͷ౔୆࡞Γ ◦ αʔϏεΛΑΓྑ͍Χλν΁ ◦ ਓࡐҭ੒ɺ૊৫՝୊ͷղܾ