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

by litencatt

Slide 1

Slide 1 text

தଜޫ༎(.01FQBCP *OD $PDLQBE5FDI,JUDIFO ϜʔϜʔυϝΠϯ γϣοϐϯάΧʔτػೳΛࢧ͑Δٕज़

Slide 2

Slide 2 text

ࣗݾ঺հ wதଜޫ༎!MJUFODBUU wΤϯδχΞ w(.0ϖύϘॴଐ wϗεςΟϯάࣄۀ෦ϜʔϜʔυϝΠϯάϧʔϓ w೥݄ೖࣾ wϖύϘΧϨοδظੜ w޷͖ͳϝιου"SSBZQFSNVUBUJPO

Slide 3

Slide 3 text

ϖύϘΧϨοδͱ͸ʁ

Slide 4

Slide 4 text

ϖύϘΧϨοδ w ೖࣾޙ໿ϲ݄ͷ8FC։ൃݚम෇͖த్࠾༻ϓϩάϥϜ w 8FCۀքະܦݧऀ޲͚

Slide 5

Slide 5 text

ϜʔϜʔυϝΠϯ

Slide 6

Slide 6 text

ϜʔϜʔυϝΠϯ wυϝΠϯऔಘ΍؅ཧͳͲ؆୯ʹߦ͑ΔυϝΠϯ౷߹αʔϏε wࠓ೥ͰαʔϏε։͔࢝Β೥໨ʂ wυϝΠϯ͓ਃ͠ࠐΈ਺͸ສ݅Λಥഁ

Slide 7

Slide 7 text

೥݄೔ʹ γϣοϐϯάΧʔτػೳΛϦϦʔε

Slide 8

Slide 8 text

γϣοϐϯάΧʔτػೳΛࢧ͑Δٕज़ ʹ͍ͭͯͷ͓࿩ IUUQTQFQBCPDPNOFXTJOGPSNBUJPO

Slide 9

Slide 9 text

Ϩδϡϝ wΧʔτػೳ։ൃͷഎܠͱ໨త wΧʔτػೳͷ঺հ wΧʔτػೳΛࢧ͑Δٕज़ w·ͱΊ ˞͜͜ΑΓҎ߱͸Χʔτػೳͱදه͠·͢

Slide 10

Slide 10 text

Χʔτػೳ։ൃͷഎܠ

Slide 11

Slide 11 text

طଘͷυϝΠϯऔಘϑϩʔͷ໰୊఺ wओʹύλʔϯͷऔಘ ߪೖ ϑϩʔ͕͋Δ wτοϓ͔ΒͷݕࡧͰ͸υϝΠϯ͔ͭͣͭ͠औಘͰ͖ͳ͍ wҰׅऔಘ༻ͷϖʔδͷ৔߹ɺܾࡁํ๏΍औಘՄೳυϝΠϯʹҰ෦੍ݶ͋Γ

Slide 12

Slide 12 text

طଘͷσβΠϯʹ͍ͭͯ wσΟεϓϨΠͷߴղ૾౓Խʹର͢ΔରԠ͕஗Ε͍ͯΔ

Slide 13

Slide 13 text

Χʔτػೳ։ൃͷ໨త wτοϓͷυϝΠϯݕࡧ݁Ռ͔ΒͷυϝΠϯෳ਺औಘରԠ wऔಘ׬ྃ·ͰΛ΋ͬͱγϯϓϧʹΘ͔Γ΍͘͢ wࠓޙʹ޲͚ͨσβΠϯͷ࠶ߏஙΛߦ͏

Slide 14

Slide 14 text

࣮ࡍΧʔτػೳ͕ Ͳ͏͍ͬͨ΋ͷʹͳͬͨͷ͔ʁ

Slide 15

Slide 15 text

Χʔτػೳͷ঺հ wτοϓ͔ΒͷυϝΠϯͷෳ਺औಘՄೳʹʂ

Slide 16

Slide 16 text

wτοϓ͔ΒͷυϝΠϯͷෳ਺औಘՄೳʹʂ wΧʔτ͔Β࠷୹εςοϓͰऔಘ׬ྃʂʂ Χʔτػೳͷ঺հ

Slide 17

Slide 17 text

wτοϓ͔ΒͷυϝΠϯͷෳ਺औಘՄೳʹʂ wΧʔτ͔Β࠷୹εςοϓͰऔಘ׬ྃʂʂ wϨεϙϯγϒσβΠϯԽʂʂʂ Χʔτػೳͷ঺հ

Slide 18

Slide 18 text

ϜʔϜʔυϝΠϯ࢖ͬͯΔ͚Ͳɺ ͦͷϖʔδݟͨ͜ͱͳ͍Μ͚ͩͲʜ

Slide 19

Slide 19 text

˞ݱঢ়Ͱ͸ υϝΠϯͭҎ্͕ೖͬͯͳ͍ͱ Χʔτϖʔδ΁ߦ͖·ͤΜ

Slide 20

Slide 20 text

ΧʔτػೳΛࢧ͑Δٕज़

Slide 21

Slide 21 text

ΧʔτػೳΛࢧ͑Δٕज़ wͦͷ3VCZPO3BJMT wڧ͍ؾ࣋ͪͰ1)1͔Β3BJMT΁ wͦͷ7VFKT w+BWB4DSJQU؀ڥΛ੔උͭͭ͠K2VFSZ͔Βͷ୤٫ wͦͷελΠϧΨΠυ wσβΠϯߏஙͱ8FC։ൃΛεϜʔζʹ͢Δ

Slide 22

Slide 22 text

ΧʔτػೳΛࢧ͑Δٕज़ ͦͷ̍3VCZPO3BJMT

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

w ϜʔϜʔυϝΠϯ͸ΞϓϦͷ։ൃݴޠͷେ෦෼͕1)1 ˠϊʔϑϨʔϜϫʔΫͷͨΊ։ൃޮ཰ѱ͍ w ݱϜʔϜʔΤϯδχΞ͸3BJMTͰͷ։ൃܦݧͷํ͕ଟ͍ w ϖύϘ͸3VCZʹڧ͍ΤϯδχΞଟ͍ͷͰ৭Μͳ৔໘Ͱฉ͚Δ ͳͥ3VCZPO3BJMTͳͷ͔ʁ

Slide 27

Slide 27 text

ͳͥ3VCZPO3BJMTͳͷ͔ʁ ΧʔτػೳΛ3BJMTͰ࣮૷ͨ͠ͱ͍͏͜ͱ ʹ3BJMT΁Ҡߦ͍ͯ͘͠ͱ͍͏ڧ͍ҙࢤදࣔ

Slide 28

Slide 28 text

ΧʔτػೳΛࢧ͑Δٕज़ ͦͷ7VFKT

Slide 29

Slide 29 text

ϜʔϜʔυϝΠϯͷ+BWB4DSJQU؀ڥ w1)1ɺ3BJMTͱ΋ʹ+BWB4DSJQU؀ڥ͸ΑΖ͘͠ͳ͍ঢ়گ wK2VFSZͰ৭ʑؤு͍ͬͯΔ w+4ͷςετ͸&&Ͱิ͏ wͦΖͦΖK2VFSZ࢖͏ͷ΍Ί͍͖͍ͯͨ

Slide 30

Slide 30 text

ͦ͜Ͱͳͥ7VFKTͳͷ͔ʁ wۀք΍ࣾ಺ͷଞαʔϏεͰ͸7VFKTಋೖ͕ਐΜͰ͍ͨ w࣮͸ϜʔϜʔυϝΠϯͰ΋ސ٬؅ཧγεςϜʹಋೖ్த ౰࣌ wΤϯδχΞ಺ͰࢍಉಘΒΕͨͷͰ଎ಋೖ͢Δ͜ͱΛܾఆʂ

Slide 31

Slide 31 text

7VFKTಋೖʹ͋ͨͬͯ஫ҙͨ͜͠ͱ wΧʔτػೳͷ41"Խ͸໨ࢦ͞ͳ͍ 3BJMTͷ7JFXͱͷڞੜ w4'$ 4JOHMF'JMF$PNQPOFOUT ΋࢖Θͳ͍ w͋͘·Ͱ·ͣ͸K2VFSZΛஔ͖׵͍͑ͯ͘

Slide 32

Slide 32 text

. ├── app │ ├── assets │ │ └── javascripts │ │ └── cart.js │ │ │ └── views │ └── … │ └── frontend └── src └── javascripts └── cart 8FCQBDLΛಋೖͯ͠৭ʑ΍Δ w&4Ͱॻͨ͘Ίʹ8FCQBDLΛಋೖ wGSPOUFOEԼͰ+4ίʔυ؅ཧ w4QSPDLFUT͸࢖͏ wBQQBTTFUTKBWBTDSJQUTҎԼ΁ग़ྗ

Slide 33

Slide 33 text

7VFKTΛಋೖͯ͠Έͨ݁Ռ

Slide 34

Slide 34 text

7VFKTΛಋೖͯ͠Έͨ݁Ռ w·ͩ׬શ୤٫͸Ͱ͖͍ͯͳ͍ wK2VFSZ͔Β୤٫͢ΔྲྀΕ͸Ͱ͖ͨ wΧʔτϖʔδͷ+4͸7VFKTͷΈͰ࣮૷ w+4ςετ؀ڥ΋ͭͬͨ͘

Slide 35

Slide 35 text

