Angular with RxJS

* RxJSの基礎(ざっくり)
* RxJSを使いたいモチベーション
* RxJSをAngularで使っていくためには
* RxJSを活用してAngular Componentを実装する

Transcript

1. Angular with RxJS
   

   View Slide

2. 3Y+4ͷجૅ
   3Y+4Λ࢖͍͍ͨϞνϕʔγϣϯ
   3Y+4Λ"OHVMBSͰ࢖͍ͬͯͨ͘Ίʹ͸
   3Y+4Λ׆༻ͯ͠"OHVMBS$PNQPOFOUΛ࣮૷͢Δ
   3Y+4ͷςετʹ͍ͭͯ
   

   View Slide

3. RxJSͷجૅ
   

   View Slide

4. RxJSͷجૅ
   3Y+4͸ɺ؂ࢹՄೳͳγʔέϯεΛ࢖༻ͯ͠ඇಉظ͓Αͼ
   ΠϕϯτϕʔεͷϓϩάϥϜΛ࡞੒͢ΔͨΊͷϥΠϒϥϦͰ͢
   IUUQTSYKTEFWpSFCBTFBQQDPNHVJEFPWFSWJFX
   

   View Slide

5. "OHVMBSͷఏڙ͍ͯ͠Δ.PEVMF͸ɺ͜ͷ3Y+4ϕʔεͷΠϯλʔϑΣʔεʹͳ͍ͬͯΔ΋ͷ͕ଟ͍
   )UUQ$MJFOU 'PSN$POUSPM "DUJWBUFE3PVUF FUD
   RxJSͷجૅ
   

   View Slide

6. جຊߏ੒
   Observable
   Subject
   Operator
   RxJSͷجૅ
   

   View Slide

7. جຊߏ੒
   Observable
   Subject
   Operator
   RxJSͷجૅ
   ͍ͩͿͬ͘͟Γͨ͠આ໌ʹͳΔͷͰɺৄࡉ͸υΩϡϝϯτΛಡΉ͜ͱΛ͓͢͢Ί͠·͢ʜ
   

   View Slide

8. جຊߏ੒
   Observable
   Subject
   Operator
   Observable
   RxJSͷجૅ
   ετϦʔϜͷΑ͏ͳ΋ͷɻ
   TVCTDSJCF͢Δ͜ͱͰɺ಺෦Ͱൃߦ͞Εͨ஋Λड͚औΔ͜ͱ͕Ͱ͖Δɻ
   

   View Slide

9. جຊߏ੒
   Observable
   Subject
   Operator
   Observable
   RxJSͷجૅ
   ετϦʔϜͷΑ͏ͳ΋ͷɻ
   TVCTDSJCF͢Δ͜ͱͰɺ಺෦Ͱൃߦ͞Εͨ஋Λड͚औΔ͜ͱ͕Ͱ͖Δɻ
   

   View Slide

10. جຊߏ੒
    Observable
    Subject
    Operator
    Observable
    RxJSͷجૅ
    ετϦʔϜͷΑ͏ͳ΋ͷɻ
    TVCTDSJCF͢Δ͜ͱͰɺ಺෦Ͱൃߦ͞Εͨ஋Λड͚औΔ͜ͱ͕Ͱ͖Δɻ
    

    View Slide

11. جຊߏ੒
    Observable
    Subject
    Operator
    Observable
    RxJSͷجૅ
    0CTFSWBCMFͩͱɺ֎෦͔Β஋ͷൃߦΛߦ͏͜ͱ͕Ͱ͖ͳ͍ɻ
    

    View Slide

12. جຊߏ੒
    Observable
    Subject
    Operator
    Observable
    RxJSͷجૅ
    https://rxjs-dev.firebaseapp.com/guide/observable
    ৄ͘͠͸ͪ͜Β
    

    View Slide

13. جຊߏ੒
    Observable
    Subject
    Operator
    Operator
    RxJSͷجૅ
    ετϦʔϜʹྲྀΕΔ஋ʹԿ͔͠Βͷૢ࡞Λߦ͏ؔ਺ɻ
    ྫɿNBQΦϖϨʔλ͸ɺҾ਺ʹࢦఆ͞Εͨؔ਺ͷฦΓ஋ΛετϦʔϜʹྲྀ͢ɻ
    

    View Slide

14. جຊߏ੒
    Observable
    Subject
    Operator
    Operator
    RxJSͷجૅ
    ετϦʔϜʹྲྀΕΔ஋ʹԿ͔͠Βͷૢ࡞Λߦ͏ؔ਺ɻ
    ྫɿNBQΦϖϨʔλ͸ɺҾ਺ʹࢦఆ͞Εͨؔ਺ͷฦΓ஋ΛετϦʔϜʹྲྀ͢ɻ
    

    View Slide

15. جຊߏ੒
    Observable
    Subject
    Operator
    Operator
    RxJSͷجૅ
    ετϦʔϜʹྲྀΕΔ஋ʹԿ͔͠Βͷૢ࡞Λߦ͏ؔ਺ɻ
    ྫɿNBQΦϖϨʔλ͸ɺҾ਺ʹࢦఆ͞Εͨؔ਺ͷฦΓ஋ΛετϦʔϜʹྲྀ͢ɻ
    

    View Slide

