vuexを使ってみなかった話

by atsushiss15

Slide 1

Slide 1 text

WVFYΛ࢖ͬͯΈͳ͔ͬͨ࿩

Slide 2

Slide 2 text

ࣗݾ঺հ !BUTVTIJTTʢ;͔͡Θ͋ͭ͠ʣ גࣜձࣾϓϨΠυΤϯδχΞ ৽ଔ̍೥໨

Slide 3

Slide 3 text

ࠓ೔͓࿩͢͠Δ͜ͱ ϑϩϯτΤϯυͷঢ়ଶ؅ཧʹWVFYͳΜ͔࢖Θͣ ࣗલͰ؆қ'MVYతͳ࣮૷Λͨ͠ํ͕ྑ͔ͬͨ࿩

Slide 4

Slide 4 text

ϑϩϯτΤϯυͷঢ়ଶ؅ཧʹWVFYͳΜ͔࢖Θͣ ࣗલͰ؆қ'MVYతͳ࣮૷Λͨ͠ํ͕ྑ͔ͬͨ࿩ ࠓ೔͓࿩͢͠Δ͜ͱ

Slide 5

Slide 5 text

ϑϩϯτΤϯυͷঢ়ଶ؅ཧʹWVFYͳΜ͔࢖Θͣ ࣗલͰ؆қ'MVYతͳ࣮૷Λͨ͠ํ͕ྑ͔ͬͨ࿩ ࠓ೔͓࿩͢͠Δ͜ͱ ঢ়ଶ؅ཧʹWVFYʢ'MVYʣ͕࢖͍͍͚ͨͲɺ աڈͷࢿ࢈΋͋Δ͠ɺ͍͖ͳΓಋೖ͢Δͷ͸େมͳͷͰ ࣗલͰ؆қ'MVYతͳ࣮૷Λͯ͠Έͨ࿩

Slide 6

Slide 6 text

ܦҢ ܥͷ͔࣌Β7VFKTͰϓϩμΫτΛ࡞͍ͬͯ·͢ IUUQTLBSUFJP

Slide 7

Slide 7 text

ܦҢ ։ൃॳظ͸ػೳ΋গͳ͔ͬͨͷͰ ঢ়ଶ؅ཧ΍ϩδοΫ͸֤ίϯϙʔωϯτ಺Ͱ׬͍݁ͯͨ͠

Slide 8

Slide 8 text

ܦҢ ͱ͜Ζ͕ߴػೳԽʹ൐ͬͯίϯϙʔωϯτؒͰ ঢ়ଶΛڞ༗͠ͳ͚Ε͹͍͚ͳ͍έʔε͕૿͖͑ͯͨ

Slide 9

Slide 9 text

ܦҢ ࠷ॳ͸QSPQT΍&WFOU&NJUUFS౳Ͱؤு͍ͬͯͨ ʢ౰࣌͸ܥΛ࢖͍ͬͯͨͷͰEJTQBUDI΍CSPBEDBTUͳͲ΋ۦ࢖ʣ

Slide 10

Slide 10 text

ܦҢ ͔͠͠ɺ౰વͷΑ͏ʹ ঢ়ଶ؅ཧͷෳࡶԽɺίϯϙʔωϯτಉ࢜ͷີ݁߹ ͱ͍ͬͨ໰୊͕ੜ࢝͡ΊΔ

Slide 11

Slide 11 text

ܦҢ ԿʹΑͬͯঢ়ଶ͕มߋ͞Εͨͷ͔෼͔ΓͮΒ͍ Өڹൣғ͕ෆಁ໌ͳͷͰվम΋೉͘͠

Slide 12

Slide 12 text

ܦҢ ԿʹΑͬͯঢ়ଶ͕มߋ͞Εͨͷ͔෼͔ΓͮΒ͍ Өڹൣғ͕ෆಁ໌ͳͷͰվम΋೉͘͠ Ͳ͏͢Ε͹͍͍ͷʁ

Slide 13

Slide 13 text

ܦҢ ͦ͏ͩɺ4UPSFύλʔϯΛऔΓೖΕΑ͏

Slide 14

Slide 14 text

