ムームードメイン ショッピングカートを支える技術! / muumuu-shopping-cart-tech

【福岡開催 feat.ペパボ】Cookpad Tech Kitchen #12
Premium Talk in Fukuoka　〜開発の裏側をお見せします〜
https://cookpad.connpass.com/event/64844/

Transcript

1. தଜ
   ޫ༎
   
   (.0
   1FQBCP
   *OD
   
   $PDLQBE
   5FDI
   ,JUDIFO
    ϜʔϜʔυϝΠϯ
   γϣοϐϯάΧʔτػೳΛࢧ͑Δٕज़
2. ࣗݾ঺հ wதଜޫ༎
   !MJUFODBUU
   wΤϯδχΞ
   w(.0ϖύϘॴଐ
   wϗεςΟϯάࣄۀ෦ϜʔϜʔυϝΠϯάϧʔϓ
   w೥݄ೖࣾ
   wϖύϘΧϨοδظੜ
   w޷͖ͳϝιου
   "SSBZQFSNVUBUJPO
3. ϖύϘΧϨοδͱ͸ʁ
4. ϖύϘΧϨοδ w ೖࣾޙ໿ϲ݄ͷ8FC։ൃݚम෇͖த్࠾༻ϓϩάϥϜ
   w 8FCۀքະܦݧऀ޲͚
5. ϜʔϜʔυϝΠϯ
6. ϜʔϜʔυϝΠϯ wυϝΠϯऔಘ΍؅ཧͳͲ؆୯ʹߦ͑ΔυϝΠϯ౷߹αʔϏε
   wࠓ೥ͰαʔϏε։͔࢝Β೥໨ʂ
   wυϝΠϯ͓ਃ͠ࠐΈ਺͸ສ݅Λಥഁ
7. ೥݄೔ʹ
   γϣοϐϯάΧʔτػೳΛϦϦʔε
8. γϣοϐϯάΧʔτػೳΛࢧ͑Δٕज़
   ʹ͍ͭͯͷ͓࿩ IUUQTQFQBCPDPNOFXTJOGPSNBUJPO
9. Ϩδϡϝ wΧʔτػೳ։ൃͷഎܠͱ໨త
   wΧʔτػೳͷ঺հ
   wΧʔτػೳΛࢧ͑Δٕज़
   w·ͱΊ
   ˞
   ͜͜ΑΓҎ߱͸Χʔτػೳͱදه͠·͢
10. Χʔτػೳ։ൃͷഎܠ
11. طଘͷυϝΠϯऔಘϑϩʔͷ໰୊఺ wओʹύλʔϯͷऔಘ ߪೖ ϑϩʔ͕͋Δ
    wτοϓ͔ΒͷݕࡧͰ͸υϝΠϯ͔ͭͣͭ͠औಘͰ͖ͳ͍
    wҰׅऔಘ༻ͷϖʔδͷ৔߹ɺܾࡁํ๏΍औಘՄೳυϝΠϯʹҰ෦੍ݶ͋Γ
12. طଘͷσβΠϯʹ͍ͭͯ wσΟεϓϨΠͷߴղ૾౓Խʹର͢ΔରԠ͕஗Ε͍ͯΔ
13. Χʔτػೳ։ൃͷ໨త wτοϓͷυϝΠϯݕࡧ݁Ռ͔ΒͷυϝΠϯෳ਺औಘରԠ
    wऔಘ׬ྃ·ͰΛ΋ͬͱγϯϓϧʹΘ͔Γ΍͘͢
    wࠓޙʹ޲͚ͨσβΠϯͷ࠶ߏஙΛߦ͏
14. ࣮ࡍΧʔτػೳ͕
    Ͳ͏͍ͬͨ΋ͷʹͳͬͨͷ͔ʁ
15. Χʔτػೳͷ঺հ wτοϓ͔ΒͷυϝΠϯͷෳ਺औಘՄೳʹʂ
16. wτοϓ͔ΒͷυϝΠϯͷෳ਺औಘՄೳʹʂ
    wΧʔτ͔Β࠷୹εςοϓͰऔಘ׬ྃʂʂ Χʔτػೳͷ঺հ
17. wτοϓ͔ΒͷυϝΠϯͷෳ਺औಘՄೳʹʂ
    wΧʔτ͔Β࠷୹εςοϓͰऔಘ׬ྃʂʂ
    wϨεϙϯγϒσβΠϯԽʂʂʂ Χʔτػೳͷ঺հ
18. ϜʔϜʔυϝΠϯ࢖ͬͯΔ͚Ͳɺ
    ͦͷϖʔδݟͨ͜ͱͳ͍Μ͚ͩͲʜ
19. ˞ݱঢ়Ͱ͸
    υϝΠϯͭҎ্͕ೖͬͯͳ͍ͱ
    Χʔτϖʔδ΁ߦ͖·ͤΜ
20. ΧʔτػೳΛࢧ͑Δٕज़
21. ΧʔτػೳΛࢧ͑Δٕज़ wͦͷ
    3VCZ
    PO
    3BJMT
    wڧ͍ؾ࣋ͪͰ1)1͔Β3BJMT΁
    wͦͷ
    7VFKT
    w+BWB4DSJQU؀ڥΛ੔උͭͭ͠K2VFSZ͔Βͷ୤٫
    wͦͷ
    ελΠϧΨΠυ
    wσβΠϯߏஙͱ8FC։ൃΛεϜʔζʹ͢Δ
22. ΧʔτػೳΛࢧ͑Δٕज़
    ͦͷ̍
    3VCZ
    PO
    3BJMT
23. Χʔτػೳ͸΄΅3BJMTͰ࣮૷ʂ
    ʢϖʔδɺܾࡁपΓɺ"1*ͳͲ΋ʣ
24. ϜʔϜʔͷ࢖༻ݴޠߏ੒ ɾυϝΠϯݕࡧτοϓ
    ɾυϝΠϯҠ؅
    ɾҰׅऔಘϖʔδ
    ɾϓϨϛΞϜυϝΠϯϖʔδ ɾεϚϗ༻αΠτ
    ɾ৽υϝΠϯϖʔδ
    ɾΦʔΫγϣϯϖʔδ
    ɾ"1*ػೳ 1$༻αΠτ ɾυϝΠϯ؅ཧϖʔδ
    
    ίϯτϩʔϧύωϧ ɾΧʔτػೳ։ൃલ
25. ɾεϚϗ༻αΠτ
    ɾ৽υϝΠϯϖʔδ
    ɾΦʔΫγϣϯϖʔδ
    ɾ"1*ػೳ
    ɾΧʔτػೳ
    ɾΧʔτ༻"1* ɾυϝΠϯݕࡧτοϓ
    ɾυϝΠϯҠ؅
    ɾҰׅऔಘϖʔδ
    ɾϓϨϛΞϜυϝΠϯϖʔδ 1$༻αΠτ ϜʔϜʔͷ࢖༻ݴޠߏ੒ ɾυϝΠϯ؅ཧϖʔδ
    
    ίϯτϩʔϧύωϧ ɾΧʔτػೳ։ൃޙ
26. w ϜʔϜʔυϝΠϯ͸ΞϓϦͷ։ൃݴޠͷେ෦෼͕1)1
    ˠ
    ϊʔϑϨʔϜϫʔΫͷͨΊ։ൃޮ཰ѱ͍
    w ݱϜʔϜʔΤϯδχΞ͸3BJMTͰͷ։ൃܦݧͷํ͕ଟ͍
    w ϖύϘ͸3VCZʹڧ͍ΤϯδχΞଟ͍ͷͰ৭Μͳ৔໘Ͱฉ͚Δ ͳͥ3VCZ
    PO
    3BJMTͳͷ͔ʁ