16. جຊߏ੒
    Observable
    Subject
    Operator
    Operator
    RxJSͷجૅ
    ετϦʔϜʹྲྀΕΔ஋ʹԿ͔͠Βͷૢ࡞Λߦ͏ؔ਺ɻ
    ྫɿNBQΦϖϨʔλ͸ɺҾ਺ʹࢦఆ͞Εͨؔ਺ͷฦΓ஋ΛετϦʔϜʹྲྀ͢ɻ
    

    View Slide

17. جຊߏ੒
    Observable
    Subject
    Operator
    Operator
    RxJSͷجૅ
    https://rxjs-dev.firebaseapp.com/guide/operators
    ৄ͘͠͸ͪ͜Β
    

    View Slide

18. جຊߏ੒
    Observable
    Subject
    Operator
    Subject
    RxJSͷجૅ
    0CTFSWBCMF֎෦͔Β஋ΛൃߦͰ͖ΔΑ͏ʹͨ͠΋ͷɻ
    

    View Slide

19. جຊߏ੒
    Observable
    Subject
    Operator
    Subject
    RxJSͷجૅ
    https://rxjs-dev.firebaseapp.com/guide/subject
    ৄ͘͠͸ͪ͜Β
    

    View Slide

20. ஋ͷมԽ΍ΠϕϯτͷൃՐΛݕ஌͠ɺͦΕΛτϦΨʹॲཧΛߦ͏͜ͱ͕Ͱ͖Δ
    RxJSͷجૅ
    

    View Slide

21. Ϙλϯ͕ΫϦοΫ͞Εͨ࣌ʹɺDPOTPMFʹFWFOUΛදࣔ͢Δ
    RxJSͷجૅ
    

    View Slide

22. JUFNTͷ஋ʹมԽ͕͋ͬͨ࣌ʹɺαʔόଆͱ஋Λಉظ͢Δ
    RxJSͷجૅ
    

    View Slide

23. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    

    View Slide

24. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    ݸਓతͳݟղΛ࿩͠·͢
    

    View Slide

25. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    8FCΞϓϦέʔγϣϯ͸ෳࡶ
    
    ؅ཧ͢Δঢ়ଶ͕ଟ͍
    ϋϯυϦϯά͢ΔΠϕϯτ͕ଟ͍
    ը໘͔ΒͷΠϕϯτ΍αʔόͱͷ΍ΓͱΓͳͲ
    

    View Slide

26. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    ࣮૷͍ͯ࣌͘͠ʹҙࣝ͢ΔϙΠϯτ
    Ͳ͏͍͏Πϕϯτ΍ঢ়ଶͷมԽ͕͋ͬͨ࣌ʹɺͲ͏͍͏ॲཧΛ΍Βͳ͍ͱ͍͚ͳ͍ͷ͔
    

    View Slide

27. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    ࣮૷͍ͯ࣌͘͠ʹҙࣝ͢ΔϙΠϯτ
    Ͳ͏͍͏Πϕϯτ΍ঢ়ଶͷมԽ͕͋ͬͨ࣌ʹɺͲ͏͍͏ॲཧΛ΍Βͳ͍ͱ͍͚ͳ͍ͷ͔
    ͱ͍͏ͱ͜Ζʹͳͬͯ͘Δؾ͕͢Δ
    

    View Slide

28. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    ྫ͑͹ʜ
    

    View Slide

29. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    ಈըΛΫϦοΫͨ͠ͱ͖ɺಈըͷ࠶ੜը໘ʹભҠ͢Δ
    :PV5VCF
    

    View Slide

30. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    *TTVFʹ)PWFSͨ͠ͱ͖ɺ*TTVF৘ใΛϙοϓΞοϓදࣔ͢Δ
    (JU)VC
    

    View Slide

31. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    จࣈͰ΋ೖྗ͞Ε͍ͯͨͱ͖ɺૹ৴ϘλϯΛΞΫςΟϒʹ͢Δ
    (PPHMF$IBU
    

    View Slide

32. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    ͲΕ͔ͷදࣔ৚͕݅มߋ͞Εͨͱ͖ɺ৚݅ʹجͮ͘σʔλͷ࠶औಘΛߦ͍͍ͨ
    "TBOB
    

    View Slide

33. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    ༧ఆΛ࡞੒͢Δ࣌ʹ͕࣌ؒมߋ͞Εͨͱ͖ɺΧϨϯμʔ্ͷ֘౰࣌ؒଳʹΧʔυ͕දࣔ͞ΕΔ
    (PPHMF$BMFOEBS
    

    View Slide

34. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    ஋ͷมԽ΍ΠϕϯτͷൃՐΛݕ஌͠ɺͦΕΛτϦΨʹॲཧΛߦ͏͜ͱ͕Ͱ͖Δ
    ʮ999ͨ͠ͱ͖ɺ:::Λߦ͏ʯͱ͍͏ϢʔεέʔεΛએݴతʹ࣮૷Ͱ͖Δ
    3Y+4Λ࢖͏ͱ
    

    View Slide

35. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    ಈըΛΫϦοΫͨ͠ͱ͖ɺಈըͷ࠶ੜը໘ʹભҠ͢Δ
    

    View Slide

36. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    จࣈͰ΋ೖྗ͞Ε͍ͯͨͱ͖ɺૹ৴ϘλϯΛΞΫςΟϒʹ͢Δ
    

    View Slide

37. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    ༧ఆΛ࡞੒͢Δ࣌ʹ͕࣌ؒมߋ͞Εͨͱ͖ɺΧϨϯμʔ্ͷ֘౰࣌ؒଳʹΧʔυ͕දࣔ͞ΕΔ
    

    View Slide

38. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    ͲΕ͔ͷදࣔ৚͕݅มߋ͞Εͨͱ͖ɺ৚݅ʹجͮ͘σʔλͷ࠶औಘΛߦ͍͍ͨ
    

    View Slide

39. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    ͲΕ͔ͷදࣔ৚͕݅มߋ͞Εͨͱ͖ɺ৚݅ʹجͮ͘σʔλͷ࠶औಘΛߦ͍͍ͨ
    දࣔ৚͕݅มߋ͞Εͨͱ͖ɺ-PDBM4UPSBHFʹ৚݅Λอଘ͍ͨ͠
    

    View Slide

40. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    ͲΕ͔ͷදࣔ৚͕݅มߋ͞Εͨͱ͖ɺ৚݅ʹجͮ͘σʔλͷ࠶औಘΛߦ͍͍ͨ
    දࣔ৚͕݅มߋ͞Εͨͱ͖ɺ-PDBM4UPSBHFʹ৚݅Λอଘ͍ͨ͠
    طଘͷ࣮૷ʹӨڹΛ༩͑Δ͜ͱͳ͘ɺؔ৺͝ͱʹ࣮૷Λ௥ՃͰ͖Δ
    

    View Slide

41. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    ʮ999ͨ͠ͱ͖ɺ:::Λߦ͏ʯͱ͍͏ϢʔεέʔεΛಉ͡Α͏ͳߏจͰએݴతʹ࣮૷Ͱ͖Δ
    3Y+4Λ࢖͏ͱ
    

    View Slide

42. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    "OHVMBSͷ50%0ΞϓϦέʔγϣϯͷαϯϓϧ
    3Y+4Λ࢖Θͳ͍࣮૷ྫ
    

    View Slide

43. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    3Y+4Λ࢖Θͳ͍࣮૷ྫ
    

    View Slide

44. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    UIJTJUFNT·ͨ͸ϑΟϧλ৚݅ʹมߋ͕͋ͬͨͱ͖ɺ
    UIJTpMUFSFE*UFNTΛߋ৽͢Δඞཁ͕͋Δ
    3Y+4Λ࢖Θͳ͍࣮૷ྫ
    ͦΕͧΕͷϝιουͷதͰɺ
    ຊདྷ΍Γ͍ͨ͜ͱҎ֎ͷॲཧ͕ߦΘΕͯΔ
    

    View Slide

45. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    "OHVMBSͷ50%0ΞϓϦέʔγϣϯͷαϯϓϧ
    3Y+4Λ࢖࣮ͬͨ૷ྫ
    

    View Slide

46. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    3Y+4Λ࢖࣮ͬͨ૷ྫ
    

    View Slide

47. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    3Y+4Λ࢖࣮ͬͨ૷ྫ
    pMUFSFE*UFNT͸ɺ
    UIJTJUFNT·ͨ͸UIJTpMUFS$POEJUJPOʹมԽ͕͋ͬͨͱ͖ɺ
    DPOEJUJPOʹΑͬͯJUFNT͕ϑΟϧλ͞Εͨ஋Ͱ͋Δɻ
    

    View Slide

48. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    3Y+4Λ࢖࣮ͬͨ૷ྫ
    BEE͞Εͨͱ͖ɺJUFNTʹ৽͍͠JUFN͕௥Ճ͞ΕΔ
    SFNPWF͞Εͨͱ͖ɺJUFNT͔Βର৅ͷJUFN͕࡟আ͞ΕΔ
    

    View Slide

49. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    ʮ999ͨ͠ͱ͖ɺ:::Λߦ͏ʯͱ͍͏ϢʔεέʔεΛಉ͡Α͏ͳߏจͰએݴతʹ࣮૷Ͱ͖Δ
    3Y+4Λ࢖͏ͱ
    ɾ࣮૷͢Δͱ͖͸ɺ࣮૷͢ΔϢʔεέʔεͷΈʹؔ৺Λ෷͑͹͍͍
    ɾίʔυΛಡΉͱ͖͸ɺ࣮૷͞ΕͨએݴΛಡΉ͜ͱͰɺͲ͏͍͏࣌ʹԿ͕ߦΘΕΔ͔ɺ
    ɹͲ͏͍͏࣌ʹ͜ͷ஋͕Ͳ͏มԽ͢Δ͔ͱ͍͏ͷΛ೺ѲͰ͖Δɻ
    

    View Slide

50. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    "OHVMBSͷύϑΥʔϚϯε
    

    View Slide

51. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    "OHVMBSͷύϑΥʔϚϯε
    rx-angular introduction εϥΠυ
    rx-angular introduction Youtube
    ը໘ඳըॲཧͷ࠷దԽ
    

    View Slide

52. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    "OHVMBSͷύϑΥʔϚϯε
    UFNQMBUF͔ΒHFUUFSΛࢀরͨ࣌͠ͷσϝϦοτ
    UFNQMBUF͔ΒHFUUFSΛࢀর͠ͳͯ͘Α͘ͳΔ
    ը໘ඳը࣌ʹຖճHFUUFSͷॲཧ͕ߦΘΕΔ
    

    View Slide

53. RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸
    

    View Slide

54. RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸
    .VMUJDBTU
    )PU$PME
    4VCTDSJQUJPOͷ؅ཧ
    ओཁͳ0QFSBUPS
    "OHVMBSͷ"TZOD1JQF
    

    View Slide

55. "OHVMBSͷ"TZOD1JQF
    RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸
    

    View Slide

56. "OHVMBSͷ"TZOD1JQF
    "TZOD1JQF
    ࣗಈͰPCTFSWBCMFͳ஋ΛTVCTDSJCF͠ɺ࠷৽ͷ஋Λฦ٫͢Δ
    RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸
    

    View Slide

57. ओཁͳ0QFSBUPS
    RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸
    

    View Slide

58. ओཁͳ0QFSBUPS
    map
    filter
    tap
    combineLatest
    merge
    take
    takeUntil
    mergeMap
    distinctUntilChanged
    withLatestFrom
    RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸
    

    View Slide

59. .VMUJDBTU
    RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸
    

    View Slide

60. .VMUJDBTU
    ετϦʔϜΛڞ༗͢Δ͔Ͳ͏͔
    IUUQTEFWUPSYKTSFTFBSDIPOSFBDUJWFFQIFNFSBMTUBUFJODPNQPOFOUPSJFOUFEGSBNFXPSLTML
    RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸
    

    View Slide

61. .VMUJDBTU
    RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸
    

    View Slide

62. .VMUJDBTU
    .VMUJDBTUʹม׵͢Δ0QFSBUPS
    Learn RxJS / Multicasting
    RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸
    

    View Slide

63. .VMUJDBTU
    Research on Reactive-Ephemeral-State in component-oriented frameworks#Sharing State and state derivations
    RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸
    

    View Slide

64. )PU$PME
    RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸
    

    View Slide

