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

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

1aa17287e8916e4012a53c118b2f0c55?s=47 litencatt
September 29, 2017

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

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

1aa17287e8916e4012a53c118b2f0c55?s=128

litencatt

September 29, 2017
Tweet

Transcript

  1. தଜޫ༎(.01FQBCP *OD $PDLQBE5FDI,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ͦͷ3VCZPO3BJMT wڧ͍ؾ࣋ͪͰ1)1͔Β3BJMT΁ wͦͷ7VFKT w+BWB4DSJQU؀ڥΛ੔උͭͭ͠K2VFSZ͔Βͷ୤٫ wͦͷελΠϧΨΠυ wσβΠϯߏஙͱ8FC։ൃΛεϜʔζʹ͢Δ

  22. ΧʔτػೳΛࢧ͑Δٕज़ ͦͷ̍3VCZPO3BJMT

  23. Χʔτػೳ͸΄΅3BJMTͰ࣮૷ʂ ʢϖʔδɺܾࡁपΓɺ"1*ͳͲ΋ʣ

  24. ϜʔϜʔͷ࢖༻ݴޠߏ੒ ɾυϝΠϯݕࡧτοϓ ɾυϝΠϯҠ؅ ɾҰׅऔಘϖʔδ ɾϓϨϛΞϜυϝΠϯϖʔδ ɾεϚϗ༻αΠτ ɾ৽υϝΠϯϖʔδ ɾΦʔΫγϣϯϖʔδ ɾ"1*ػೳ 1$༻αΠτ

    ɾυϝΠϯ؅ཧϖʔδ  ίϯτϩʔϧύωϧ ɾΧʔτػೳ։ൃલ
  25. ɾεϚϗ༻αΠτ ɾ৽υϝΠϯϖʔδ ɾΦʔΫγϣϯϖʔδ ɾ"1*ػೳ ɾΧʔτػೳ ɾΧʔτ༻"1* ɾυϝΠϯݕࡧτοϓ ɾυϝΠϯҠ؅ ɾҰׅऔಘϖʔδ ɾϓϨϛΞϜυϝΠϯϖʔδ

    1$༻αΠτ ϜʔϜʔͷ࢖༻ݴޠߏ੒ ɾυϝΠϯ؅ཧϖʔδ  ίϯτϩʔϧύωϧ ɾΧʔτػೳ։ൃޙ
  26. w ϜʔϜʔυϝΠϯ͸ΞϓϦͷ։ൃݴޠͷେ෦෼͕1)1 ˠϊʔϑϨʔϜϫʔΫͷͨΊ։ൃޮ཰ѱ͍ w ݱϜʔϜʔΤϯδχΞ͸3BJMTͰͷ։ൃܦݧͷํ͕ଟ͍ w ϖύϘ͸3VCZʹڧ͍ΤϯδχΞଟ͍ͷͰ৭Μͳ৔໘Ͱฉ͚Δ ͳͥ3VCZPO3BJMTͳͷ͔ʁ

  27. ͳͥ3VCZPO3BJMTͳͷ͔ʁ ΧʔτػೳΛ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 w1BHFUFNQMBUFTͳͲ wࢹ֮తʹΘ͔Γ΍͍͢ w)5.-ίʔυͷαϯϓϧ΋ݟΕΔ wࠓճσβΠφʔओಋͰಋೖ͍ͯͬͨ͠ IUUQTTUBOEBSETVTBHPWDPNQPOFOUTCVUUPOT

  38. w 'SBDUBMJTBUPPMUPIFMQZPVCVJME BOEEPDVNFOUXFCDPNQPOFOU MJCSBSJFT BOEUIFOJOUFHSBUFUIFN JOUPZPVSQSPKFDUT w 'SBDUBMSFRVJSFT/PEFKT $ npm

    install --save @frctl/fractal IUUQGSBDUBMCVJME ελΠϧΨΠυδΣωϨʔλ
  39. ϜʔϜʔυϝΠϯελΠϧΨΠυ

  40. ελΠϧΨΠυΛར༻ͨ͠։ൃͱ͸ʁ

  41. ESPOFJP ϜʔϜʔͷ։ൃϑϩʔ MPDBMCSBODI 1VMM3FRVFTU 3FWJFX .FSHFUPNBTUFS SFNPUFCSBODI 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ଆͱڞ༗ ɾ։ൃॳظ͔Β͸͡ΊΔελΠϧΨΠυCZNZPTIJSP ɹIUUQTTQFBLFSEFDLDPNNZPTIJSPLBJGBDIVRJLBSBIB[JNFSVTVUBJSVHBJEP w (VMQͷλεΫͰͦͷ͋ͨΓΛ͍͍ ײ͡ʹॲཧ͢Δ w σβΠφʔ͕มߋ͢Δͷ͸ BQQBTTFUTTUZMFTIFFUTԼͷDTT

  46. wσβΠϯΛ૊ΉͨΊͷ࡞ۀεϖʔε͕Ͱ͖ͯ։ൃޮ཰্͕͕Δ wελΠϧΨΠυΛࢀߟʹΤϯδχΞ͕7JFX΁൓ө͍͚ͯ͠Δ wσβΠϯ֬ೝͳͲͷίϛϡχέʔγϣϯπʔϧͱͯ͠΋࢖͑Δ ։ൃ࣌ʹελΠϧΨΠυΛ࢖͏ϝϦοτ

  47. ελΠϧΨΠυಋೖ࣌ͷ஫ҙ఺ wελΠϧΨΠυߏஙͷͨΊͷ஌ࣝͱ޻਺ wϓϩδΣΫτن໛ͳͲ΋ؚΊͯಋೖΛߟྀ͢Δඞཁ͕͋Δ

  48. ·ͱΊ

  49. ·ͱΊ wΧʔτػೳΛࢧ͑Δٕज़ w3VCZPO3BJMT w Ҡߦ͍ͯͧ͘͠ʂ w7VFKT w K2VFSZΛஔ͖׵͍͑ͯͧ͘ʂ wελΠϧΨΠυ w

    ࠓޙެ։͍ͯͧ͘͠ʂ
  50. ͝঺հ

  51. ςοΫϒϩάͷ͝঺հ IUUQTUFDIQFQBCPDPNQFQBCPDPMMFHFTU

  52. ςοΫϒϩάͷ͝঺հ IUUQTUFDIQFQBCPDPNNVVNVVTIPQQJOHDBSU

  53. ؔ࿈εϥΠυͷ͝঺հ ɾ7VFKTPO3BJMTWVFKTPOSBJMTCZ)JSPNJ,JNVSB ɹIUUQTTQFBLFSEFDLDPNLJNSPNJWVFKTPOSBJMT

  54. ϖύϘ͸Ұॹʹಇ͍ͯ͘ΕΔ஥ؒΛ ืू͓ͯ͠Γ·͢ʂ ࠷৽ͷ࠾༻৘ใΛνΣοΫˠ IUUQTUXJUUFSDPNQC@SFDSVJU

  55. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