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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. RxJSΛ࢖͍͍ͨϞνϕʔγϣϯ
    8FCΞϓϦέʔγϣϯ͸ෳࡶ

    ؅ཧ͢Δঢ়ଶ͕ଟ͍
    ϋϯυϦϯά͢ΔΠϕϯτ͕ଟ͍
    ը໘͔ΒͷΠϕϯτ΍αʔόͱͷ΍ΓͱΓͳͲ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  70. )PU$PME
    TIBSFΦϖϨʔλTVCTDSJCF TVCTDSJCF͢Δ·Ͱ)PUͰ͸ͳ͍

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

    View full-size slide

  71. )PU$PME
    TIBSF3FQMBZΦϖϨʔλTVCTDSJCF TVCTDSJCF͢Δ·Ͱ)PUͰ͸ͳ͍

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    step0.component.html

    View full-size slide

  87. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
    3Y+4Λ࢖Θͳ͔ͬͨͱ͖ͷ࣮૷ $PNQPOFOUͷ*OQVU

    step0.component.ts
    3Y+4Λ࢖Θͳ͔ͬͨͱ͖ͷ࣮૷ $PNQPOFOUͷϝϯόม਺

    View full-size slide

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

    step0.component.ts

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ

    View full-size slide

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

    ίϯϙʔωϯτͷϝϯόม਺Λ0CTFSWBCMFͱͯ͠ఆٛ
    ʮ999ͨ͠ͱ͖ɺ:::Λߦ͏ʯͷ999ͨ͠ͱ͖ͱ͍͏ͷ͕දݱͰ͖ΔΑ͏ʹͳͬͨ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  113. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
    Ͳ͏͍͏ͱ͖ʹԿ͕ى͖Δͷ͔͕એݴతʹ࣮૷͞Ε͍ͯΔͷͰɺॲཧΛ೺Ѳ͠΍͘͢ͳͬͨ

    ࠓճྫʹ͋͛ͯΔίʔυ͙Β͍ͩͱ͋·ΓޮՌ͸ײ͡ʹ͍͕͘ʜ

    ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷

    View full-size slide

  114. RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮૷͢Δ
    Ͳ͏͍͏ͱ͖ʹԿ͕ى͖Δͷ͔͕એݴతʹ࣮૷͞Ε͍ͯΔͷͰɺॲཧΛ೺Ѳ͠΍͘͢ͳͬͨ

    ࠓճྫʹ͋͛ͯΔίʔυ͙Β͍ͩͱ͋·ΓޮՌ͸ײ͡ʹ͍͕͘ʜ

    ॲཧ࣮ߦͷτϦΨͱͳΔΠϕϯτ͕ෳ਺͋ΔΑ͏ͳέʔε΍ɺ
    ͻͱͭͷΠϕϯτ͔Βෳ਺ͷؔ৺͝ͱΛॲཧ͍ͨ͠έʔεͩͱɺΑΓޮՌΛൃش͢Δؾ͕͢Δ
    ΠϕϯτϋϯυϦϯάॲཧΛ࣮૷

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    4VCTDSJQUJPOͷ؅ཧ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    !SYBOHVMBS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    !SYBOHVMBS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  136. RxJSͷςετʹ͍ͭͯ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  139. ࢀߟ
    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 full-size slide