65. )PU$PME
    TVCTDSJCF͍ͯ͠ͳͯ͘΋஋Λྲྀ͔͢Ͳ͏͔
    Hot vs Cold Observables
    RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸
    

    View Slide

66. TVCTDSJCF͍ͯ͠ͳͯ͘΋஋Λྲྀ͔͢Ͳ͏͔
    Hot vs Cold Observables
    )PUʹ͢Δͱɺ.VMUJDBTUʹ΋ͳΔ
    )PU$PME
    RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸
    

    View Slide

67. $PMEͳ0CTFSWBCMFͷ৔߹ɺTVCTDSJCF͢Δલʹൃߦ͞Εͨ஋͕र͑ͳ͍
    Research on Reactive-Ephemeral-State in component-oriented frameworks#The Late Subscriber Problem
    )PU$PME
    RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸
    

    View Slide

68. $PMEͳ0CTFSWBCMFͷ৔߹ɺTVCTDSJCF͢Δલʹൃߦ͞Εͨ஋͕र͑ͳ͍
    Research on Reactive-Ephemeral-State in component-oriented frameworks#The Late Subscriber Problem
    ͜ΕΛղܾ͢ΔͨΊʹ͸ʜ
    )PU$PME
    RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸
    

    View Slide

69. )PU$PME
    QVCMJTIΦϖϨʔλDPOOFDU
    RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸
    

    View Slide

70. )PU$PME
    QVCMJTI3FQMBZΦϖϨʔλDPOOFDU
    RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸
    

    View Slide

71. )PU$PME
    TIBSFΦϖϨʔλTVCTDSJCF TVCTDSJCF͢Δ·Ͱ)PUͰ͸ͳ͍
    
    RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸
    

    View Slide

72. )PU$PME
    TIBSF3FQMBZΦϖϨʔλTVCTDSJCF TVCTDSJCF͢Δ·Ͱ)PUͰ͸ͳ͍
    
    RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸
    

    View Slide

73. )PU$PME
    DPOOFDUͰ)PUʹͳΔɻ
    QVCMJTI TIBSF
    ࠷ॳͷTVCTDSJCFͰ)PUʹͳΔɻ
    refCount
    RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸
    

    View Slide

74. )PU$PME
    DPOOFDUޙʹOFYU͞Εͨ࠷৽ͷ஋͕औಘͰ͖Δ
    QVCMJTI3FQMBZ TIBSF3FQMBZ
    ࠷ॳͷTVCTDSJCFޙʹOFYU͞Εͨ࠷৽ͷ஋͕औಘͰ͖Δ
    TVCTDSJCF࣌ʹ࠷৽ͷ஋Λऔಘ͍ͨ͠৔߹
    RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸
    

    View Slide