΍Γ͍ͨ͜ͱ w ෳ਺ίϯϙʔωϯτͰঢ়ଶΛڞ༗͢Δ͜ͱ w 7JFXͱσʔλपΓͷϩδοΫΛ෼཭͢Δ͜ͱ

Slide 15

Slide 15 text

΍Γ͍ͨ͜ͱ w ෳ਺ίϯϙʔωϯτͰঢ়ଶΛڞ༗͢Δ͜ͱ w 7JFXͱσʔλपΓͷϩδοΫΛ෼཭͢Δ͜ͱ 'MVYΞʔΩςΫνϟ

Slide 16

Slide 16 text

'MVYΞʔΩςΫνϟͱ͸ ࠷େͷಛ௃͸σʔλͷྲྀΕΔํ޲Λ୯Ұํ޲ ʹݶఆ͍ͯ͠Δͱ͜Ζ 3FEVYͳͲΠϯεύΠΞͷϥΠϒϥϦ͕ز͔ͭ͋Δ

Slide 17

Slide 17 text

7VFKTʹ΋WVFYͳΔ΋ͷ͕Ͱ͖͍ͯͨʂ

Slide 18

Slide 18 text

WVFYͱ͸ ొ৔ਓ෺͸̏ͭ "DUJPOTɿ ඇಉظॲཧ .VUBUJPOΛίϛοτ .VUBUJPOTɿ 4UPSFͷঢ়ଶʢTUBUFʣΛมߋ 4UBUFɿ ৴པͰ͖Δ།Ұͷ৘ใݯͱͯ͠ͷঢ়ଶ 'MVYͷࢥ૝Λ౿ऻͨ͠7VFKTಛԽͷঢ়ଶ؅ཧύλʔϯ

Slide 19

Slide 19 text

IUUQTWVFYWVFKTPSHKBJOUSPIUNM WVFYͱ͸

Slide 20

Slide 20 text

WVFYͱ͸

Slide 21

Slide 21 text

WVFYͱ͸ ίϯϙʔωϯτ͔ΒTUBUFΛ࢖͏

Slide 22

Slide 22 text

WVFYͱ͸ ΞΫγϣϯΛEJTQBUDI

Slide 23

Slide 23 text

WVFYͰͰ͖Δ͜ͱ w ঢ়ଶͷڞ༗ w 7JFXͱϩδοΫͷ෼཭ w ঢ়ଶͷมߋΛ࣮֬ʹ௥͍͔͚Δ͜ͱ͕Ͱ͖Δ ʢWVFEFWUPPMT͕࢖͑Δɻศརʂʣ w 'MVY࣮૷ΛϥΠϒϥϦ͕ڧ੍ͯ͘͠ΕΔͷͰ σόοάɾίʔυϨϏϡʔͳͲ৭ʑָʹͳΔ

Slide 24

Slide 24 text

WVFYͰͰ͖Δ͜ͱ WVFEFWUPPMT

Slide 25

Slide 25 text

ੋඇͱ΋ಋೖ͍ͨ͠ʂ

Slide 26

Slide 26 text

͔͠͠ʜ

Slide 27

Slide 27 text

WVFYΛಋೖ͢Δࡍͷো֐ w طଘͷࢿ࢈ͷஔ͖׵͕͑ࠔ೉ w ঢ়ଶΛ࣋ͬͨEJSFDUJWF΍VUJM͕େྔʹ͋ͬͨ w ෳࡶԽ͍ͯͨ͠ίϯϙʔωϯτ಺ͷϩδοΫͱঢ়ଶ w ֶशίετతͳଆ໘ w ϑϩϯτΤϯυͷઐ໳ՈҎ֎΋։ൃʹՃΘΔͷͰഅ ࣛʹͳΒͳ͍ʜ

Slide 28

Slide 28 text

ͦ͜Ͱ·ͣ͸ϓϨʔϯͳ+BWBTDSJQUͰ 'MVYϥΠΫͳ΋ͷΛ࣮૷ͯ͠ΈΔ͜ͱʹ

Slide 29

Slide 29 text

