vuexを使ってみなかった話

Transcript

1. WVFYΛ࢖ͬͯΈͳ͔ͬͨ࿩

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

17. 7VFKTʹ΋WVFYͳΔ΋ͷ͕Ͱ͖͍ͯͨʂ

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

19. IUUQTWVFYWVFKTPSHKBJOUSPIUNM WVFYͱ͸

20. WVFYͱ͸

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

22. WVFYͱ͸ ΞΫγϣϯΛEJTQBUDI

23. WVFYͰͰ͖Δ͜ͱ w ঢ়ଶͷڞ༗
    w 7JFXͱϩδοΫͷ෼཭
    w ঢ়ଶͷมߋΛ࣮֬ʹ௥͍͔͚Δ͜ͱ͕Ͱ͖Δ
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ʢWVFEFWUPPMT͕࢖͑Δɻศརʂʣ
    w 'MVY࣮૷ΛϥΠϒϥϦ͕ڧ੍ͯ͘͠ΕΔͷͰ
    
    
    

    σόοάɾίʔυϨϏϡʔͳͲ৭ʑָʹͳΔ

24. WVFYͰͰ͖Δ͜ͱ WVFEFWUPPMT

25. ੋඇͱ΋ಋೖ͍ͨ͠ʂ

26. ͔͠͠ʜ

27. WVFYΛಋೖ͢Δࡍͷো֐ w طଘͷࢿ࢈ͷஔ͖׵͕͑ࠔ೉
    w ঢ়ଶΛ࣋ͬͨ
    EJSFDUJWF
    ΍
    VUJM
    ͕େྔʹ͋ͬͨ
    w ෳࡶԽ͍ͯͨ͠ίϯϙʔωϯτ಺ͷϩδοΫͱঢ়ଶ w ֶशίετతͳଆ໘
    w

    ϑϩϯτΤϯυͷઐ໳ՈҎ֎΋։ൃʹՃΘΔͷͰഅ ࣛʹͳΒͳ͍ʜ

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

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

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

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

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

33. ͜ΕͰ४උ׬ྃ

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

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

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

37. ਤʹͯ͠ΈΔ

38. Shared State Actions Store Component Component $BMM
    "DUJPO 5SJHHFS
    6QEBUF $IBOHF
    4UBUF Ͳ͏΍ͬͯ࡞͔ͬͨ

39. ʢ0QUJPOBMʣ&WFOU&NJUUFS౳ͰΠϕϯτΛڞ༗ 5SJHHFS
    6QEBUF Shared State Actions Store Component Component $BMM
    "DUJPO $IBOHF
    4UBUF

    Events &NJU
    &WFOU Ͳ͏΍ͬͯ࡞͔ͬͨ

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

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

42. ࣮ࡍ͸͜Μͳײ͡ʹʜ

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

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

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

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

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

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

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

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

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

52. ಠࣗύλʔϯͰ͠͹Β͘։ൃͯ͠Έͨॴײ w ࠓͷͱ͜Ζී௨ʹυϥΠϒ͍ͯ͠Δ
    w ֶशίετ͕͔͔Βͳ͍ͷ͸(PPE
    w ϥΠϒϥϦΛհ͞ͳ͍ͷͰݟ௨͠ྑ޷
    w ٯʹֶͼΛಘΒΕΔ͜ͱ΋ w

    WVFEFWUPPMT
    ࢖ͬͯ4UPSFΛσόοάͰ͖ͳ͍
    w ࣮૷΍ϨϏϡʔ͕ਓʹґଘ
    w ίϯϙʔωϯτ͔Β4UPSFͷTUBUFΛ௚઀ॻ͖׵͑ͯ ͠·͍ͬͯΔίʔυ͕૿͖͑ͯͯσόοάͮ͠Β͘ 1SPT $POT

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

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

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