75. )PU$PME
    DPOOFDUޙʹOFYU͞Εͨ࠷৽ͷ஋͕औಘͰ͖Δ
    QVCMJTI3FQMBZ TIBSF3FQMBZ
    ࠷ॳͷTVCTDSJCFޙʹOFYU͞Εͨ࠷৽ͷ஋͕औಘͰ͖Δ
    TVCTDSJCF࣌ʹ࠷৽ͷ஋Λऔಘ͍ͨ͠৔߹
    DPOOFDUલɺTVCTDSJCFલʹOFYU͞Εͨ࠷৽ͷ஋Λऔಘ͍ͨ͠৔߹
    4VCKFDUΛ#FIBWJPS4VCKFDUʹ͢Δ
    RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸
    

    View Slide

76. )PU$PME
    #FIBWJPS4VCKFDUͱTIBSF3FQMBZ
    Λར༻͢Δ͜ͱͰɺ
    ৗʹTVCTDSJCF࣌ʹ࠷৽ͷ஋ΛऔಘͰ͖Δɻ
    RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸
    

    View Slide

77. )PU$PME
    #FIBWJPS4VCKFDUͱTIBSF3FQMBZ
    Λར༻͢Δ͜ͱͰɺ
    ৗʹTVCTDSJCF࣌ʹ࠷৽ͷ஋ΛऔಘͰ͖Δɻ
    4VCKFDUQVCMJTI3FQMBZ
    DPOOFDUͰ΋ಉ༷ͷಈ࡞ʹͳΔ͕ɺ
    ͲͪΒ͕ద͍ͯ͠Δͷ͔͸Θ͔Βͳ͍ʜ
    SYBOHVMBSTUBUFͰ͸ɺ4VCKFDUQVCMJTI3FQMBZ
    DPOOFDUͰ࣮૷͞Ε͍ͯΔɻ
    TVCTDSJCFͤͣʹ)PUʹͳΔͱ͍͏ͱ͜Ζ͕ϙΠϯτͷΑ͏ͳؾ͸͢Δʜ
    RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸
    

    View Slide

78. 4VCTDSJQUJPOͷ؅ཧ
    RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸
    

    View Slide

79. 4VCTDSJQUJPOͷ؅ཧ
    TVCTDSJCFΛߦ͏ͱɺ0CTFSWBCMF͕DPNQMFUF͞Εͳ͍ݶΓͣͬͱ஋͕ྲྀΕͯ͠·͏ɻ
    DPNQPOFOU಺ͰTVCTDSJCFΛߦͬͨ৔߹ɺDPNQPOFOU͕ഁغ͞Εͨޙ΋ಈ࡞͢ΔͨΊɺ
    DPNQPOFOUഁغ࣌ʹVOTVCTDSJCF͢Δඞཁ͕͋Δɻ
    RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸
    

    View Slide

80. 4VCTDSJQUJPOͷ؅ཧ
    UBLF6OUJMΛར༻͢Δ͜ͱͰɺ4VCTDSJQUJPOͷ؅ཧΛ؆қԽͰ͖Δ
    RxJSΛAngularͰ࢖͍ͬͯͨ͘Ίʹ͸
    

    View Slide

81. 3Y+4Λ׆༻ͯ͠"OHVMBS$PNQPOFOUΛ࣮૷͢Δ
    

    View Slide

82. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
    3Y+4Λ׆༻͠ɺϦΞΫςΟϒͳ࣮૷Λߦ͏ͨΊʹ͸ʜ
    

    View Slide

83. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
    ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ
    ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ
    ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷
    4VCTDSJQUJPOͷ؅ཧ
    3Y+4Λ׆༻͠ɺϦΞΫςΟϒͳ࣮૷Λߦ͏ͨΊʹ͸ʜ
    

    View Slide

84. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
    ͱʹ͔͘શͯͷ஋΍ΠϕϯτΛ0CTFSWBCMFʹ͢Δɻ
    0CTFSWBCMFͱͯ͠ఆٛ͞Εͨ஋΍ΠϕϯτΛ༻͍ͯɺը໘ͷৼΔ෣͍Λ࣮૷͢Δɻ
    ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ
    ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ
    ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷
    4VCTDSJQUJPOͷ؅ཧ
    3Y+4Λ׆༻͠ɺϦΞΫςΟϒͳ࣮૷Λߦ͏ͨΊʹ͸ʜ
    

    View Slide

85. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
    ؆қతͳ50%0ΞϓϦέʔγϣϯ
    ɾ50%0ͷ௥Ճ͕Ͱ͖Δ
    ɾ50%0ͷ࡟আ͕Ͱ͖Δ
    ɾ50%0ҰཡΛϑΟϧλͰ͖Δ
    શͯɺະ׬ྃɺ׬ྃࡁ
    
    

    View Slide

86. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
    %FNP
    αϯϓϧίʔυ
    

    View Slide

87. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
    3Y+4Λ࢖Θͳ͔ͬͨͱ͖ͷ࣮૷ UFNQMBUF
    
    step0.component.html
    

    View Slide

88. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
    3Y+4Λ࢖Θͳ͔ͬͨͱ͖ͷ࣮૷ $PNQPOFOUͷ*OQVU
    
    step0.component.ts
    3Y+4Λ࢖Θͳ͔ͬͨͱ͖ͷ࣮૷ $PNQPOFOUͷϝϯόม਺
    
    

    View Slide

89. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
    3Y+4Λ࢖Θͳ͔ͬͨͱ͖ͷ࣮૷ $PNQPOFOUͷϝιου
    
    step0.component.ts
    

    View Slide

90. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
    ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ
    ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ
    ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷
    4VCTDSJQUJPOͷ؅ཧ
    3Y+4Λ׆༻͠ɺϦΞΫςΟϒͳ࣮૷Λߦ͏ͨΊʹ͸ʜ
    

    View Slide

91. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
    ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ
    ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ
    ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷
    4VCTDSJQUJPOͷ؅ཧ
    3Y+4Λ׆༻͠ɺϦΞΫςΟϒͳ࣮૷Λߦ͏ͨΊʹ͸ʜ
    

    View Slide

92. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
    ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ
    ը໘Ͱൃੜ͢ΔΠϕϯτ
    

    View Slide

93. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
    ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ
    *OQVU஋ͷมߋ
    $PNQPOFOUͷϥΠϑαΠΫϧ
    

    View Slide

94. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
    ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ
    ը໘Ͱൃੜ͢ΔΠϕϯτɺ*OQVU஋ͷมߋɺίϯϙʔωϯτͷϥΠϑαΠΫϧΛ
    0CTFSWBCMFͱͯ͠ݕ஌Ͱ͖ΔΑ͏ʹ4VCKFDUͱͯ͠ఆٛɻ
    step1.component.ts
    ࣮૷मਖ਼
    

    View Slide

95. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
    ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ
    ը໘Ͱൃੜ͢ΔΠϕϯτɺ*OQVU஋ͷมߋɺίϯϙʔωϯτͷϥΠϑαΠΫϧΛ
    0CTFSWBCMFͱͯ͠ݕ஌Ͱ͖ΔΑ͏ʹ4VCKFDUͱͯ͠ఆٛɻ
    step1.component.ts
    ࣮૷मਖ਼
    Ͳ͏͍͏ͱ͖ʹ஋͕OFYU͞ΕΔ͔Λਪଌ͠΍໋໊͍͢ʹ͠ͳ͍ͱࠞཚͷݩʹͳΔ
    

    View Slide

96. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
    ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ
    ը໘ଆͷΠϕϯτൃੜΛݕ஌Ͱ͖ΔΑ͏ʹɺ4VCKFDUͷOFYUΛ࣮ߦ͢Δ
    step1.component.html
    ࣮૷मਖ਼
    

    View Slide

97. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
    ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ
    *OQVUͷมߋΛݕ஌Ͱ͖ΔΑ͏ʹɺ4VCKFDUͷOFYUΛ࣮ߦ͢Δ
    $PNQPOFOUͷϥΠϑαΠΫϧΛݕ஌Ͱ͖ΔΑ͏ʹɺ4VCKFDUͷOFYUΛ࣮ߦ͢Δ
    ࣮૷मਖ਼
    step1.component.ts
    

    View Slide

98. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
    ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ
    ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ0CTFSWBCMFͱͯ͠ѻ͑ΔΑ͏ʹͳΓ·ͨ͠
    
    

    View Slide

99. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
    ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ
    ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ
    ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷
    4VCTDSJQUJPOͷ؅ཧ
    3Y+4Λ׆༻͠ɺϦΞΫςΟϒͳ࣮૷Λߦ͏ͨΊʹ͸ʜ
    

    View Slide

100. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     मਖ਼લͷ$PNQPOFOU$MBTTͷϝϯόม਺*OQVU
     step0.component.ts
     ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ
     

     View Slide

101. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     $PNQPOFOUͷঢ়ଶΛ؅ཧ͢Δ4VCKFDUΛఆٛɻ
     ͜ͷͱ͖ɺ$PNQPOFOUͷঢ়ଶΛͻͱͭͷ0CKFDUͱͯ͠ѻ͑ΔΑ͏ʹ͢Δɻ
     ཧ༝͸ผ్આ໌
     ࣮૷मਖ਼
     step2.component.ts
     ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ
     

     View Slide

102. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     pMUFSFE*UFNT͸JUFNTͱpMUFS$POEJUJPO͔Βಋग़Ͱ͖ΔͨΊɺຖճϑΟϧλͷ࣮ߦΛߦ͏ඞཁ͕ͳ͘ͳͬͨ
     ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ
     

     View Slide

103. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     UBQͳͲͰ෭࡞༻Λ༩͑ΔॲཧΛՃ͑Δͷ͸/(ɻͲ͏͍͏ͱ͖ʹԿ͕ى͜Δͷ͔͕௥͍ʹ͘͘ͳΔɻ
     ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ
     

     View Slide

104. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     0CTFSWBCMFʹஔ͖׵Θͬͨϝϯόม਺Λɺ"TZOD1JQFΛ࢖ͬͯϨϯμϦϯά
     ࣮૷मਖ਼
     step2.component.html
     ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ
     

     View Slide

105. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτͱɺ
     ίϯϙʔωϯτͷঢ়ଶΛ0CTFSWBCMFͱͯ͠ѻ͑ΔΑ͏ʹͳΓ·ͨ͠
     
     ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ
     

     View Slide

106. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτͱɺ
     ίϯϙʔωϯτͷঢ়ଶΛ0CTFSWBCMFͱͯ͠ѻ͑ΔΑ͏ʹͳΓ·ͨ͠
     
     ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ
     ʮ999ͨ͠ͱ͖ɺ:::Λߦ͏ʯͷ999ͨ͠ͱ͖ͱ͍͏ͷ͕දݱͰ͖ΔΑ͏ʹͳͬͨ
     

     View Slide

107. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ
     ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ
     ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷
     4VCTDSJQUJPOͷ؅ཧ
     3Y+4Λ׆༻͠ɺϦΞΫςΟϒͳ࣮૷Λߦ͏ͨΊʹ͸ʜ
     

     View Slide

108. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ
     ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ
     ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷
     4VCTDSJQUJPOͷ؅ཧ
     3Y+4Λ׆༻͠ɺϦΞΫςΟϒͳ࣮૷Λߦ͏ͨΊʹ͸ʜ
     ίϯϙʔωϯτ಺ͷঢ়ଶͱൃੜ͢ΔΠϕϯτ͕શͯ0CTFSWBCMFʹͳ͍ͬͯΔͷͰɺ
     ʮ999ͨ͠ͱ͖ʹɺ:::Λߦ͏ʯͱ͍͏ϢʔεέʔεΛએݴతʹ࣮૷͍͚ͯ͠Δɻ
     

     View Slide

109. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     ؆қతͳ50%0ΞϓϦέʔγϣϯ
     ɾ50%0ͷ௥Ճ͕Ͱ͖Δ
     ɾ50%0ͷ࡟আ͕Ͱ͖Δ
     ɾ50%0ҰཡΛϑΟϧλͰ͖Δ
     શͯɺະ׬ྃɺ׬ྃࡁ
     
     ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷
     

     View Slide

110. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     BEEΠϕϯτ͕ൃՐͨ͠ͱ͖ɺTUBUFΦϒδΣΫτͷJUFNTʹ৽͍͠JUFNΛ௥Ճ
     ࣮૷मਖ਼
     final.component.ts
     ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷
     

     View Slide

111. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     SFNPWFΠϕϯτ͕ൃՐͨ͠ͱ͖ɺTUBUFΦϒδΣΫτͷJUFNT͔Βࢦఆ͞ΕͨJUFNΛ࡟আ
     ࣮૷मਖ਼
     final.component.ts
     ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷
     

     View Slide

112. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     ϑΟϧλ৚͕݅ߋ৽Πϕϯτ͕ൃՐͨ͠ͱ͖ɺTUBUFΦϒδΣΫτͷϑΟϧλ৚݅Λߋ৽
     ࣮૷मਖ਼
     final.component.ts
     ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷
     

     View Slide

113. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     *OQVUͷUJUMF͕มߋ͞Εͨͱ͖ɺTUBUFΦϒδΣΫτͷUJUMFΛߋ৽
     ࣮૷मਖ਼
     final.component.ts
     ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷
     

     View Slide

114. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     Ͳ͏͍͏ͱ͖ʹԿ͕ى͖Δͷ͔͕એݴతʹ࣮૷͞Ε͍ͯΔͷͰɺॲཧΛ೺Ѳ͠΍͘͢ͳͬͨ
     
     ࠓճྫʹ͋͛ͯΔίʔυ͙Β͍ͩͱ͋·ΓޮՌ͸ײ͡ʹ͍͕͘ʜ
     
     ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷
     

     View Slide

115. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     Ͳ͏͍͏ͱ͖ʹԿ͕ى͖Δͷ͔͕એݴతʹ࣮૷͞Ε͍ͯΔͷͰɺॲཧΛ೺Ѳ͠΍͘͢ͳͬͨ
     
     ࠓճྫʹ͋͛ͯΔίʔυ͙Β͍ͩͱ͋·ΓޮՌ͸ײ͡ʹ͍͕͘ʜ
     
     ॲཧ࣮ߦͷτϦΨͱͳΔΠϕϯτ͕ෳ਺͋ΔΑ͏ͳέʔε΍ɺ
     ͻͱͭͷΠϕϯτ͔Βෳ਺ͷؔ৺͝ͱΛॲཧ͍ͨ͠έʔεͩͱɺΑΓޮՌΛൃش͢Δؾ͕͢Δ
     ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷
     

     View Slide

116. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     ίϯϙʔωϯτ಺Ͱൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ
     ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ
     ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷
     4VCTDSJQUJPOͷ؅ཧ
     3Y+4Λ׆༻͠ɺϦΞΫςΟϒͳ࣮૷Λߦ͏ͨΊʹ͸ʜ
     

     View Slide

117. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     ·ͩΠϕϯτϋϯυϥΛTVCTDSJCF͍ͯ͠ͳ͍ͷͰɺॲཧ͸࣮ߦ͞Εͳ͍ɻ
     4VCTDSJQUJPOͷ؅ཧ
     

     View Slide

118. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     DPOTUSVDUPSͰ·ͱΊͯTVCTDSJCF͢Δ͜ͱͰɺ؅ཧ͢Δ4VCTDSJQUJPOΛͭʹ͢Δɻ
     ·ͨɺUBLF6OUJMͰPO%FTUSPZΛࢦఆ͢Δ͜ͱͰɺίϯϙʔωϯτഁغ࣌ʹDPNQMFUF͞ΕΔɻ
     ࣮૷मਖ਼
     4VCTDSJQUJPOͷ؅ཧ
     final.component.ts
     

     View Slide

119. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     ίϯϙʔωϯτ͕ੜ͖ͯΔ͚ؒͩɺΠϕϯτϋϯυϦϯά͕ಈ࡞͢ΔΑ͏ʹͳͬͨ
     
     4VCTDSJQUJPOͷ؅ཧ
     

     View Slide

120. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     ׬੒
     
     

     View Slide

121. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     ௥Ճཁ݅Λ࣮૷ͯ͠ΈΑ͏
     ɾJUFNTʹมߋ͕͋ͬͨͱ͖ʹɺαʔόʹ࠷৽ͷJUFNTͷঢ়ଶΛૹ৴͢Δ
     ɾը໘ଆͷԿ͔͠ΒͷΠϕϯτ͕ൃՐͨ͠ͱ͖ɺϩάΛදࣔ͢Δ
     

     View Slide

122. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     ͜ΕͰ3Y+4Λ׆༻࣮ͯ͠૷Ͱ͖ΔΑ͏ʹͳΓ·ͨ͠
     

     View Slide

123. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     ͜ΕͰ3Y+4Λ׆༻࣮ͯ͠૷Ͱ͖ΔΑ͏ʹͳΓ·ͨ͠
     ͱ͸͍͑ɺ࣮૷࣌ʹؾʹ͢Δ͜ͱ΍࣮૷ྔ͕গ͠ଟ͍ʜ
     EJTUJODU6OUJM$IBOHFEͱ͔ɺTIBSF3FQMBZͱ͔ɺ4VCTDSJQUJPOͷ؅ཧͱ͔
     
     

     View Slide

124. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     ͜ΕͰ3Y+4Λ׆༻࣮ͯ͠૷Ͱ͖ΔΑ͏ʹͳΓ·ͨ͠
     ͱ͸͍͑ɺ࣮૷࣌ʹؾʹ͢Δ͜ͱ΍࣮૷ྔ͕গ͠ଟ͍ʜ
     EJTUJODU6OUJM$IBOHFEͱ͔ɺTIBSF3FQMBZͱ͔ɺ4VCTDSJQUJPOͷ؅ཧͱ͔
     ͦ͜Ͱʜ
     
     

     View Slide

125. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     !SYBOHVMBS
     @rx-angular
     

     View Slide

126. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     !SYBOHVMBSΛ࢖͏͜ͱͰɺΑΓ؆ܿʹɺ؆୯ʹϦΞΫςΟϒʹ࣮૷͢Δ͜ͱ͕Ͱ͖·͢
     
     !SYBOHVMBS
     

     View Slide

127. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     !SYBOHVMBSͱ͸Կ͔
     !SYBOHVMBS
     

     View Slide

128. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     @rx-angular/state
     @rx-angular/template
     $PNQPOFOU΍ΞϓϦέʔγϣϯͷঢ়ଶΛϦΞΫςΟϒʹѻ͍΍͘͢͢ΔͨΊͷϥΠϒϥϦ
     0CTFSWBCMFͷ஋ΛUFNQMBUFଆͰѻ͏ͱ͖ʹ࢖͑ΔσΟϨΫςΟϒͳͲΛఏڙ
     !SYBOHVMBS
     

     View Slide

129. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     ઌ΄Ͳͷ50%0ΞϓϦέʔγϣϯΛ!SYBOHVMBSTUBUFΛ༻͍ͯॻ͖׵͑ͯΈΑ͏
     
     !SYBOHVMBS
     

     View Slide

130. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     3Y4UBUFͷΠϯελϯεΛ*OKFDU
     !SYBOHVMBS
     rxangular.component.ts
     

     View Slide

131. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     $PNQPOFOUͷϝϯόม਺Λఆٛ
     !SYBOHVMBS
     rxangular.component.ts
     

     View Slide

132. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     TUBUFGVM΍TFMFDUΛར༻͢Δ͜ͱͰɺEJTUJODU6OUJM$IBOHFE΍TIBSF3FQMBZΛؾʹ͠ͳͯ͘ྑ͍
     !SYBOHVMBS
     rxangular.component.ts
     stateful
     select
     

     View Slide

133. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     ΠϕϯτϋϯυϦϯάॲཧͱঢ়ଶͷॳظԽ
     !SYBOHVMBS
     rxangular.component.ts
     

     View Slide

134. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     4VCTDSJQUJPOͷ؅ཧ͸3Y4UBUF͕΍ͬͯ͘ΕΔ
     !SYBOHVMBS
     rxangular.component.ts
     

     View Slide

135. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
     @rx-angular/state
     @rx-angular/template
     ͦͷଞͷػೳ
     !SYBOHVMBS
     

     View Slide

136. 3Y+4ͷςετʹ͍ͭͯ
     

     View Slide

137. RxJSͷςετʹ͍ͭͯ
     
     

     View Slide

138. RxJSͷςετʹ͍ͭͯ
     $PNJOH4PPO
     

     View Slide

139. !SYBOHVMBSΛ࢖ָͬͯ͘͠։ൃ͠Α͏
     ࠓ೔ͷ·ͱΊ
     

     View Slide

140. ࢀߟ
     RxJS ެࣜ
     Hot vs Cold Observables
     rx-angular introduction
     Learn RxJS
     Research on Reactive Ephemeral state in component oriented frameworks
     BehaviorSubject vs rx-state
     @rx-angular
     

     View Slide