27. ͳͥ3VCZ
    PO
    3BJMTͳͷ͔ʁ ΧʔτػೳΛ3BJMTͰ࣮૷ͨ͠ͱ͍͏͜ͱ
    ʹ
    3BJMT΁Ҡߦ͍ͯ͘͠ͱ͍͏ڧ͍ҙࢤදࣔ
28. ΧʔτػೳΛࢧ͑Δٕज़
    ͦͷ
    7VFKT
29. ϜʔϜʔυϝΠϯͷ+BWB4DSJQU؀ڥ w1)1ɺ3BJMTͱ΋ʹ+BWB4DSJQU؀ڥ͸ΑΖ͘͠ͳ͍ঢ়گ
    wK2VFSZͰ৭ʑؤு͍ͬͯΔ
    w+4ͷςετ͸&&Ͱิ͏
    wͦΖͦΖK2VFSZ࢖͏ͷ΍Ί͍͖͍ͯͨ
30. ͦ͜Ͱͳͥ7VFKTͳͷ͔ʁ wۀք΍ࣾ಺ͷଞαʔϏεͰ͸7VFKTಋೖ͕ਐΜͰ͍ͨ
    w࣮͸ϜʔϜʔυϝΠϯͰ΋ސ٬؅ཧγεςϜʹಋೖ్த ౰࣌
    wΤϯδχΞ಺ͰࢍಉಘΒΕͨͷͰ଎ಋೖ͢Δ͜ͱΛܾఆʂ
