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

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

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+4
   OHDPOUSPMMFS IUUQ "OHVMBS+4
   'JMUFS
6. "OHVMBS
   WFS
   
   5FNQMBUF
   )5.- !$PNQPOFOU )UUQ
   !BOHVMBSIUUQ "OHVMBS
   1JQF
7. "OHVMBS
   WFS
   
   5FNQMBUF
   )5.- !$PNQPOFOU )UUQ$MJFOU
   !BOHVMBSDPNNPOIUUQ "OHVMBS
   1JQF
8. ྺ࢙ͷ஝ੵ
   
   5FNQMBUF
   )5.- !$PNQPOFOU )UUQ$MJFOU
   !BOHVMBSDPNNPOIUUQ "OHVMBS
   1JQF
9. 4FSWJDFΛ࡞ͬͯΈΔ
   
   5FNQMBUF
   )5.- !$PNQPOFOU )UUQ$MJFOU
   !BOHVMBSDPNNPOIUUQ "OHVMBS
   1JQF 6TFST4FSWJDF "QJ4FSWJDF
10. ͳΜͪΌΒ4FSWJDF૿͑͗͢໰୊
    
    5FNQMBUF
    )5.- !$PNQPOFOU )UUQ$MJFOU
    !BOHVMBSDPNNPOIUUQ "OHVMBS
    1JQF 6TFST4FSWJDF "QJ4FSWJDF 4PNFUIJOH"QJ1BSBNT#VJME4FSWJDF "OZUIJOH7BMVFT.FSHF4FSWJDF "VUI4FSWJDF (VBSE4FSWJDF 6MUSB(SFBU4FSWJDF
11. ͜ΕΛ
    
    5FNQMBUF
    )5.- !$PNQPOFOU )UUQ$MJFOU
    !BOHVMBSDPNNPOIUUQ "OHVMBS
    1JQF
12. ͜͏ ͚ͨͩ͠
    
    5FNQMBUF
    )5.- !$PNQPOFOU )UUQ$MJFOU
    !BOHVMBSDPNNPOIUUQ "OHVMBS
    1JQF 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
    ʢ4JOHMF
    3FTQPOTJCJMJUZ
    1SJODJQMF
    ୯Ұ੹೚ݪଇʣ
    ʹϐϯͱདྷͳ͚Ε͹
 ͦͷ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[Z
    MPBEΛߟྀ͢Δͱඞਢͷػߏ
    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. 5IBOL
    ZPV গ͠ͷ޻෉Ͱߴ͍ੜ࢈ੑΛ