NgRxは入れるだけでいいのか? 
発生する懸念と考えられるアーキテクチャ / NgRx Architecture

NgRxは入れるだけでいいのか? 
発生する懸念と考えられるアーキテクチャ / NgRx Architecture

2019年3月27日、Classi Angular Night #2にて発表した資料です。

2bedb1eb8f841cd3c3ae584600b016e0?s=128

OKUNOKENTARO

March 27, 2019
Tweet

Transcript

  1. /H3Y͸ೖΕΔ͚ͩͰ͍͍ͷ͔ 
 ൃੜ͢Δݒ೦ͱߟ͑ΒΕΔΞʔΩςΫνϟ .BS $MBTTJ"OHVMBS/JHIU

  2. ୭ w Ԟ໺ݡଠ࿠!PLVOPLFOUBSP w ΫϨε΢ΣΞ୅ද w ΞϓϦέʔγϣϯ ɾ ΤϯδχΞ w

    "OHVMBS೔ຊϢʔβʔձ
 OHLZPUPΦʔΨφΠβ
  3. ຊ೔ͷ಺༰ w ͳͥΞʔΩςΫνϟΛߟ͑Δඞཁ͕͋Δ͔ w /H3Y͸ԿΛॿ͚Δ͔ w /H3Y͸ԿΛॿ͚ͯ͘Εͳ͍͔

  4. ͳͥΞʔΩςΫνϟΛߟ͑Δඞཁ͕͋Δ͔

  5. ੲ࿩ 5FNQMBUF)5.- "OHVMBS+4OHDPOUSPMMFS IUUQ "OHVMBS+4'JMUFS

  6. "OHVMBSWFS 5FNQMBUF)5.- !$PNQPOFOU )UUQ !BOHVMBSIUUQ "OHVMBS1JQF

  7. "OHVMBSWFS 5FNQMBUF)5.- !$PNQPOFOU )UUQ$MJFOU !BOHVMBSDPNNPOIUUQ "OHVMBS1JQF

  8. ྺ࢙ͷ஝ੵ 5FNQMBUF)5.- !$PNQPOFOU )UUQ$MJFOU !BOHVMBSDPNNPOIUUQ "OHVMBS1JQF

  9. 4FSWJDFΛ࡞ͬͯΈΔ 5FNQMBUF)5.- !$PNQPOFOU )UUQ$MJFOU !BOHVMBSDPNNPOIUUQ "OHVMBS1JQF 6TFST4FSWJDF "QJ4FSWJDF

  10. ͳΜͪΌΒ4FSWJDF૿͑͗͢໰୊ 5FNQMBUF)5.- !$PNQPOFOU )UUQ$MJFOU !BOHVMBSDPNNPOIUUQ "OHVMBS1JQF 6TFST4FSWJDF "QJ4FSWJDF 4PNFUIJOH"QJ1BSBNT#VJME4FSWJDF "OZUIJOH7BMVFT.FSHF4FSWJDF

    "VUI4FSWJDF (VBSE4FSWJDF 6MUSB(SFBU4FSWJDF
  11. ͜ΕΛ 5FNQMBUF)5.- !$PNQPOFOU )UUQ$MJFOU !BOHVMBSDPNNPOIUUQ "OHVMBS1JQF

  12. ͜͏ ͚ͨͩ͠ 5FNQMBUF)5.- !$PNQPOFOU )UUQ$MJFOU !BOHVMBSDPNNPOIUUQ "OHVMBS1JQF 6TFST4FSWJDF "QJ4FSWJDF 4PNFUIJOH"QJ1BSBNT#VJME4FSWJDF

    "OZUIJOH7BMVFT.FSHF4FSWJDF "VUI4FSWJDF (VBSE4FSWJDF 6MUSB(SFBU4FSWJDF
  13. ͳͥ4FSWJDF͕૿͑Δͷ͔ w ڊେͳDMBTTͷ෼ղΛ೦಄ʹஔ͍ͯ͠·ͬͯͳ͍͔ w ͦͷ4FSWJDF͕ ʮԿΛ͢ΔͨΊͷ4FSWJDF͔ʯ ։ൃऀࣗ਎͕ཧղ͍ͯ͠Δ͔ w ͨͩͷॲཧ܈ʹ໊લۭؒΛ༩͚͑ͨͩʹͳ͍ͬͯͳ͍͔

  14. ͳͥ4FSWJDF͕ඞཁͳͷ͔Λߟ͑Δ w ·ͣ"OHVMBSελΠϧΨΠ υʹै͏ͷ͸ྑ͍ϓϥΫςΟ ε w ࣍ʹҋӢʹ4FSWJDFΛ࡞Δ͜ͱΛආ͚ɺ ඞવతͳ4FSWJDFΛ࡞ΔΑ ͏ʹ͢Δ w

    431 ʢ4JOHMF3FTQPOTJCJMJUZ1SJODJQMF୯Ұ੹೚ݪଇʣ ʹϐϯͱདྷͳ͚Ε͹
 ͦͷ4FSWJDFͷΞϓϦέʔγϣϯ಺ͰͷݱࡏҐஔΛ೺Ѳ͢Δ
  15. աڈεϥΠ υΑ ΓҾ༻ https://speakerdeck.com/okunokentaro/angularzhong-da-gui-mo-apurishe-ji?slide=13
 https://speakerdeck.com/okunokentaro/angularzhong-da-gui-mo-apurishe-ji?slide=25 https://speakerdeck.com/okunokentaro/frontend-conference-fukuoka-2018?slide=63

  16. Ϟμϯ8FCΞϓϦέʔγϣϯ͕΍Γ͍ͨ͜ͱ ௨৴͍ͨ͠ ඳը͍ͨ͠

  17. ݱࡏҐஔΛҙࣝͨ͠ઃܭ $PNQPOFOUඳըدΓ )UUQ$MJFOU௨৴ৄࡉͷӅṭ 3FQPTJUPSZ௨৴دΓ 5FNQMBUFඳը "QJ4FSWJDF௨৴ 'BDBEF.FEJBUPSඳը㲗௨৴ؒͷந৅Խ ࠓॻ͍ͯΔίʔ υɺ 


    ඳըدΓ ʁ 
 ௨৴دΓ ʁ  ։ൃऀಉ࢜ͷ
 ڞ௨ೝࣝΛ࣋ͭ
  18. ͳͥ͜ΕͰ͸ͩΊ͔ ௨৴ ඳը

  19. ͢΂ͯ͸ςε τͷͨΊ ඳըͷςετΛ͠΍͘͢͢Δ ௨৴ औಘͨ͠ΤϯςΟςΟͷू߹ͳͲΛςετ͠΍͘͢͢Δ ඳը ࣮ࡍʹ௨৴ͤͣύϥϝʔλʹ͍ͭͯςετΛ͠΍͘͢͢Δ %0.஌ࣝΛؚ·ͳ͍ϩδοΫͷςετΛ͠΍͘͢͢Δ %3:ͱ͔
 40-*%ݪଇͱ͔͋Δ͚Ͳ


    શ෦ςε τͷͨΊͷ
 Α ͏ͳ΋Μ
  20. ͦͷ4FSWJDF͸ͳΜͷͨΊ ʁ ඳըͷςετΛ͠΍͘͢͢ΔͨΊʁ ௨৴ औಘͨ͠ΤϯςΟςΟͷू߹ͳͲΛςετ͠΍͘͢͢ΔͨΊʁ ඳը ࣮ࡍʹ௨৴ͤͣύϥϝʔλʹ͍ͭͯςετΛ͠΍͘͢͢ΔͨΊʁ %0.஌ࣝΛؚ·ͳ͍ϩδοΫͷςετΛ͠΍͘͢͢ΔͨΊʁ

  21. /H3Y͸ԿΛॿ͚Δ͔

  22. /H3Y͸Կ͔ w /H3Y͸ΞʔΩςΫνϟͰ͸ͳ͍ w ௨৴ʹΑͬͯऔಘͨ͠σʔλ΍ɺ Ϣʔβͷૢ࡞ʹΑͬͯੜ·Εͨม਺Λ
 ֨ೲ͓ͯͨ͘͠Ίͷγϯάϧ τϯ w -B[ZMPBEΛߟྀ͢Δͱඞਢͷػߏ

    w /H3Yʹ֨ೲ͞Εͨ஋܈Λ࢖༻͢Δखஈͷఏڙͱ
 ύϑΥʔϚϯεʹؔ͢ΔॲཧͷӅṭ
  23. /H3YΛ࢖Θͳ͍ͱ͖ $PNQPOFOU )UUQ$MJFOU 3FQPTJUPSZ 5FNQMBUF "QJ4FSWJDF 'BDBEF.FEJBUPS new ReplaySubject() new

    ReplaySubject() new ReplaySubject() new ReplaySubject()
  24. /H3YΛಋೖ )UUQ$MJFOU 5FNQMBUF /H3Y $PNQPOFOU "QJ4FSWJDF

  25. /H3Y͸ԿΛॿ͚ͯ ͘Εͳ͍͔

  26. ༉அ͢Δͱ͜͏ͳΔ )UUQ$MJFOU 5FNQMBUF /H3Y 'FBUVSF 'FBUVSF $PNQPOFOU "QJ4FSWJDF 4FMFDUPS 4FMFDUPS

    4FMFDUPS 4FMFDUPS 4FMFDUPS 4FMFDUPS 4FMFDUPS &GGFDUT &GGFDUT &GGFDUT &GGFDUT &GGFDUT &GGFDUT /H3Y͸ΞʔΩςΫνϟ
 Ͱ͸ͳ͍ 
 ผ్ߟ͑Δඞཁ͕͋Δ
  27. /H3Y ϨΠϠʔΛҙࣝͨ͠/H3YͷཱͪҐஔ $PNQPOFOUը໘಺ͰͰ͖Δ͜ͱͱɺࣸ͢΋ͷΛ஥հ 5FNQMBUFը໘ )UUQ$MJFOU 3FQPTJUPSZ "QJ4FSWJDF 2VFSJFT
 ͦͷը໘ʹ͸ԿΛࣸ͢ʁ $PNNBOET


    ͦͷը໘Ͱ͸Կ͕Ͱ͖Δʁ 'FBUVSF 'FBUVSF 'FBUVSF 'FBUVSF
  28. &GGFDUT͸ิࠤ 5FNQMBUFը໘ )UUQ$MJFOU 3FQPTJUPSZ "QJ4FSWJDF 2VFSJFT
 ͦͷը໘ʹ͸ԿΛࣸ͢ʁ $PNNBOET
 ͦͷը໘Ͱ͸Կ͕Ͱ͖Δʁ /H3Y&GGFDUT

    $PNQPOFOUը໘಺ͰͰ͖Δ͜ͱͱɺࣸ͢΋ͷΛ஥հ /H3Y 'FBUVSF 'FBUVSF 'FBUVSF 'FBUVSF
  29. &GGFDUT͸ଟ༻͠ͳ͍ w ෭࡞༻͕ଘࡏ͠ͳ͍ͳΒ͹ɺ 9)3͕བྷΉͱ͍͏͚ͩͰ&GGFDUTΛ࢖༻͠ͳ͍ w UBQ ͕ग़ͯ͜ͳ͚Ε͹&GGFDUTͰ͋Δඞཁ͸΄΅ແ͍ • https://www.notion.so/Learn-NgRx-a6fa8691e2584682949852183254bebd

  30. 4FMFDUPSΛཧղ͢Δ w $PNQPOFOUʹTFMFDU ͷࢁΛங͍͍ͯͳ͍͔ w UIJTTUPSF͸EJTQBUDI΋TVCTDSJCF΋Ͱ͖ΔҰํɺ ςε τ͠ʹ͍͘
 'BDBEFͳΓ.FEJBUPSͳΓͰӅṭ͢Δ w

    લͷਤͩͱ$PNNBOET 2VFSJFTͱͯ͠Ϋϥε໊ʹσʔλϑϩʔํ޲Λ໌ه
 ʢ$234ΞʔΩςΫνϟΑ Γண૝ʣ  w 'FBUVSFͷࡉ෼Խ͗͢͠ʹཁ஫ҙ
 ࡉ෼Խ͗ͯ͢͠͠·ͬͨͳΒ2VFSJFTͰґଘΛٵऩ w $PNQPOFOUͰ͸େྔͷ4FMFDUPSʹґଘ͠ͳ͍ ʢґଘੑ஫ೖͷԸܙ͕ಘΒΕͳ͍ʣ
  31. ͳΜͷͨΊͷ4FSWJDF͔ҙࣝ͢Δ w ΞϓϦέʔγϣϯશମʹ͓͍ͯ
 ֤͕ࣗࣗ෼͸ԿΛ͢΂͖DMBTTͳͷ͔ҙࣝͤΑ w ͢΂ͯΛ ʮͳΜͪΌΒ4FSWJDFʯ ʹ͢Δ ͘ Β͍ͳΒ


    ͍ͬͦ໾ׂΛϋοΩ Ϧ ໋໊ͤͨ͞ͷ΄͏͕Α͍ ʢ˞ͨͩ͠"OHVMBSελΠϧΨΠ υ֎ʣ
  32. 5IBOLZPV গ͠ͷ޻෉Ͱߴ͍ੜ࢈ੑΛ