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

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

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ʹΞοϓάϨʔυ͠Α͏ͱͯ͠Δ 7FS
   Y "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ΞοϓάϨʔυͷಈ͖͸೥͔Β
   ˓ &4
   
   5ZQF4DSJQU
   ˓ 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