Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular with RxJS

shuufei
December 09, 2020

Angular with RxJS

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

shuufei

December 09, 2020
Tweet

More Decks by shuufei

Other Decks in Programming

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