カラーミーショップカートのAngular事情 / Angular circumstances of colorme-cart

カラーミーショップカートのAngular事情 / Angular circumstances of colorme-cart

GMO Developers Night #10 ペパボ EC テックカンファレンス 2020.06.24
https://pepabo.connpass.com/event/179445/

13b7e939232a839e46554746564dd62e?s=128

Kentaro Suda

June 24, 2020
Tweet

Transcript

  1. 1 Χϥʔϛʔγϣοϓ Χʔτͷ"OHVMBSࣄ৘ ϖύϘ&$ςοΫΧϯϑΝϨϯε &$ࣄۀ෦Χϥʔϛʔγϣοϓ ϓϩμΫτνʔϜɹਢా݈ଠ࿠

  2. 2 ਢా݈ଠ࿠!TVEBI ͷΓͨΖ͏!LV@ 2

  3. 3 ͷΓͨΖ͏!LV@ ਢా݈ଠ࿠!TVEBI 3

  4. 4 4 ࠓ೔͓࿩͢͠Δ͜ͱ ˔Χʔτͷ"OHVMBS+4Λ"OHVMBSʹ ΞοϓάϨʔυ͠Α͏ͱͯ͠Δ ˔࠷৽ͷ"OHVMBSΛऔΓೖΕͨ ΞϓϦετΞͷΞϓϦΛ։ൃͯ͠Δ

  5. 5 Χʔτͷ"OHVMBS+4Λ "OHVMBSʹΞοϓάϨʔ υ͠Α͏ͱͯ͠Δ 5

  6. 6 Χʔτͷ"OHVMBS+4Λ"OHVMBSʹΞοϓάϨʔυ͠Α͏ͱͯ͠Δ 7FSY "OHVMBSͱ͸ 7FSʙ 6

  7. 7 Χʔτͷ"OHVMBS+4Λ"OHVMBSʹΞοϓάϨʔυ͠Α͏ͱͯ͠Δ "OHVMBS΁ͷΞοϓάϨʔυํ๏ 7 ˔ ެࣜͰఏڙ͞Ε͍ͯΔ ˓ IUUQTBOHVMBSKQHVJEFVQHSBEF ˔ ίϯϙʔωϯτ୯ҐͰஔ׵͕Մೳ

  8. 8 "OHVMBS+4ͷ&0- 8

  9. 9 ·ͩ"OHVMBS+4Ͱফ໣ͯ͠Δͷʁ Χʔτͷ"OHVMBS+4Λ"OHVMBSʹΞοϓάϨʔυ͠Α͏ͱͯ͠Δ "OHVMBSΞοϓάϨʔυͷಈ͖͸೥͔Β ˓ &45ZQF4DSJQU ˓ 8FCQBDLಋೖ ☔ ओཁϓϩδΣΫτ͕͋ΔͷͰΞοϓάϨʔυۀ͸


    ยखؒͰ͔͠ਐΊΒΕͳ͍ ˓ ͍͍ͩͨ୭͔ҰਓͰ΍Δ͜ͱʹ ˓ ͦͷؒʹ΋"OHVMBS+4ͷίʔυ͕૿͍͑ͯ͘ 9
  10. 10 νʔϜͰਐΊΒΕΔΑ͏ʹ؀ڥΛ੔͑Δ Χʔτͷ"OHVMBS+4Λ"OHVMBSʹΞοϓάϨʔυ͠Α͏ͱͯ͠Δ ΞοϓάϨʔυ͕࢝·ͬͨ೥͔ΒνʔϜϝϯόʔ͕ ͍ͩͿೖΕସΘͬͨ ˓ "OHVMBSʹΞοϓάϨʔυ͢Δҙٛʹ͍ͭͯೝࣝͷ͢Γ߹ΘͤΛ͢Δ νʔϜϝϯόʔͷ"OHVMBSͷཧղ౓͕ภΓ͕͋Δ ˓ "OHVMBSษڧձΛ։࠵͢Δ

    ஔ׵ର৅͕ଟ͗͢Δ ˓ Ұ෦ࣗಈԽͯ͠ஔ׵͢Δ 10
  11. 11 "OHVMBSʹΞοϓάϨʔυ͢Δҙٛʹ͍ͭͯ ೝࣝͷ͢Γ߹ΘͤΛ͢Δ Χʔτͷ"OHVMBS+4Λ"OHVMBSʹΞοϓάϨʔυ͠Α͏ͱͯ͠Δ ˔ ֶशίετΛ཈͍͑ͨ ˓ "OHVMBS+4ʹ׳Ε͍ͯΔϝϯόʔ͕ଟ͍ ˓ 7VFKT΍3FBDU΁ͷҠߦ΋ݕ౼͕ͨ͠ɺ


    ͦΕΒʹҠߦ͍ͨ͠ڧ͍ؾ͕࣋ͪ͋Δਓ͸͍ͳ͔ͬͨ ˔ νʔϜͷεέʔϥϏϦςΟΛ্͍͛ͨ ˓ νʔϜϝϯόʔͷεΩϧʹدΒͣҰఆͷ඼࣭ΛอͯΔ͜ͱ͕ॏཁ ˓ "OHVMBS$-*΍ඪ४ϥΠϒϥϦͳͲσϑΥϧτηοτ͕ڧ͍ 11
  12. 12 "OHVMBSʹΞοϓάϨʔυ͢Δҙٛʹ͍ͭͯ ೝࣝͷ͢Γ߹ΘͤΛ͢Δ Χʔτͷ"OHVMBS+4Λ"OHVMBSʹΞοϓάϨʔυ͠Α͏ͱͯ͠Δ ը໘୯ҐͰ͸ͳ͘ίϯϙʔωϯτ୯ҐͰஔ׵͍ͨ͠ ˓ ը໘ʹ࣍ʑͱػೳ͕௥Ճ͞Ε͍ͯ͘ ˓ ೋॏ؅ཧ͸ͳΔ΂͘ආ͚͍ͨ ˓

    ެࣜͰఏڙ͞Ε͍ͯΔํ๏ͳΒ҆৺ͯ͠ਐΊΒΕΔ 12
  13. 13 "OHVMBSษڧձΛ։࠵͢Δ Χʔτͷ"OHVMBS+4Λ"OHVMBSʹΞοϓάϨʔυ͠Α͏ͱͯ͠Δ ˔ ΞοϓάϨʔυۀΛ͠ͳ͍ਓ΋Ͳ͔͜ͰؔΘΔ͜ͱʹͳΔ ˓ ·ͣ͸ҰਓͰ"OHVMBS΁ͷΞοϓάϨʔυΛਐΊͨ ˓ ΞοϓάϨʔυޙͷίʔυΛϨϏϡʔͯ͠΋Β͏ͷ͸େม ˓

    ৽نͰ௥Ճ͢Δίʔυ͸"OHVMBSͰॻ͍ͯ΋Β͍͍ͨ ˔ ࣗ෼ࣗ਎΋"OHVMBS΁ͷ஌͕ࣝ଍Γ͍ͯͳ͔ͬͨ ˓ ΞοϓάϨʔυͷํ๏͸ެࣜͰ༻ҙ͞Ε͍ͯΔ͕
 ࣮ࡍͷίʔυʹམͱ͠ࠐΉͷ͸ผ໰୊ 13
  14. 14 "OHVMBSษڧձΛ։࠵͢Δ Χʔτͷ"OHVMBS+4Λ"OHVMBSʹΞοϓάϨʔυ͠Α͏ͱͯ͠Δ ڭࡐ͸ެࣜυΩϡϝϯτΛར༻ ˓ ೔ຊޠͷϖʔδ΋ॆ࣮͍ͯͯ͜͠ΕΛಡΊ͹Ұ௨Γͷ͜ͱ͕Θ͔Δ ˓ αϯϓϧίʔυ͕4UBDL#MJU[ʹ͋ΔͷͰखܰʹίʔυΛ࣮ߦ͠ͳ͕Β
 ֬ೝͰ͖Δ िʙճͰ࣌ؒͷ࿮

    ˓ (PPHMF.FFUͰܨ͍ͰϩʔςʔγϣϯͰճ͠ಡΈ ˓ ࣭໰΍ٙ໰͕͋Ε͹దٓࢭΊͯղܾ͢Δ 14
  15. 15 Ұ෦ࣗಈԽͯ͠ஔ׵͢Δ Χʔτͷ"OHVMBS+4Λ"OHVMBSʹΞοϓάϨʔυ͠Α͏ͱͯ͠Δ ˔ ஍ಓʹ࡞ۀ͍ͯͨ͠ΒΩϦ͕ͳ͍ ˓ ચ͍ग़ͨ͠౰ॳɺର৅ͱͳΔϑΝΠϧ͸ݸ΋͋ͬͨ ˓ ࡞ۀ͍ͯ͠Δؒʹ΋ର৅ϑΝΠϧ͸૿͑ଓ͚Δ ˔

    ࣗಈԽͰ͖ΔՕॴ͕͋Ε͹ɺͦΕ͸ࠓޙ΋໾ʹཱͭ ˓ ஔ׵͕׬ྃ͠"OHVMBS͚ͩʹͳͬͨޙ΋ॻ͖ଓ͚ͳ͚Ε͹ͳΒͳ͍ 15
  16. 16 Ұ෦ࣗಈԽͯ͠ஔ׵͢Δ Χʔτͷ"OHVMBS+4Λ"OHVMBSʹΞοϓάϨʔυ͠Α͏ͱͯ͠Δ ⛏ 0QFO"1*(FOFSBUPSΛ࢖ͬͯ"1*ΫϥΠΞϯτΛ
 ࣗಈੜ੒͢Δ ˓ IUUQTHJUIVCDPN0QFO"1*5PPMTPQFOBQJHFOFSBUPS ⛏ "OHVMBSͷϓϩδΣΫτʹ΋ར༻͞Ε͍ͯΔख๏

    ˓ IUUQTBOHVMBSTDIVMF 16
  17. 17 Χʔτͷ"OHVMBS+4Λ"OHVMBSʹΞοϓάϨʔυ͠Α͏ͱͯ͠Δ 17 "1*ఆٛΛ 0QFO"1*Ͱهड़͢Δ

  18. 18 Χʔτͷ"OHVMBS+4Λ"OHVMBSʹΞοϓάϨʔυ͠Α͏ͱͯ͠Δ 18

  19. 19 Χʔτͷ"OHVMBS+4Λ"OHVMBSʹΞοϓάϨʔυ͠Α͏ͱͯ͠Δ "OHVMBSΞοϓάϨʔυΛਐΊͯΈͯ 19 ˔ ҰਓͰ͸ͳ͘νʔϜશମͰ"OHVMBSʹ৮ΕΔ׆ಈ͕େࣄ ˔ ࣗಈԽͰগ͠Ͱ΋ָΛ͢ΔʢϨʔϧʹ৐Δʣ

  20. 20 ࠷৽ͷ"OHVMBSΛ औΓೖΕͨΞϓϦετΞͷ ΞϓϦΛ։ൃͯ͠Δ 20

  21. 21 ঎඼ͷΦϓγϣϯϑΥʔϜΛࣗ༝ʹઃఆͰ͖ΔΞϓϦ ࠷৽ͷ"OHVMBSΛऔΓೖΕͨΞϓϦετΞͷΞϓϦΛ։ൃͯ͠Δ ˔ ৭ɺαΠζҎ֎ͷදݱͮ͠Β͍ΦϓγϣϯͷઃఆΛ
 ΞϓϦʹ੾Γग़͢ ˔ "OHVMBS&MFNFOUTΛར༻ͯ͠γϣοϓϖʔδʹ
 ϑΥʔϜΛૠೖ͢Δ 21

  22. 22 "OHVMBS&MFNFOUTͱ͸ ࠷৽ͷ"OHVMBSΛऔΓೖΕͨΞϓϦετΞͷΞϓϦΛ։ൃͯ͠Δ $VTUPN &MFNFOUT 22 "OHVMBS $PNQPOFOU

  23. 23 ࠷৽ͷ"OHVMBSΛऔΓೖΕͨΞϓϦετΞͷΞϓϦΛ։ൃͯ͠Δ 23

  24. 24 ΞϓϦͷڍಈ ࠷৽ͷ"OHVMBSΛऔΓೖΕͨΞϓϦετΞͷΞϓϦΛ։ൃͯ͠Δ 24 "OHVMBS &MFNFOUTΞϓϦ ΞϓϦͷϏϧυϑΝΠϧ͕ ঎඼ϖʔδಡΈࠐΈ࣌ʹ ϩʔυ͞ΕΔ ΞϓϦͷίϯϙʔωϯτ͕

    $VTUPN&MFNFOUTͱͯ͠ ૠೖ͞ΕΔ
  25. 25 ΞϓϦͱͯ͠੾Γग़͢ҙٛ ࠷৽ͷ"OHVMBSΛऔΓೖΕͨΞϓϦετΞͷΞϓϦΛ։ൃͯ͠Δ ࣮͸ಛఆγϣοϓݶఆػೳͷϦϓϨʔε ˓ ͳͷͰطʹίʔυ͸ଘࡏ͢Δ͕ɺ͜ΕʹखΛೖΕΔͷ͸େม ˓ ΞϓϦͳΒطଘγεςϜͷ؀ڥͷӨڹΛड͚ʹ͍͘ Ұൠ։์͸͢Δ͕ඪ४ػೳͱͯ͠ఏڙ͠ͳ͍ ˓

    ϦϦʔεޙʹ͞Βʹػೳ֦ுΛͨ͘͠ͳͬͨࡍʹɺ
 γϣοϓͷܖ໿ϓϥϯΑΓ΋ΞϓϦͷϓϥϯͰػೳఏڙ͢Δํ͕
 ֦ுੑ͕ߴ͍ 25
  26. 26 "OHVMBS&MFNFOUTͷҹ৅ ࠷৽ͷ"OHVMBSΛऔΓೖΕͨΞϓϦετΞͷΞϓϦΛ։ൃͯ͠Δ ˔ ҰػೳΛ"OHVMBSΞϓϦͱͯ͠ॻ͚Δͷ͸ศར ˓ ͜Ε͕طଘγεςϜͷվमͱͳΔͱ1)1 +4Λॻ͔ͳ͍ͱ
 ͍͚ͳ͘ͳΔͷͰ͠ΜͲ͍ ˔

    "OHVMBSͷࢥ૝͕ݟ͑ͯ໘ന͍ ˓ ϑϧελοΫͳϑϩϯτΤϯυϑϨʔϜϫʔΫ͔ͩΒͦ͜Ͱ͖Δ͜ͱ ˓ ੩తͳ8FCΛ࡞ΔͷͰ͸ͳ͘ɺ੩తͳ8FCʹ૊Έࠐ·Ε͍ͯ͘ 26
  27. 27 27 ·ͱΊ

  28. 28 ·ͱΊ Χʔτͷ"OHVMBSΞοϓάϨʔυʹ޲͚ͯ
 νʔϜશମͰਐΊ͍͚ͯΔΑ͏ʹ৭ʑͳΞΫγϣϯʹ
 औΓ૊ΜͰ͍·͢ ࠷৽ͷ"OHVMBSΛར༻ͨ͠ΞϓϦ΋ઈࢍ։ൃதͰ͢ "OHVMBS͸͍͍ͧ 28