$30 off During Our Annual Pro Sale. View Details »

vuexを使ってみなかった話

 vuexを使ってみなかった話

atsushiss15

March 17, 2017
Tweet

Other Decks in Technology

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