γϣοϐϯάΧʔτػೳΛࢧ͑Δٕज़ ͦͷ̏ελΠϧΨΠυ

Slide 36

Slide 36 text

࠶ܝ Χʔτػೳ։ൃͷ໨త wτοϓͷυϝΠϯݕࡧ݁Ռ͔ΒͷυϝΠϯෳ਺औಘରԠ wऔಘ׬ྃ·ͰΛ΋ͬͱγϯϓϧʹΘ͔Γ΍͘͢ wࠓޙʹ޲͚ͨσβΠϯͷ࠶ߏஙΛߦ͏ ελΠϧΨΠυΛར༻ͨ͠։ൃΛߦ͍ͬͯͬͨ

Slide 37

Slide 37 text

ελΠϧΨΠυ wαΠτσβΠϯΛ·ͱΊͨϧʔϧू w6*$PNQPOFOUT w1BHFUFNQMBUFTͳͲ wࢹ֮తʹΘ͔Γ΍͍͢ w)5.-ίʔυͷαϯϓϧ΋ݟΕΔ wࠓճσβΠφʔओಋͰಋೖ͍ͯͬͨ͠ IUUQTTUBOEBSETVTBHPWDPNQPOFOUTCVUUPOT

Slide 38

Slide 38 text

w 'SBDUBMJTBUPPMUPIFMQZPVCVJME BOEEPDVNFOUXFCDPNQPOFOU MJCSBSJFT BOEUIFOJOUFHSBUFUIFN JOUPZPVSQSPKFDUT w 'SBDUBMSFRVJSFT/PEFKT $ npm install --save @frctl/fractal IUUQGSBDUBMCVJME ελΠϧΨΠυδΣωϨʔλ

Slide 39

Slide 39 text

ϜʔϜʔυϝΠϯελΠϧΨΠυ

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

ESPOFJP ϜʔϜʔͷ։ൃϑϩʔ MPDBMCSBODI 1VMM3FRVFTU 3FWJFX .FSHFUPNBTUFS SFNPUFCSBODI EFQMPZ QVTI $*

Slide 42

Slide 42 text

7JFXपΓͷ։ൃ࡞ۀ ΤϯδχΞ w 7JFX্ʹදࣔ͢ΔͨΊͷσʔλ༻ҙ w +4Ͱͷಈతॲཧ σβΠφʔ w 7JFXશମͷσβΠϯ w ը໘ભҠϑϩʔ ΤϯδχΞɾσβΠφʔڞ௨ w 7JFXϑΝΠϧͷ࡞੒ɾมߋ

Slide 43

Slide 43 text

7JFXมߋͷ13ͰίϯϑϦΫτ͕ͪ͠ wΤϯδχΞͱσβΠφʔ͕มߋ͢Δର৅ wྫ BQQWJFXTDBSUʜ wͦΕͧΕ͕ಉҰͷ7JFXʹରͯ͠มߋͷ13Λग़͢ˠίϯϑϦΫτ

Slide 44

Slide 44 text

։ൃ࣌ʹελΠϧΨΠυΛ࢖͏ϝϦοτ . ├── app │ └── views │ └── … └── styleguide └── … ελΠϧΨΠυ༻ͷσΟϨΫτϦ͸ผͰ؅ཧ ͦΕͧΕͷมߋ͕ίϯϑϦΫτ͠ͳ͍

Slide 45

Slide 45 text

DTT͸3BJMTଆͱڞ༗ ɾ։ൃॳظ͔Β͸͡ΊΔελΠϧΨΠυCZNZPTIJSP ɹIUUQTTQFBLFSEFDLDPNNZPTIJSPLBJGBDIVRJLBSBIB[JNFSVTVUBJSVHBJEP w (VMQͷλεΫͰͦͷ͋ͨΓΛ͍͍ ײ͡ʹॲཧ͢Δ w σβΠφʔ͕มߋ͢Δͷ͸ BQQBTTFUTTUZMFTIFFUTԼͷDTT

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

·ͱΊ

Slide 49

Slide 49 text

·ͱΊ wΧʔτػೳΛࢧ͑Δٕज़ w3VCZPO3BJMT w Ҡߦ͍ͯͧ͘͠ʂ w7VFKT w K2VFSZΛஔ͖׵͍͑ͯͧ͘ʂ wελΠϧΨΠυ w ࠓޙެ։͍ͯͧ͘͠ʂ

Slide 50

Slide 50 text

͝঺հ

Slide 51

Slide 51 text

ςοΫϒϩάͷ͝঺հ IUUQTUFDIQFQBCPDPNQFQBCPDPMMFHFTU

Slide 52

Slide 52 text

ςοΫϒϩάͷ͝঺հ IUUQTUFDIQFQBCPDPNNVVNVVTIPQQJOHDBSU

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