WEAR Webͷ͜Ε·Ͱͷ՝୊ͱ ϦϓϨΠεͷํ਑ 2022/02/21 ZOZO Tech Talk #3 גࣜձࣾZOZ O ϝσΟΞ։ൃຊ෦ WEAR෦ɹϑϩϯτΤϯυϒϩοΫ ౻Ҫ ຑҥ Copyright © ZOZO, Inc.

© ZOZO, Inc. גࣜձࣾZOZ O ϝσΟΞ։ൃຊ෦ WEAR෦ɹϑϩϯτΤϯυϒϩοΫ ౻Ҫ ຑҥ 2015೥5݄ೖࣾ ೖࣾޙ͸WEAR WebαΠτͷ৽ػೳ։ൃ΍طଘػೳվ मʹैࣄ͠ɺݱࡏϦϓϨΠεΛਐΊ͍ͯΔɻ 2

© ZOZO, Inc. 3 https://wear.jp/ ● ϑΝογϣϯίʔσΟωʔτΞϓϦ ● 1,500ສμ΢ϯϩʔυಥഁɺίʔσΟωʔτ౤ߘ૯਺͸1,200ສ݅ Ҏ্ʢ2021೥12݄຤࣌఺ʣ ● ϐοΫΞοϓλά͔Β࠷৽ͷτϨϯυΛνΣοΫ ● ίʔσΟωʔτண༻ΞΠςϜΛϒϥϯυެࣜαΠτͰߪೖՄೳ ● 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๊͕͍͑ͯͨ՝୊ᶄ ● ΤϯδχΞͷ֬อɾ࠾༻͕ࠔ೉ ○ jQuery΍VBScriptͷΤϯδχΞͷ࠾༻͕ࠔ೉ ○ ϨΨγʔٕज़ͷ࢖༻ʹΑΔΩϟϦΞෆ҆

© 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Λॏࢹͨ͠։ൃ ● ϓϩμΫτ੒௕΁ͷ౔୆࡞Γ ○ αʔϏεΛΑΓྑ͍Χλν΁ ○ ਓࡐҭ੒ɺ૊৫՝୊ͷղܾ

No content