IUUQTKQWVFKTPSHWHVJEFTUBUFNBOBHFNFOUIUNM l7VFΠϯελϯε͸୯७ʹEBUBΦϒδΣΫτ΁ͷΞΫηεΛϓϩ Ωγ͠·͢ɻͦΕΏ͑ʹɺෳ਺ͷΠϯελϯεʹΑͬͯڞ༗͞Ε͏Δ ঢ়ଶ͕͋Δ৔߹ɺγϯϓϧʹಉҰͷঢ়ଶΛڞ༗͢Δ͜ͱ͕Ͱ͖·͢z ʢ7VFKTެࣜΑΓҾ༻ʣ Ͳ͏΍ͬͯ࡞͔ͬͨ

Slide 30

Slide 30 text

IUUQTKQWVFKTPSHWHVJEFTUBUFNBOBHFNFOUIUNM 7VFΠϯελϯε͸୯७ʹEBUBΦϒδΣΫτ΁ͷΞΫηεΛϓϩ Ωγ͠·͢ɻͦΕΏ͑ʹɺෳ਺ͷΠϯελϯεʹΑͬͯڞ༗͞Ε͏Δ ঢ়ଶ͕͋Δ৔߹ɺγϯϓϧʹಉҰͷঢ়ଶΛڞ༗͢Δ͜ͱ͕Ͱ͖·͢ ͜ͷߟ͑ํΛ֦ு͍͚ͯͩ͘͠ Ͳ͏΍ͬͯ࡞͔ͬͨ

Slide 31

Slide 31 text

ొ৔ਓ෺͸4UBUFͱ"DUJPOͷ̎छྨ Ͳ͏΍ͬͯ࡞͔ͬͨ

Slide 32

Slide 32 text

͜ͷ4UPSFΛ֤ίϯϙʔωϯτͷEBUBϓϩύςΟʹ࣋ͨͤΔ Ͳ͏΍ͬͯ࡞͔ͬͨ

Slide 33

Slide 33 text

͜ΕͰ४උ׬ྃ

Slide 34

Slide 34 text

ϢʔβʔͷೖྗͰ4UBUFΛߋ৽͢Δ Ͳ͏΍ͬͯ࡞͔ͬͨ

Slide 35

Slide 35 text

4UBUFͷมߋΛ7JFXʹ൓өͤ͞Δ Ͳ͏΍ͬͯ࡞͔ͬͨ

Slide 36

Slide 36 text

4UBUFͷมߋΛτϦΨʹผͷॲཧΛߦ͏ Ͳ͏΍ͬͯ࡞͔ͬͨ

Slide 37

Slide 37 text

ਤʹͯ͠ΈΔ

Slide 38

Slide 38 text

Shared State Actions Store Component Component $BMM"DUJPO 5SJHHFS6QEBUF $IBOHF4UBUF Ͳ͏΍ͬͯ࡞͔ͬͨ

Slide 39

Slide 39 text

ʢ0QUJPOBMʣ&WFOU&NJUUFS౳ͰΠϕϯτΛڞ༗ 5SJHHFS6QEBUF Shared State Actions Store Component Component $BMM"DUJPO $IBOHF4UBUF Events &NJU&WFOU Ͳ͏΍ͬͯ࡞͔ͬͨ

Slide 40

Slide 40 text

ӡ༻ϧʔϧ ͳΔ΂͘ίϯϙʔωϯτ͔Β௚઀4UPSFͷঢ়ଶΛߋ৽͠ͳ͍ Ͳ͏΍ͬͯ࡞͔ͬͨ

Slide 41

Slide 41 text

طଘͷࢿ࢈ͷ౎߹্ ʮͳΔ΂͘ʯʹͱͲΊ͟ΔΛಘͳ͔ͬͨ

Slide 42

Slide 42 text

࣮ࡍ͸͜Μͳײ͡ʹʜ

Slide 43

Slide 43 text

͜ͷύλʔϯͰ͖Δ͜ͱ w ঢ়ଶʢ4UBUFʣͷڞ༗ w 7JFXͱϩδοΫͷ෼཭

Slide 44

Slide 44 text

͜ͷύλʔϯͰͰ͖ͳ͍͜ͱ w σʔλߋ৽ϑϩʔͷڧ੍ w ঢ়ଶͷมߋΛ࣮֬ʹ௥͏ ʢWVFEFWUPPMT࢖͑ͳ͍ʣ

Slide 45

Slide 45 text

࣮ࡍʹಠࣗͰ'MVYϥΠΫͳ ঢ়ଶ؅ཧύλʔϯΛ࣮૷ͯ͠ΈͯͲ͏͔ͩͬͨ

Slide 46

Slide 46 text

࣮ࡍͲ͏͔ͩͬͨ ౰ॳ΍Γ͔ͨͬͨ͜ͱ͸֓Ͷ࣮ݱͰ͖ͨ

Slide 47

Slide 47 text

࣮ݱͰ͖ͳ͔ͬͨ෦෼͸ӡ༻ͰΧόʔ ࣮ࡍͲ͏͔ͩͬͨ

Slide 48

Slide 48 text

ࢥͬͨ͜ͱᶃ ϝϯςφϯεੑΛߟ͑Ε͹'MVYత Ͱ͋Δ͜ͱ͸ॏཁɻ ͨͩ͠ɺͦΕΛϥΠϒϥϦͰ࣮ݱ ͢Δ͔։ൃνʔϜͷจԽͰ࣮ݱ͢ Δ͔ʹɺେࠩ͸ͳ͍ͷͰ͸ʁ

Slide 49

Slide 49 text

ϝϯςφϯεੑΛߟ͑Ε͹'MVYత Ͱ͋Δ͜ͱ͸ॏཁɻ ͨͩ͠ɺͦΕΛϥΠϒϥϦͰ࣮ݱ ͢Δ͔։ൃνʔϜͷจԽͰ࣮ݱ͢ Δ͔ʹɺେࠩ͸ͳ͍ͷͰ͸ʁ EJTQBUDIͯ͠ɺDPNNJUͯ͠ʜ Έ͍ͨͳͷ͸UPPNVDI͔΋ ࢥͬͨ͜ͱᶃ

Slide 50

Slide 50 text

7VFKTͷख͕ܰ͞޷͖ ࢥͬͨ͜ͱᶄ

Slide 51

Slide 51 text

ࢥͬͨ͜ͱᶅ اۀจԽ ૣ͍։ൃεϐʔυ յ͢લఏͰ࡞Δ ਐḿͷϓϩμΫτ ʢٕज़ελοΫ΋࢓༷΋େ͖͘มΘΓಘΔʣ ϛχϚϜͰ൚༻తͳ΋ͷΛ࡞ΕͨͷͰ ͜͏͍ͬͨ఺Ͱ͸ྑ͔͔ͬͨ΋ʁ

Slide 52

Slide 52 text

ಠࣗύλʔϯͰ͠͹Β͘։ൃͯ͠Έͨॴײ w ࠓͷͱ͜Ζී௨ʹυϥΠϒ͍ͯ͠Δ w ֶशίετ͕͔͔Βͳ͍ͷ͸(PPE w ϥΠϒϥϦΛհ͞ͳ͍ͷͰݟ௨͠ྑ޷ w ٯʹֶͼΛಘΒΕΔ͜ͱ΋ w WVFEFWUPPMT࢖ͬͯ4UPSFΛσόοάͰ͖ͳ͍ w ࣮૷΍ϨϏϡʔ͕ਓʹґଘ w ίϯϙʔωϯτ͔Β4UPSFͷTUBUFΛ௚઀ॻ͖׵͑ͯ ͠·͍ͬͯΔίʔυ͕૿͖͑ͯͯσόοάͮ͠Β͘ 1SPT $POT

Slide 53

Slide 53 text

݁࿦ طଘͷࢿ࢈౳Λߟྀ͠ͳͯ͘΋͍͍ͷͰ͋Ε͹ɺWVFY͸ ಋೖ͍ͯͬͨ͠ํ͕͍͍ͱࢥ͏ɻ ͱ͸ֶ͍͑शίετΛׂ͔ͣʹϛχϚϜͷ࣮૷͕͋Ε͹ े෼ͱ͍͏৔߹͸ɺಠࣗͰ࡞ͬͯΈΔͷ΋͋Γɻ

Slide 54

Slide 54 text

݁࿦ ͪͳΈʹʜ ,"35&͸ܥ͔Βܥ΁Ҡߦ͍ͯ͠Δ࠷தͳͷͰɺ ৽͘͠࡞Δ෦෼͔Β͸WVFYʹ͚͍ۙͮͯ͘ॴଘɻ

Slide 55

Slide 55 text

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