vuexを使ってみなかった話

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. IUUQTWVFYWVFKTPSHKBJOUSPIUNM
    WVFYͱ͸
    

    View Slide

20. WVFYͱ͸
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. WVFYͰͰ͖Δ͜ͱ
    WVFEFWUPPMT
    

    View Slide

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

    View Slide

26. ͔͠͠ʜ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

33. ͜ΕͰ४උ׬ྃ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

37. ਤʹͯ͠ΈΔ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide