Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ZOZOのグローバルECのフロントエンドアーキテクチャ設計 / Frontend Archit...

AmatsukiKu
November 25, 2018

ZOZOのグローバルECのフロントエンドアーキテクチャ設計 / Frontend Architecture Design of ZOZO

HTML5カンファレンス2018で登壇した内容です。

AmatsukiKu

November 25, 2018
Tweet

More Decks by AmatsukiKu

Other Decks in Programming

Transcript

  1. Copyright © ZOZO Technologies, Inc. All Right Reserved. גࣜձࣾ;0;0ςΫϊϩδʔζ ։ൃ෦

    ςοΫϦʔυ ݖक ݈࢚ ;0;0ͷάϩʔόϧ&$ͷ ϑϩϯτΤϯυΞʔΩςΫνϟ ઃܭ
  2. ˓ ೔ຊ࠷େڃͷϑΝογϣϯγϣοϐϯάαΠτΞϓϦ ˓  Ҏ্ͷγϣοϓɺ Ҏ্ͷϒϥϯυͷऔΓѻ͍ ˓ ৗ࣌ສ఺Ҏ্ͷ঎඼ΞΠςϜ਺ͱຖ೔ฏۉ ఺Ҏ্ͷ৽ண ঎඼Λܝࡌ

    ˓ ଈ೔഑ૹαʔϏε ΪϑτϥοϐϯάαʔϏε πέ෷͍ ͳͲ IUUQ[P[PKQ Copyright © ZOZO Technologies, Inc. All Right Reserved.
  3. ΞʔΩςΫνϟʹ͓͚Δཧ૝ͱݱ࣮ͷဃ཭ Copyright © ZOZO Technologies, Inc. All Right Reserved. σʔλ૚

    ΞϓϦέʔγϣϯ૚ ϓϨθϯςʔγϣϯ૚ ϑϩϯτΤϯυ όοΫΤϯυ ཧ૝ ϑϩϯτΤϯυ όοΫΤϯυ ݱ࣮ σʔλ૚ ΞϓϦέʔγϣϯ૚ ϓϨθϯςʔγϣϯ૚ ݱ࣮͸ɺϑϩϯτΤϯυʹ΋ϏδωεϩδοΫ΍ɺϩʔΧϧετϨʔδ΁ͷӬଓԽؚ͕·Εɺ όοΫΤϯυ͸ϓϨθϯςʔγϣϯ૚Ͱར༻͞ΕΔ୯ҐͷσʔλΛ༻ҙ͢Δ͜ͱ΋͋Δ
  4. ղܾํ๏ʢΠϝʔδʣ Copyright © ZOZO Technologies, Inc. All Right Reserved. ϑϩϯτΤϯυ

    όοΫΤϯυ σʔλ૚ ΞϓϦέʔγϣϯ૚ ϓϨθϯςʔγϣϯ૚ Ξϓϩʔν ϏδωεϩδοΫΛ ϑϩϯτͰ࣋ͭ Ξϓϩʔν ͦΕͧΕͰ ΞʔΩςΫνϟΛ࣋ͭ ϑϩϯτΤϯυ σʔλ૚ ΞϓϦέʔγϣϯ૚ ϓϨθϯςʔγϣϯ૚ όοΫΤϯυ σʔλ૚ ΞϓϦέʔγϣϯ૚ ϓϨθϯςʔγϣϯ૚
  5. ղܾํ๏ʢΠϝʔδʣ Copyright © ZOZO Technologies, Inc. All Right Reserved. ϑϩϯτΤϯυ

    όοΫΤϯυ σʔλ૚ ΞϓϦέʔγϣϯ૚ ϓϨθϯςʔγϣϯ૚ Ξϓϩʔν ϏδωεϩδοΫΛ ϑϩϯτͰ࣋ͭ Ξϓϩʔν ͦΕͧΕͰ ΞʔΩςΫνϟΛ࣋ͭ ϑϩϯτΤϯυ σʔλ૚ ΞϓϦέʔγϣϯ૚ ϓϨθϯςʔγϣϯ૚ όοΫΤϯυ σʔλ૚ ΞϓϦέʔγϣϯ૚ ϓϨθϯςʔγϣϯ૚
  6. ϑϩϯτΤϯυ΁ͷΞʔΩςΫνϟʔͷಋೖ Copyright © ZOZO Technologies, Inc. All Right Reserved. ΫϦʔϯΞʔΩςΫνϟͷࢥ૝ΛऔΓೖΕ

    Δ͜ͱʹͨ͠ ΫϦʔϯΞʔΩςΫνϟͷϙΠϯτ ɾ֎ͷԁ͸಺ͷԁʹґଘ ɾ%#ͳͲͷΠϯϑϥʹ֘౰͢Δ෦෼΋ 6*ಉ༷֎ଆͱͯ͠ఆٛ ɾϓϨθϯςʔγϣϯ૚΍σʔλ૚΁ͷ઀ ଓʹ֘౰͢Δ෦෼͕*OUFSGBDF "EBQUFSͱ͍͏ܗͰந৅Խ ग़యɿIUUQTCMPHDMFBODPEFSDPNVODMFCPCUIFDMFBOBSDIJUFDUVSFIUNM
  7. શମͷΞʔΩςΫνϟͷΠϝʔδਤ Copyright © ZOZO Technologies, Inc. All Right Reserved. 6TF$BTFT

    &OUJUJFT *OUFSGBDF"EBQUFST 6TF$BTFT &OUJUJFT *OUFSGBDF"EBQUFST &YUFSOBM*OUFSGBDFT ϑϩϯτΤϯυ όοΫΤϯυ %# ϝʔϧ഑৴ج൫ 8FCϒϥ΢β 8FC ϩʔΧϧετϨʔδ
  8. "1*ʹ࢒Δ໰୊ Copyright © ZOZO Technologies, Inc. All Right Reserved. 6TF$BTFT

    &OUJUJFT *OUFSGBDF"EBQUFST 6TF$BTFT &OUJUJFT *OUFSGBDF"EBQUFST &YUFSOBM*OUFSGBDFT ϑϩϯτΤϯυ όοΫΤϯυ %# ϝʔϧ഑৴ج൫ 8FCϒϥ΢β 8FC ϩʔΧϧετϨʔδ ໰୊͕࢒͍ͬͯΔ
  9. (SBQI2-ʹ͍ͭͯ (SBQI2-͸"1*ͷͨΊͷΫΤϦݴޠ Copyright © ZOZO Technologies, Inc. All Right Reserved.

    { user(id: "1000") { name } items { id, price } } { "data": { "user": { "name": "Kenji" }, "items": [ { "id": 1, "price": 980 }, { "id": 2, "price": 2480 } ] } } ΫΤϦ Ϩεϙϯε
  10. ΤϯυϙΠϯτʹΑͬͯҟͳΔܕ "1*͸௨৴ྔΛߟྀͯ͠ɺಉ͡ϦιʔεΛࢀর͢ΔσʔλͰ΋ ϑΟʔϧυΛݮΒͨ͠ϨεϙϯεΛฦ͢ ྫʣΞΠςϜৄࡉ"1*ͱΞΠςϜҰཡ"1* ɾ*UFN JE OBNF QSJDF EFTDSJQUJPO DBUFHPSZ

    ɾ-JTU*UFN JE OBNF QSJDF ‎Ϧιʔε୯ҐͰ4UBUFΛ࢖Θͣɺ7JFXʹؔ͢Δ୯ҐͰঢ়ଶΛ؅ཧ Copyright © ZOZO Technologies, Inc. All Right Reserved.
  11. ϨεϙϯεͰมߋͨ͠ϦιʔεΛฦ͢ ྫʣDBSUDIFDLPVUͷϨεϙϯε Copyright © ZOZO Technologies, Inc. All Right Reserved.

    { "status": "ok" } { "status": "ok", "data": { "cart": { "items": [] }, "order": { "id": 1, "item_ids": [1, 5, 7], "total_price": 8500 } } } ໰୊఺ɿ "1*಺෦Ͱඇಉظʹมߋ͞ΕΔ ৔߹ʹରԠͰ͖ͳ͍
  12. վળޙΛ·ͱΊͨਤ Copyright © ZOZO Technologies, Inc. All Right Reserved. 6TF$BTFT

    &OUJUJFT *OUFSGBDF"EBQUFST 6TF$BTFT &OUJUJFT *OUFSGBDF"EBQUFST &YUFSOBM*OUFSGBDFT ϑϩϯτΤϯυ όοΫΤϯυ %# ϝʔϧ഑৴ج൫ 8FCϒϥ΢β 8FC ϩʔΧϧετϨʔδ 7VFYͰϖʔδ୯Ґ ͷঢ়ଶΛ؅ཧ
  13. ओͳσΟϨΫτϦߏ੒ͷൺֱ Copyright © ZOZO Technologies, Inc. All Right Reserved. TSD

    c DPNQPOFOUT c TUPSF c Ϧιʔε୯Ґ c ϖʔδ୯Ґ c TFSWJDF c UZQFT TSD c DPNQPOFOUT c TUPSF c ϖʔδ୯Ґ c JOUFSGBDF c BEBQUFST c BQJ4FSWJDFT c UZQFT c TFSWJDF*NQMFNFOUT c SFQPTJUPSZ*NQMFNFOUT c BQQMJDBUJPO c TFSWJDFT c NPEFMT c EPNBJO c FOUJUJFT c SFQPTJUPSJFT c WBMVF0CKFDUT