31. 7VFKTಋೖʹ͋ͨͬͯ஫ҙͨ͜͠ͱ wΧʔτػೳͷ41"Խ͸໨ࢦ͞ͳ͍ 3BJMTͷ7JFXͱͷڞੜ
    w4'$ 4JOHMF
    'JMF
    $PNQPOFOUT ΋࢖Θͳ͍
    w͋͘·Ͱ·ͣ͸K2VFSZΛஔ͖׵͍͑ͯ͘
32. . ├── app │ ├── assets │ │ └── javascripts │ │ └── cart.js │ │ │ └── views │ └── … │ └── frontend └── src └── javascripts └── cart 8FCQBDLΛಋೖͯ͠৭ʑ΍Δ w&4Ͱॻͨ͘Ίʹ8FCQBDLΛಋೖ
    wGSPOUFOEԼͰ+4ίʔυ؅ཧ
    w4QSPDLFUT͸࢖͏
    wBQQBTTFUTKBWBTDSJQUTҎԼ΁ग़ྗ
33. 7VFKTΛಋೖͯ͠Έͨ݁Ռ
34. 7VFKTΛಋೖͯ͠Έͨ݁Ռ w·ͩ׬શ୤٫͸Ͱ͖͍ͯͳ͍
    wK2VFSZ͔Β୤٫͢ΔྲྀΕ͸Ͱ͖ͨ
    wΧʔτϖʔδͷ+4͸7VFKTͷΈͰ࣮૷
    w+4ςετ؀ڥ΋ͭͬͨ͘
35. γϣοϐϯάΧʔτػೳΛࢧ͑Δٕज़
    ͦͷ̏
    ελΠϧΨΠυ
36. ࠶ܝ Χʔτػೳ։ൃͷ໨త wτοϓͷυϝΠϯݕࡧ݁Ռ͔ΒͷυϝΠϯෳ਺औಘରԠ
    wऔಘ׬ྃ·ͰΛ΋ͬͱγϯϓϧʹΘ͔Γ΍͘͢
    wࠓޙʹ޲͚ͨσβΠϯͷ࠶ߏஙΛߦ͏ ελΠϧΨΠυΛར༻ͨ͠։ൃΛߦ͍ͬͯͬͨ
37. ελΠϧΨΠυ wαΠτσβΠϯΛ·ͱΊͨϧʔϧू
    w6*
    $PNQPOFOUT
    w1BHF
    UFNQMBUFTͳͲ
    wࢹ֮తʹΘ͔Γ΍͍͢
    w)5.-ίʔυͷαϯϓϧ΋ݟΕΔ
    wࠓճσβΠφʔओಋͰಋೖ͍ͯͬͨ͠ IUUQTTUBOEBSETVTBHPWDPNQPOFOUTCVUUPOT
38. w 'SBDUBM
    JT
    B
    UPPM
    UP
    IFMQ
    ZPV
    CVJME
    BOE
    EPDVNFOU
    XFC
    DPNQPOFOU
    MJCSBSJFT
    BOE
    UIFO
    JOUFHSBUF
    UIFN
    JOUP
    ZPVS
    QSPKFDUT
    w 'SBDUBM
    SFRVJSFT
    /PEFKT
    $ npm install --save @frctl/fractal IUUQGSBDUBMCVJME ελΠϧΨΠυδΣωϨʔλ
39. ϜʔϜʔυϝΠϯελΠϧΨΠυ
40. ελΠϧΨΠυΛར༻ͨ͠։ൃͱ͸ʁ
41. ESPOFJP ϜʔϜʔͷ։ൃϑϩʔ MPDBM
    CSBODI 1VMM
    3FRVFTU 3FWJFX .FSHF
    UP
    NBTUFS SFNPUF
    CSBODI EFQMPZ QVTI $*
