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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