vuexを使ってみなかった話

 vuexを使ってみなかった話

F7720aee705c8f0f9c17d953a9d93e5d?s=128

atsushiss15

March 17, 2017
Tweet

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 5SJHHFS6QEBUF $IBOHF4UBUF Ͳ͏΍ͬͯ࡞͔ͬͨ

  39. ʢ0QUJPOBMʣ&WFOU&NJUUFS౳ͰΠϕϯτΛڞ༗ 5SJHHFS6QEBUF Shared State Actions Store Component Component $BMM"DUJPO $IBOHF4UBUF

    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ͯ͠ʜ Έ͍ͨͳͷ͸UPPNVDI͔΋ ࢥͬͨ͜ͱᶃ

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

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

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

    WVFEFWUPPMT࢖ͬͯ4UPSFΛσόοάͰ͖ͳ͍ w ࣮૷΍ϨϏϡʔ͕ਓʹґଘ w ίϯϙʔωϯτ͔Β4UPSFͷTUBUFΛ௚઀ॻ͖׵͑ͯ ͠·͍ͬͯΔίʔυ͕૿͖͑ͯͯσόοάͮ͠Β͘ 1SPT $POT
  53. ݁࿦ طଘͷࢿ࢈౳Λߟྀ͠ͳͯ͘΋͍͍ͷͰ͋Ε͹ɺWVFY͸ ಋೖ͍ͯͬͨ͠ํ͕͍͍ͱࢥ͏ɻ ͱ͸ֶ͍͑शίετΛׂ͔ͣʹϛχϚϜͷ࣮૷͕͋Ε͹ े෼ͱ͍͏৔߹͸ɺಠࣗͰ࡞ͬͯΈΔͷ΋͋Γɻ

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

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