42. 7JFXपΓͷ։ൃ࡞ۀ ΤϯδχΞ
    w 7JFX্ʹදࣔ͢ΔͨΊͷσʔλ༻ҙ
    w +4Ͱͷಈతॲཧ
    σβΠφʔ
    w 7JFXશମͷσβΠϯ
    w ը໘ભҠϑϩʔ
    ΤϯδχΞɾσβΠφʔڞ௨
    w 7JFXϑΝΠϧͷ࡞੒ɾมߋ
43. 7JFXมߋͷ13ͰίϯϑϦΫτ͕ͪ͠ wΤϯδχΞͱσβΠφʔ͕มߋ͢Δର৅
    
    wྫ
    BQQWJFXTDBSUʜ
    wͦΕͧΕ͕ಉҰͷ7JFXʹରͯ͠มߋͷ13Λग़͢ˠίϯϑϦΫτ
44. ։ൃ࣌ʹελΠϧΨΠυΛ࢖͏ϝϦοτ . ├── app │ └── views │ └── … └── styleguide └── … ελΠϧΨΠυ༻ͷσΟϨΫτϦ͸ผͰ؅ཧ
    
    ͦΕͧΕͷมߋ͕ίϯϑϦΫτ͠ͳ͍
45. DTT͸3BJMTଆͱڞ༗ ɾ։ൃॳظ͔Β͸͡ΊΔελΠϧΨΠυ
    CZ
    NZPTIJSP
    ɹIUUQTTQFBLFSEFDLDPNNZPTIJSPLBJGBDIVRJLBSBIB[JNFSVTVUBJSVHBJEP w (VMQͷλεΫͰͦͷ͋ͨΓΛ͍͍ ײ͡ʹॲཧ͢Δ
    w σβΠφʔ͕มߋ͢Δͷ͸
    
    
    
    BQQBTTFUTTUZMFTIFFUTԼͷDTT
46. wσβΠϯΛ૊ΉͨΊͷ࡞ۀεϖʔε͕Ͱ͖ͯ։ൃޮ཰্͕͕Δ
    wελΠϧΨΠυΛࢀߟʹΤϯδχΞ͕7JFX΁൓ө͍͚ͯ͠Δ
    wσβΠϯ֬ೝͳͲͷίϛϡχέʔγϣϯπʔϧͱͯ͠΋࢖͑Δ ։ൃ࣌ʹελΠϧΨΠυΛ࢖͏ϝϦοτ
47. ελΠϧΨΠυಋೖ࣌ͷ஫ҙ఺ wελΠϧΨΠυߏஙͷͨΊͷ஌ࣝͱ޻਺
    wϓϩδΣΫτن໛ͳͲ΋ؚΊͯಋೖΛߟྀ͢Δඞཁ͕͋Δ
48. ·ͱΊ
49. ·ͱΊ wΧʔτػೳΛࢧ͑Δٕज़
    w3VCZ
    PO
    3BJMT
    w Ҡߦ͍ͯͧ͘͠ʂ
    w7VFKT
    w K2VFSZΛஔ͖׵͍͑ͯͧ͘ʂ
    wελΠϧΨΠυ
    w ࠓޙެ։͍ͯͧ͘͠ʂ
50. ͝঺հ
51. ςοΫϒϩάͷ͝঺հ IUUQTUFDIQFQBCPDPNQFQBCPDPMMFHFTU
52. ςοΫϒϩάͷ͝঺հ IUUQTUFDIQFQBCPDPNNVVNVVTIPQQJOHDBSU
53. ؔ࿈εϥΠυͷ͝঺հ ɾ7VFKT
    PO
    3BJMT
    
    WVFKTPOSBJMT
    CZ
    )JSPNJ
    ,JNVSB
    ɹIUUQTTQFBLFSEFDLDPNLJNSPNJWVFKTPOSBJMT
54. ϖύϘ͸Ұॹʹಇ͍ͯ͘ΕΔ஥ؒΛ
    ืू͓ͯ͠Γ·͢ʂ ࠷৽ͷ࠾༻৘ใΛνΣοΫˠ IUUQTUXJUUFSDPNQC@SFDSVJU
55. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