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

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   ยखؒͰ͔͠ਐΊΒΕͳ͍
   ˓ ͍͍ͩͨ୭͔ҰਓͰ΍Δ͜ͱʹ
   ˓ ͦͷؒʹ΋"OHVMBS+4ͷίʔυ͕૿͍͑ͯ͘
   9
   

   View Slide

10. 10
    νʔϜͰਐΊΒΕΔΑ͏ʹ؀ڥΛ੔͑Δ
    Χʔτͷ"OHVMBS+4Λ"OHVMBSʹΞοϓάϨʔυ͠Α͏ͱͯ͠Δ
    ΞοϓάϨʔυ͕࢝·ͬͨ೥͔ΒνʔϜϝϯόʔ͕
    ͍ͩͿೖΕସΘͬͨ
    ˓ "OHVMBSʹΞοϓάϨʔυ͢Δҙٛʹ͍ͭͯೝࣝͷ͢Γ߹ΘͤΛ͢Δ
    νʔϜϝϯόʔͷ"OHVMBSͷཧղ౓͕ภΓ͕͋Δ
    ˓ "OHVMBSษڧձΛ։࠵͢Δ
    ஔ׵ର৅͕ଟ͗͢Δ
    ˓ Ұ෦ࣗಈԽͯ͠ஔ׵͢Δ
    10
    

    View Slide

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

    ͦΕΒʹҠߦ͍ͨ͠ڧ͍ؾ͕࣋ͪ͋Δਓ͸͍ͳ͔ͬͨ
    ˔ νʔϜͷεέʔϥϏϦςΟΛ্͍͛ͨ
    ˓ νʔϜϝϯόʔͷεΩϧʹدΒͣҰఆͷ඼࣭ΛอͯΔ͜ͱ͕ॏཁ
    ˓ "OHVMBS$-*΍ඪ४ϥΠϒϥϦͳͲσϑΥϧτηοτ͕ڧ͍
    11
    

    View Slide

12. 12
    "OHVMBSʹΞοϓάϨʔυ͢Δҙٛʹ͍ͭͯ
    ೝࣝͷ͢Γ߹ΘͤΛ͢Δ
    Χʔτͷ"OHVMBS+4Λ"OHVMBSʹΞοϓάϨʔυ͠Α͏ͱͯ͠Δ
    ը໘୯ҐͰ͸ͳ͘ίϯϙʔωϯτ୯ҐͰஔ׵͍ͨ͠
    ˓ ը໘ʹ࣍ʑͱػೳ͕௥Ճ͞Ε͍ͯ͘
    ˓ ೋॏ؅ཧ͸ͳΔ΂͘ආ͚͍ͨ
    ˓ ެࣜͰఏڙ͞Ε͍ͯΔํ๏ͳΒ҆৺ͯ͠ਐΊΒΕΔ
    12
    

    View Slide

13. 13
    "OHVMBSษڧձΛ։࠵͢Δ
    Χʔτͷ"OHVMBS+4Λ"OHVMBSʹΞοϓάϨʔυ͠Α͏ͱͯ͠Δ
    ˔ ΞοϓάϨʔυۀΛ͠ͳ͍ਓ΋Ͳ͔͜ͰؔΘΔ͜ͱʹͳΔ
    ˓ ·ͣ͸ҰਓͰ"OHVMBS΁ͷΞοϓάϨʔυΛਐΊͨ
    ˓ ΞοϓάϨʔυޙͷίʔυΛϨϏϡʔͯ͠΋Β͏ͷ͸େม
    ˓ ৽نͰ௥Ճ͢Δίʔυ͸"OHVMBSͰॻ͍ͯ΋Β͍͍ͨ
    ˔ ࣗ෼ࣗ਎΋"OHVMBS΁ͷ஌͕ࣝ଍Γ͍ͯͳ͔ͬͨ
    ˓ ΞοϓάϨʔυͷํ๏͸ެࣜͰ༻ҙ͞Ε͍ͯΔ͕

    ࣮ࡍͷίʔυʹམͱ͠ࠐΉͷ͸ผ໰୊
    13
    

    View Slide

14. 14
    "OHVMBSษڧձΛ։࠵͢Δ
    Χʔτͷ"OHVMBS+4Λ"OHVMBSʹΞοϓάϨʔυ͠Α͏ͱͯ͠Δ
    ڭࡐ͸ެࣜυΩϡϝϯτΛར༻
    ˓ ೔ຊޠͷϖʔδ΋ॆ࣮͍ͯͯ͜͠ΕΛಡΊ͹Ұ௨Γͷ͜ͱ͕Θ͔Δ
    ˓ αϯϓϧίʔυ͕4UBDL#MJU[ʹ͋ΔͷͰखܰʹίʔυΛ࣮ߦ͠ͳ͕Β

    ֬ೝͰ͖Δ
    िʙճͰ࣌ؒͷ࿮
    ˓ (PPHMF.FFUͰܨ͍ͰϩʔςʔγϣϯͰճ͠ಡΈ
    ˓ ࣭໰΍ٙ໰͕͋Ε͹దٓࢭΊͯղܾ͢Δ
    14
    

    View Slide

15. 15
    Ұ෦ࣗಈԽͯ͠ஔ׵͢Δ
    Χʔτͷ"OHVMBS+4Λ"OHVMBSʹΞοϓάϨʔυ͠Α͏ͱͯ͠Δ
    ˔ ஍ಓʹ࡞ۀ͍ͯͨ͠ΒΩϦ͕ͳ͍
    ˓ ચ͍ग़ͨ͠౰ॳɺର৅ͱͳΔϑΝΠϧ͸ݸ΋͋ͬͨ
    ˓ ࡞ۀ͍ͯ͠Δؒʹ΋ର৅ϑΝΠϧ͸૿͑ଓ͚Δ
    ˔ ࣗಈԽͰ͖ΔՕॴ͕͋Ε͹ɺͦΕ͸ࠓޙ΋໾ʹཱͭ
    ˓ ஔ׵͕׬ྃ͠"OHVMBS͚ͩʹͳͬͨޙ΋ॻ͖ଓ͚ͳ͚Ε͹ͳΒͳ͍
    15
    

    View Slide

16. 16
    Ұ෦ࣗಈԽͯ͠ஔ׵͢Δ
    Χʔτͷ"OHVMBS+4Λ"OHVMBSʹΞοϓάϨʔυ͠Α͏ͱͯ͠Δ
    ⛏ 0QFO"1*(FOFSBUPSΛ࢖ͬͯ"1*ΫϥΠΞϯτΛ

    ࣗಈੜ੒͢Δ
    ˓ IUUQTHJUIVCDPN0QFO"1*5PPMTPQFOBQJHFOFSBUPS
    ⛏ "OHVMBSͷϓϩδΣΫτʹ΋ར༻͞Ε͍ͯΔख๏
    ˓ IUUQTBOHVMBSTDIVMF
    16
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    ΞϓϦʹ੾Γग़͢
    ˔ "OHVMBS&MFNFOUTΛར༻ͯ͠γϣοϓϖʔδʹ

    ϑΥʔϜΛૠೖ͢Δ
    21
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    γϣοϓͷܖ໿ϓϥϯΑΓ΋ΞϓϦͷϓϥϯͰػೳఏڙ͢Δํ͕

    ֦ுੑ͕ߴ͍
    25
    

    View Slide

26. 26
    "OHVMBS&MFNFOUTͷҹ৅
    ࠷৽ͷ"OHVMBSΛऔΓೖΕͨΞϓϦετΞͷΞϓϦΛ։ൃͯ͠Δ
    ˔ ҰػೳΛ"OHVMBSΞϓϦͱͯ͠ॻ͚Δͷ͸ศར
    ˓ ͜Ε͕طଘγεςϜͷվमͱͳΔͱ1)1+4Λॻ͔ͳ͍ͱ

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

    View Slide

27. 27
    27
    ·ͱΊ
    

    View Slide

28. 28
    ·ͱΊ
    Χʔτͷ"OHVMBSΞοϓάϨʔυʹ޲͚ͯ

    νʔϜશମͰਐΊ͍͚ͯΔΑ͏ʹ৭ʑͳΞΫγϣϯʹ

    औΓ૊ΜͰ͍·͢
    ࠷৽ͷ"OHVMBSΛར༻ͨ͠ΞϓϦ΋ઈࢍ։ൃதͰ͢
    "OHVMBS͸͍͍ͧ
    28
    

    View Slide