Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angular with RxJS
Search
shuufei
December 09, 2020
Programming
0
330
Angular with RxJS
* RxJSの基礎(ざっくり)
* RxJSを使いたいモチベーション
* RxJSをAngularで使っていくためには
* RxJSを活用してAngular Componentを実装する
shuufei
December 09, 2020
Tweet
Share
More Decks by shuufei
See All by shuufei
OOUI(オブジェクト指向UIデザイン)
shuufei
2
570
Elmについて
shuufei
0
200
Angularにおける状態管理
shuufei
0
32
AngularにおけるComponent分割
shuufei
0
44
Other Decks in Programming
See All in Programming
レイトレ合宿10 レンダラー紹介 / Renderer Introduction, Ray Tracing Camp 10
shocker_0x15
0
180
Progressive Web Apps for Rails developers
siaw23
2
550
ROS 2のZenoh対応とZenohのROS 2対応
takasehideki
2
310
Quarto Clean Theme
nicetak
0
220
コードレビューと私の過去と未来
jxmtst
0
280
Modern Functional Fluent CFML REST by Luis Majano
ortus24
0
140
Real-time message handling and notifications with API Platform and Symfony
alli83
1
110
How to debug Xdebug... or any other weird bug in PHP
dunglas
2
1.1k
선언형 UI를 학습할 때 알아둬야하는 키워드들
l2hyunwoo
0
140
DjangoNinjaで高速なAPI開発を実現する
masaya00
0
520
複数プロダクトの技術改善・クラウド移行に向き合うチームのフレキシブルなペア・モブプログラミングの実践 / Flexible Pair Programming And Mob Programming
honyanya
0
230
Subclassing, Composition, Python, and You
hynek
3
170
Featured
See All Featured
Thoughts on Productivity
jonyablonski
67
4.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
A Philosophy of Restraint
colly
203
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
GraphQLとの向き合い方2022年版
quramy
43
13k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
130k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
31
2.3k
Transcript
Angular with RxJS
3Y+4ͷجૅ 3Y+4Λ͍͍ͨϞνϕʔγϣϯ 3Y+4Λ"OHVMBSͰ͍ͬͯͨ͘Ίʹ 3Y+4Λ׆༻ͯ͠"OHVMBS$PNQPOFOUΛ࣮͢Δ 3Y+4ͷςετʹ͍ͭͯ
RxJSͷجૅ
RxJSͷجૅ 3Y+4ɺࢹՄೳͳγʔέϯεΛ༻ͯ͠ඇಉظ͓Αͼ ΠϕϯτϕʔεͷϓϩάϥϜΛ࡞͢ΔͨΊͷϥΠϒϥϦͰ͢ IUUQTSYKTEFWpSFCBTFBQQDPNHVJEFPWFSWJFX
"OHVMBSͷఏڙ͍ͯ͠Δ.PEVMFɺ͜ͷ3Y+4ϕʔεͷΠϯλʔϑΣʔεʹͳ͍ͬͯΔͷ͕ଟ͍ )UUQ$MJFOU 'PSN$POUSPM "DUJWBUFE3PVUF FUD RxJSͷجૅ
جຊߏ Observable Subject Operator RxJSͷجૅ
جຊߏ Observable Subject Operator RxJSͷجૅ ͍ͩͿͬ͘͟Γͨ͠આ໌ʹͳΔͷͰɺৄࡉυΩϡϝϯτΛಡΉ͜ͱΛ͓͢͢Ί͠·͢ʜ
جຊߏ Observable Subject Operator Observable RxJSͷجૅ ετϦʔϜͷΑ͏ͳͷɻ TVCTDSJCF͢Δ͜ͱͰɺ෦Ͱൃߦ͞ΕͨΛड͚औΔ͜ͱ͕Ͱ͖Δɻ
جຊߏ Observable Subject Operator Observable RxJSͷجૅ ετϦʔϜͷΑ͏ͳͷɻ TVCTDSJCF͢Δ͜ͱͰɺ෦Ͱൃߦ͞ΕͨΛड͚औΔ͜ͱ͕Ͱ͖Δɻ
جຊߏ Observable Subject Operator Observable RxJSͷجૅ ετϦʔϜͷΑ͏ͳͷɻ TVCTDSJCF͢Δ͜ͱͰɺ෦Ͱൃߦ͞ΕͨΛड͚औΔ͜ͱ͕Ͱ͖Δɻ
جຊߏ Observable Subject Operator Observable RxJSͷجૅ 0CTFSWBCMFͩͱɺ֎෦͔ΒͷൃߦΛߦ͏͜ͱ͕Ͱ͖ͳ͍ɻ
جຊߏ Observable Subject Operator Observable RxJSͷجૅ https://rxjs-dev.firebaseapp.com/guide/observable ৄͪ͘͜͠Β
جຊߏ Observable Subject Operator Operator RxJSͷجૅ ετϦʔϜʹྲྀΕΔʹԿ͔͠Βͷૢ࡞Λߦ͏ؔɻ ྫɿNBQΦϖϨʔλɺҾʹࢦఆ͞ΕͨؔͷฦΓΛετϦʔϜʹྲྀ͢ɻ
جຊߏ Observable Subject Operator Operator RxJSͷجૅ ετϦʔϜʹྲྀΕΔʹԿ͔͠Βͷૢ࡞Λߦ͏ؔɻ ྫɿNBQΦϖϨʔλɺҾʹࢦఆ͞ΕͨؔͷฦΓΛετϦʔϜʹྲྀ͢ɻ
جຊߏ Observable Subject Operator Operator RxJSͷجૅ ετϦʔϜʹྲྀΕΔʹԿ͔͠Βͷૢ࡞Λߦ͏ؔɻ ྫɿNBQΦϖϨʔλɺҾʹࢦఆ͞ΕͨؔͷฦΓΛετϦʔϜʹྲྀ͢ɻ
جຊߏ Observable Subject Operator Operator RxJSͷجૅ ετϦʔϜʹྲྀΕΔʹԿ͔͠Βͷૢ࡞Λߦ͏ؔɻ ྫɿNBQΦϖϨʔλɺҾʹࢦఆ͞ΕͨؔͷฦΓΛετϦʔϜʹྲྀ͢ɻ
جຊߏ Observable Subject Operator Operator RxJSͷجૅ https://rxjs-dev.firebaseapp.com/guide/operators ৄͪ͘͜͠Β
جຊߏ Observable Subject Operator Subject RxJSͷجૅ 0CTFSWBCMF ֎෦͔ΒΛൃߦͰ͖ΔΑ͏ʹͨ͠ͷɻ
جຊߏ Observable Subject Operator Subject RxJSͷجૅ https://rxjs-dev.firebaseapp.com/guide/subject ৄͪ͘͜͠Β
ͷมԽΠϕϯτͷൃՐΛݕ͠ɺͦΕΛτϦΨʹॲཧΛߦ͏͜ͱ͕Ͱ͖Δ RxJSͷجૅ
Ϙλϯ͕ΫϦοΫ͞Εͨ࣌ʹɺDPOTPMFʹFWFOUΛදࣔ͢Δ RxJSͷجૅ
JUFNTͷʹมԽ͕͋ͬͨ࣌ʹɺαʔόଆͱΛಉظ͢Δ RxJSͷجૅ
RxJSΛ͍͍ͨϞνϕʔγϣϯ
RxJSΛ͍͍ͨϞνϕʔγϣϯ ݸਓతͳݟղΛ͠·͢
RxJSΛ͍͍ͨϞνϕʔγϣϯ 8FCΞϓϦέʔγϣϯෳࡶ ཧ͢Δঢ়ଶ͕ଟ͍ ϋϯυϦϯά͢ΔΠϕϯτ͕ଟ͍ ը໘͔ΒͷΠϕϯταʔόͱͷΓͱΓͳͲ
RxJSΛ͍͍ͨϞνϕʔγϣϯ ࣮͍ͯ࣌͘͠ʹҙࣝ͢ΔϙΠϯτ Ͳ͏͍͏Πϕϯτঢ়ଶͷมԽ͕͋ͬͨ࣌ʹɺͲ͏͍͏ॲཧΛΒͳ͍ͱ͍͚ͳ͍ͷ͔
RxJSΛ͍͍ͨϞνϕʔγϣϯ ࣮͍ͯ࣌͘͠ʹҙࣝ͢ΔϙΠϯτ Ͳ͏͍͏Πϕϯτঢ়ଶͷมԽ͕͋ͬͨ࣌ʹɺͲ͏͍͏ॲཧΛΒͳ͍ͱ͍͚ͳ͍ͷ͔ ͱ͍͏ͱ͜Ζʹͳͬͯ͘Δؾ͕͢Δ
RxJSΛ͍͍ͨϞνϕʔγϣϯ ྫ͑ʜ
RxJSΛ͍͍ͨϞνϕʔγϣϯ ಈըΛΫϦοΫͨ͠ͱ͖ɺಈըͷ࠶ੜը໘ʹભҠ͢Δ :PV5VCF
RxJSΛ͍͍ͨϞνϕʔγϣϯ *TTVFʹ)PWFSͨ͠ͱ͖ɺ*TTVFใΛϙοϓΞοϓදࣔ͢Δ (JU)VC
RxJSΛ͍͍ͨϞνϕʔγϣϯ จࣈͰೖྗ͞Ε͍ͯͨͱ͖ɺૹ৴ϘλϯΛΞΫςΟϒʹ͢Δ (PPHMF$IBU
RxJSΛ͍͍ͨϞνϕʔγϣϯ ͲΕ͔ͷද͕ࣔ݅มߋ͞Εͨͱ͖ɺ݅ʹجͮ͘σʔλͷ࠶औಘΛߦ͍͍ͨ "TBOB
RxJSΛ͍͍ͨϞνϕʔγϣϯ ༧ఆΛ࡞͢Δ࣌ʹ͕࣌ؒมߋ͞Εͨͱ͖ɺΧϨϯμʔ্ͷ֘࣌ؒଳʹΧʔυ͕දࣔ͞ΕΔ (PPHMF$BMFOEBS
RxJSΛ͍͍ͨϞνϕʔγϣϯ ͷมԽΠϕϯτͷൃՐΛݕ͠ɺͦΕΛτϦΨʹॲཧΛߦ͏͜ͱ͕Ͱ͖Δ ʮ999ͨ͠ͱ͖ɺ:::Λߦ͏ʯͱ͍͏ϢʔεέʔεΛએݴతʹ࣮Ͱ͖Δ 3Y+4Λ͏ͱ
RxJSΛ͍͍ͨϞνϕʔγϣϯ ಈըΛΫϦοΫͨ͠ͱ͖ɺಈըͷ࠶ੜը໘ʹભҠ͢Δ
RxJSΛ͍͍ͨϞνϕʔγϣϯ จࣈͰೖྗ͞Ε͍ͯͨͱ͖ɺૹ৴ϘλϯΛΞΫςΟϒʹ͢Δ
RxJSΛ͍͍ͨϞνϕʔγϣϯ ༧ఆΛ࡞͢Δ࣌ʹ͕࣌ؒมߋ͞Εͨͱ͖ɺΧϨϯμʔ্ͷ֘࣌ؒଳʹΧʔυ͕දࣔ͞ΕΔ
RxJSΛ͍͍ͨϞνϕʔγϣϯ ͲΕ͔ͷද͕ࣔ݅มߋ͞Εͨͱ͖ɺ݅ʹجͮ͘σʔλͷ࠶औಘΛߦ͍͍ͨ
RxJSΛ͍͍ͨϞνϕʔγϣϯ ͲΕ͔ͷද͕ࣔ݅มߋ͞Εͨͱ͖ɺ݅ʹجͮ͘σʔλͷ࠶औಘΛߦ͍͍ͨ ද͕ࣔ݅มߋ͞Εͨͱ͖ɺ-PDBM4UPSBHFʹ݅Λอଘ͍ͨ͠
RxJSΛ͍͍ͨϞνϕʔγϣϯ ͲΕ͔ͷද͕ࣔ݅มߋ͞Εͨͱ͖ɺ݅ʹجͮ͘σʔλͷ࠶औಘΛߦ͍͍ͨ ද͕ࣔ݅มߋ͞Εͨͱ͖ɺ-PDBM4UPSBHFʹ݅Λอଘ͍ͨ͠ طଘͷ࣮ʹӨڹΛ༩͑Δ͜ͱͳ͘ɺؔ৺͝ͱʹ࣮ΛՃͰ͖Δ
RxJSΛ͍͍ͨϞνϕʔγϣϯ ʮ999ͨ͠ͱ͖ɺ:::Λߦ͏ʯͱ͍͏ϢʔεέʔεΛಉ͡Α͏ͳߏจͰએݴతʹ࣮Ͱ͖Δ 3Y+4Λ͏ͱ
RxJSΛ͍͍ͨϞνϕʔγϣϯ "OHVMBSͷ50%0ΞϓϦέʔγϣϯͷαϯϓϧ 3Y+4ΛΘͳ͍࣮ྫ
RxJSΛ͍͍ͨϞνϕʔγϣϯ 3Y+4ΛΘͳ͍࣮ྫ
RxJSΛ͍͍ͨϞνϕʔγϣϯ UIJTJUFNT·ͨϑΟϧλ݅ʹมߋ͕͋ͬͨͱ͖ɺ UIJTpMUFSFE*UFNTΛߋ৽͢Δඞཁ͕͋Δ 3Y+4ΛΘͳ͍࣮ྫ ͦΕͧΕͷϝιουͷதͰɺ ຊདྷΓ͍ͨ͜ͱҎ֎ͷॲཧ͕ߦΘΕͯΔ
RxJSΛ͍͍ͨϞνϕʔγϣϯ "OHVMBSͷ50%0ΞϓϦέʔγϣϯͷαϯϓϧ 3Y+4Λ࣮ͬͨྫ
RxJSΛ͍͍ͨϞνϕʔγϣϯ 3Y+4Λ࣮ͬͨྫ
RxJSΛ͍͍ͨϞνϕʔγϣϯ 3Y+4Λ࣮ͬͨྫ pMUFSFE*UFNTɺ UIJTJUFNT·ͨUIJTpMUFS$POEJUJPOʹมԽ͕͋ͬͨͱ͖ɺ DPOEJUJPOʹΑͬͯJUFNT͕ϑΟϧλ͞ΕͨͰ͋Δɻ
RxJSΛ͍͍ͨϞνϕʔγϣϯ 3Y+4Λ࣮ͬͨྫ BEE͞Εͨͱ͖ɺJUFNTʹ৽͍͠JUFN͕Ճ͞ΕΔ SFNPWF͞Εͨͱ͖ɺJUFNT͔ΒରͷJUFN͕আ͞ΕΔ
RxJSΛ͍͍ͨϞνϕʔγϣϯ ʮ999ͨ͠ͱ͖ɺ:::Λߦ͏ʯͱ͍͏ϢʔεέʔεΛಉ͡Α͏ͳߏจͰએݴతʹ࣮Ͱ͖Δ 3Y+4Λ͏ͱ ɾ࣮͢Δͱ͖ɺ࣮͢ΔϢʔεέʔεͷΈʹؔ৺Λ͍͍͑ ɾίʔυΛಡΉͱ͖ɺ࣮͞ΕͨએݴΛಡΉ͜ͱͰɺͲ͏͍͏࣌ʹԿ͕ߦΘΕΔ͔ɺ ɹͲ͏͍͏࣌ʹ͜ͷ͕Ͳ͏มԽ͢Δ͔ͱ͍͏ͷΛѲͰ͖Δɻ
RxJSΛ͍͍ͨϞνϕʔγϣϯ "OHVMBSͷύϑΥʔϚϯε
RxJSΛ͍͍ͨϞνϕʔγϣϯ "OHVMBSͷύϑΥʔϚϯε rx-angular introduction εϥΠυ rx-angular introduction Youtube ը໘ඳըॲཧͷ࠷దԽ
RxJSΛ͍͍ͨϞνϕʔγϣϯ "OHVMBSͷύϑΥʔϚϯε UFNQMBUF͔ΒHFUUFSΛࢀরͨ࣌͠ͷσϝϦοτ UFNQMBUF͔ΒHFUUFSΛࢀর͠ͳͯ͘Α͘ͳΔ ը໘ඳը࣌ʹຖճHFUUFSͷॲཧ͕ߦΘΕΔ
RxJSΛAngularͰ͍ͬͯͨ͘Ίʹ
RxJSΛAngularͰ͍ͬͯͨ͘Ίʹ .VMUJDBTU )PU$PME 4VCTDSJQUJPOͷཧ ओཁͳ0QFSBUPS "OHVMBSͷ"TZOD1JQF
"OHVMBSͷ"TZOD1JQF RxJSΛAngularͰ͍ͬͯͨ͘Ίʹ
"OHVMBSͷ"TZOD1JQF "TZOD1JQF ࣗಈͰPCTFSWBCMFͳΛTVCTDSJCF͠ɺ࠷৽ͷΛฦ٫͢Δ RxJSΛAngularͰ͍ͬͯͨ͘Ίʹ
ओཁͳ0QFSBUPS RxJSΛAngularͰ͍ͬͯͨ͘Ίʹ
ओཁͳ0QFSBUPS map filter tap combineLatest merge take takeUntil mergeMap distinctUntilChanged
withLatestFrom RxJSΛAngularͰ͍ͬͯͨ͘Ίʹ
.VMUJDBTU RxJSΛAngularͰ͍ͬͯͨ͘Ίʹ
.VMUJDBTU ετϦʔϜΛڞ༗͢Δ͔Ͳ͏͔ IUUQTEFWUPSYKTSFTFBSDIPOSFBDUJWFFQIFNFSBMTUBUFJODPNQPOFOUPSJFOUFEGSBNFXPSLTML RxJSΛAngularͰ͍ͬͯͨ͘Ίʹ
.VMUJDBTU RxJSΛAngularͰ͍ͬͯͨ͘Ίʹ
.VMUJDBTU .VMUJDBTUʹม͢Δ0QFSBUPS Learn RxJS / Multicasting RxJSΛAngularͰ͍ͬͯͨ͘Ίʹ
.VMUJDBTU Research on Reactive-Ephemeral-State in component-oriented frameworks#Sharing State and state
derivations RxJSΛAngularͰ͍ͬͯͨ͘Ίʹ
)PU$PME RxJSΛAngularͰ͍ͬͯͨ͘Ίʹ
)PU$PME TVCTDSJCF͍ͯ͠ͳͯ͘Λྲྀ͔͢Ͳ͏͔ Hot vs Cold Observables RxJSΛAngularͰ͍ͬͯͨ͘Ίʹ
TVCTDSJCF͍ͯ͠ͳͯ͘Λྲྀ͔͢Ͳ͏͔ Hot vs Cold Observables )PUʹ͢Δͱɺ.VMUJDBTUʹͳΔ )PU$PME RxJSΛAngularͰ͍ͬͯͨ͘Ίʹ
$PMEͳ0CTFSWBCMFͷ߹ɺTVCTDSJCF͢Δલʹൃߦ͞Ε͕ͨर͑ͳ͍ Research on Reactive-Ephemeral-State in component-oriented frameworks#The Late Subscriber Problem
)PU$PME RxJSΛAngularͰ͍ͬͯͨ͘Ίʹ
$PMEͳ0CTFSWBCMFͷ߹ɺTVCTDSJCF͢Δલʹൃߦ͞Ε͕ͨर͑ͳ͍ Research on Reactive-Ephemeral-State in component-oriented frameworks#The Late Subscriber Problem
͜ΕΛղܾ͢ΔͨΊʹʜ )PU$PME RxJSΛAngularͰ͍ͬͯͨ͘Ίʹ
)PU$PME QVCMJTIΦϖϨʔλ DPOOFDU RxJSΛAngularͰ͍ͬͯͨ͘Ίʹ
)PU$PME QVCMJTI3FQMBZΦϖϨʔλ DPOOFDU RxJSΛAngularͰ͍ͬͯͨ͘Ίʹ
)PU$PME TIBSFΦϖϨʔλ TVCTDSJCF TVCTDSJCF͢Δ·Ͱ)PUͰͳ͍ RxJSΛAngularͰ͍ͬͯͨ͘Ίʹ
)PU$PME TIBSF3FQMBZΦϖϨʔλ TVCTDSJCF TVCTDSJCF͢Δ·Ͱ)PUͰͳ͍ RxJSΛAngularͰ͍ͬͯͨ͘Ίʹ
)PU$PME DPOOFDUͰ)PUʹͳΔɻ QVCMJTI TIBSF ࠷ॳͷTVCTDSJCFͰ)PUʹͳΔɻ refCount RxJSΛAngularͰ͍ͬͯͨ͘Ίʹ
)PU$PME DPOOFDUޙʹOFYU͞Εͨ࠷৽ͷ͕औಘͰ͖Δ QVCMJTI3FQMBZ TIBSF3FQMBZ ࠷ॳͷTVCTDSJCFޙʹOFYU͞Εͨ࠷৽ͷ͕औಘͰ͖Δ TVCTDSJCF࣌ʹ࠷৽ͷΛऔಘ͍ͨ͠߹ RxJSΛAngularͰ͍ͬͯͨ͘Ίʹ
)PU$PME DPOOFDUޙʹOFYU͞Εͨ࠷৽ͷ͕औಘͰ͖Δ QVCMJTI3FQMBZ TIBSF3FQMBZ ࠷ॳͷTVCTDSJCFޙʹOFYU͞Εͨ࠷৽ͷ͕औಘͰ͖Δ TVCTDSJCF࣌ʹ࠷৽ͷΛऔಘ͍ͨ͠߹ DPOOFDUલɺTVCTDSJCFલʹOFYU͞Εͨ࠷৽ͷΛऔಘ͍ͨ͠߹ 4VCKFDUΛ#FIBWJPS4VCKFDUʹ͢Δ RxJSΛAngularͰ͍ͬͯͨ͘Ίʹ
)PU$PME #FIBWJPS4VCKFDUͱTIBSF3FQMBZ Λར༻͢Δ͜ͱͰɺ ৗʹTVCTDSJCF࣌ʹ࠷৽ͷΛऔಘͰ͖Δɻ RxJSΛAngularͰ͍ͬͯͨ͘Ίʹ
)PU$PME #FIBWJPS4VCKFDUͱTIBSF3FQMBZ Λར༻͢Δ͜ͱͰɺ ৗʹTVCTDSJCF࣌ʹ࠷৽ͷΛऔಘͰ͖Δɻ 4VCKFDU QVCMJTI3FQMBZ DPOOFDUͰಉ༷ͷಈ࡞ʹͳΔ͕ɺ
ͲͪΒ͕ద͍ͯ͠Δͷ͔Θ͔Βͳ͍ʜ SYBOHVMBSTUBUFͰɺ4VCKFDU QVCMJTI3FQMBZ DPOOFDUͰ࣮͞Ε͍ͯΔɻ TVCTDSJCFͤͣʹ)PUʹͳΔͱ͍͏ͱ͜Ζ͕ϙΠϯτͷΑ͏ͳؾ͢Δʜ RxJSΛAngularͰ͍ͬͯͨ͘Ίʹ
4VCTDSJQUJPOͷཧ RxJSΛAngularͰ͍ͬͯͨ͘Ίʹ
4VCTDSJQUJPOͷཧ TVCTDSJCFΛߦ͏ͱɺ0CTFSWBCMF͕DPNQMFUF͞Εͳ͍ݶΓͣͬͱ͕ྲྀΕͯ͠·͏ɻ DPNQPOFOUͰTVCTDSJCFΛߦͬͨ߹ɺDPNQPOFOU͕ഁغ͞Εͨޙಈ࡞͢ΔͨΊɺ DPNQPOFOUഁغ࣌ʹVOTVCTDSJCF͢Δඞཁ͕͋Δɻ RxJSΛAngularͰ͍ͬͯͨ͘Ίʹ
4VCTDSJQUJPOͷཧ UBLF6OUJMΛར༻͢Δ͜ͱͰɺ4VCTDSJQUJPOͷཧΛ؆қԽͰ͖Δ RxJSΛAngularͰ͍ͬͯͨ͘Ίʹ
3Y+4Λ׆༻ͯ͠"OHVMBS$PNQPOFOUΛ࣮͢Δ
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ 3Y+4Λ׆༻͠ɺϦΞΫςΟϒͳ࣮Λߦ͏ͨΊʹʜ
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ ίϯϙʔωϯτͰൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ ίϯϙʔωϯτͷϝϯόมΛ0CTFSWBCMFͱͯ͠ఆٛ ΠϕϯτϋϯυϦϯάॲཧΛ࣮ 4VCTDSJQUJPOͷཧ 3Y+4Λ׆༻͠ɺϦΞΫςΟϒͳ࣮Λߦ͏ͨΊʹʜ
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ ͱʹ͔͘શͯͷΠϕϯτΛ0CTFSWBCMFʹ͢Δɻ 0CTFSWBCMFͱͯ͠ఆٛ͞ΕͨΠϕϯτΛ༻͍ͯɺը໘ͷৼΔ͍Λ࣮͢Δɻ ίϯϙʔωϯτͰൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ ίϯϙʔωϯτͷϝϯόมΛ0CTFSWBCMFͱͯ͠ఆٛ ΠϕϯτϋϯυϦϯάॲཧΛ࣮ 4VCTDSJQUJPOͷཧ 3Y+4Λ׆༻͠ɺϦΞΫςΟϒͳ࣮Λߦ͏ͨΊʹʜ
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ ؆қతͳ50%0ΞϓϦέʔγϣϯ ɾ50%0ͷՃ͕Ͱ͖Δ ɾ50%0ͷআ͕Ͱ͖Δ ɾ50%0ҰཡΛϑΟϧλͰ͖Δ શͯɺະྃɺྃࡁ
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ %FNP αϯϓϧίʔυ
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ 3Y+4ΛΘͳ͔ͬͨͱ͖ͷ࣮ UFNQMBUF step0.component.html
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ 3Y+4ΛΘͳ͔ͬͨͱ͖ͷ࣮ $PNQPOFOUͷ*OQVU step0.component.ts 3Y+4ΛΘͳ͔ͬͨͱ͖ͷ࣮ $PNQPOFOUͷϝϯόม
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ 3Y+4ΛΘͳ͔ͬͨͱ͖ͷ࣮ $PNQPOFOUͷϝιου step0.component.ts
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ ίϯϙʔωϯτͰൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ ίϯϙʔωϯτͷϝϯόมΛ0CTFSWBCMFͱͯ͠ఆٛ ΠϕϯτϋϯυϦϯάॲཧΛ࣮ 4VCTDSJQUJPOͷཧ 3Y+4Λ׆༻͠ɺϦΞΫςΟϒͳ࣮Λߦ͏ͨΊʹʜ
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ ίϯϙʔωϯτͰൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ ίϯϙʔωϯτͷϝϯόมΛ0CTFSWBCMFͱͯ͠ఆٛ ΠϕϯτϋϯυϦϯάॲཧΛ࣮ 4VCTDSJQUJPOͷཧ 3Y+4Λ׆༻͠ɺϦΞΫςΟϒͳ࣮Λߦ͏ͨΊʹʜ
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ ίϯϙʔωϯτͰൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ ը໘Ͱൃੜ͢ΔΠϕϯτ
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ ίϯϙʔωϯτͰൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ *OQVUͷมߋ $PNQPOFOUͷϥΠϑαΠΫϧ
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ ίϯϙʔωϯτͰൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ ը໘Ͱൃੜ͢ΔΠϕϯτɺ*OQVUͷมߋɺίϯϙʔωϯτͷϥΠϑαΠΫϧΛ 0CTFSWBCMFͱͯ͠ݕͰ͖ΔΑ͏ʹ4VCKFDUͱͯ͠ఆٛɻ step1.component.ts ࣮मਖ਼
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ ίϯϙʔωϯτͰൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ ը໘Ͱൃੜ͢ΔΠϕϯτɺ*OQVUͷมߋɺίϯϙʔωϯτͷϥΠϑαΠΫϧΛ 0CTFSWBCMFͱͯ͠ݕͰ͖ΔΑ͏ʹ4VCKFDUͱͯ͠ఆٛɻ step1.component.ts ࣮मਖ਼ Ͳ͏͍͏ͱ͖ʹ͕OFYU͞ΕΔ͔Λਪଌ໋໊͍͢͠ʹ͠ͳ͍ͱࠞཚͷݩʹͳΔ
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ ίϯϙʔωϯτͰൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ ը໘ଆͷΠϕϯτൃੜΛݕͰ͖ΔΑ͏ʹɺ4VCKFDUͷOFYUΛ࣮ߦ͢Δ step1.component.html ࣮मਖ਼
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ ίϯϙʔωϯτͰൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ *OQVUͷมߋΛݕͰ͖ΔΑ͏ʹɺ4VCKFDUͷOFYUΛ࣮ߦ͢Δ $PNQPOFOUͷϥΠϑαΠΫϧΛݕͰ͖ΔΑ͏ʹɺ4VCKFDUͷOFYUΛ࣮ߦ͢Δ ࣮मਖ਼ step1.component.ts
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ ίϯϙʔωϯτͰൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ ίϯϙʔωϯτͰൃੜ͢ΔΠϕϯτΛ0CTFSWBCMFͱͯ͠ѻ͑ΔΑ͏ʹͳΓ·ͨ͠
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ ίϯϙʔωϯτͰൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ ίϯϙʔωϯτͷϝϯόมΛ0CTFSWBCMFͱͯ͠ఆٛ ΠϕϯτϋϯυϦϯάॲཧΛ࣮ 4VCTDSJQUJPOͷཧ 3Y+4Λ׆༻͠ɺϦΞΫςΟϒͳ࣮Λߦ͏ͨΊʹʜ
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ मਖ਼લͷ$PNQPOFOU$MBTTͷϝϯόม *OQVU step0.component.ts ίϯϙʔωϯτͷϝϯόมΛ0CTFSWBCMFͱͯ͠ఆٛ
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ $PNQPOFOUͷঢ়ଶΛཧ͢Δ4VCKFDUΛఆٛɻ ͜ͷͱ͖ɺ$PNQPOFOUͷঢ়ଶΛͻͱͭͷ0CKFDUͱͯ͠ѻ͑ΔΑ͏ʹ͢Δɻ ཧ༝ผ్આ໌ ࣮मਖ਼ step2.component.ts ίϯϙʔωϯτͷϝϯόมΛ0CTFSWBCMFͱͯ͠ఆٛ
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ pMUFSFE*UFNTJUFNTͱpMUFS$POEJUJPO͔Βಋग़Ͱ͖ΔͨΊɺຖճϑΟϧλͷ࣮ߦΛߦ͏ඞཁ͕ͳ͘ͳͬͨ ίϯϙʔωϯτͷϝϯόมΛ0CTFSWBCMFͱͯ͠ఆٛ
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ UBQͳͲͰ෭࡞༻Λ༩͑ΔॲཧΛՃ͑Δͷ/(ɻͲ͏͍͏ͱ͖ʹԿ͕ى͜Δͷ͔͕͍ʹ͘͘ͳΔɻ ίϯϙʔωϯτͷϝϯόมΛ0CTFSWBCMFͱͯ͠ఆٛ
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ 0CTFSWBCMFʹஔ͖ΘͬͨϝϯόมΛɺ"TZOD1JQFΛͬͯϨϯμϦϯά ࣮मਖ਼ step2.component.html ίϯϙʔωϯτͷϝϯόมΛ0CTFSWBCMFͱͯ͠ఆٛ
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ ίϯϙʔωϯτͰൃੜ͢ΔΠϕϯτͱɺ ίϯϙʔωϯτͷঢ়ଶΛ0CTFSWBCMFͱͯ͠ѻ͑ΔΑ͏ʹͳΓ·ͨ͠ ίϯϙʔωϯτͷϝϯόมΛ0CTFSWBCMFͱͯ͠ఆٛ
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ ίϯϙʔωϯτͰൃੜ͢ΔΠϕϯτͱɺ ίϯϙʔωϯτͷঢ়ଶΛ0CTFSWBCMFͱͯ͠ѻ͑ΔΑ͏ʹͳΓ·ͨ͠ ίϯϙʔωϯτͷϝϯόมΛ0CTFSWBCMFͱͯ͠ఆٛ ʮ999ͨ͠ͱ͖ɺ:::Λߦ͏ʯͷ999ͨ͠ͱ͖ͱ͍͏ͷ͕දݱͰ͖ΔΑ͏ʹͳͬͨ
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ ίϯϙʔωϯτͰൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ ίϯϙʔωϯτͷϝϯόมΛ0CTFSWBCMFͱͯ͠ఆٛ ΠϕϯτϋϯυϦϯάॲཧΛ࣮ 4VCTDSJQUJPOͷཧ 3Y+4Λ׆༻͠ɺϦΞΫςΟϒͳ࣮Λߦ͏ͨΊʹʜ
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ ίϯϙʔωϯτͰൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ ίϯϙʔωϯτͷϝϯόมΛ0CTFSWBCMFͱͯ͠ఆٛ ΠϕϯτϋϯυϦϯάॲཧΛ࣮ 4VCTDSJQUJPOͷཧ 3Y+4Λ׆༻͠ɺϦΞΫςΟϒͳ࣮Λߦ͏ͨΊʹʜ ίϯϙʔωϯτͷঢ়ଶͱൃੜ͢ΔΠϕϯτ͕શͯ0CTFSWBCMFʹͳ͍ͬͯΔͷͰɺ ʮ999ͨ͠ͱ͖ʹɺ:::Λߦ͏ʯͱ͍͏ϢʔεέʔεΛએݴతʹ࣮͍͚ͯ͠Δɻ
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ ؆қతͳ50%0ΞϓϦέʔγϣϯ ɾ50%0ͷՃ͕Ͱ͖Δ ɾ50%0ͷআ͕Ͱ͖Δ ɾ50%0ҰཡΛϑΟϧλͰ͖Δ શͯɺະྃɺྃࡁ ΠϕϯτϋϯυϦϯάॲཧΛ࣮
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ BEEΠϕϯτ͕ൃՐͨ͠ͱ͖ɺTUBUFΦϒδΣΫτͷJUFNTʹ৽͍͠JUFNΛՃ ࣮मਖ਼ final.component.ts ΠϕϯτϋϯυϦϯάॲཧΛ࣮
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ SFNPWFΠϕϯτ͕ൃՐͨ͠ͱ͖ɺTUBUFΦϒδΣΫτͷJUFNT͔Βࢦఆ͞ΕͨJUFNΛআ ࣮मਖ਼ final.component.ts ΠϕϯτϋϯυϦϯάॲཧΛ࣮
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ ϑΟϧλ͕݅ߋ৽Πϕϯτ͕ൃՐͨ͠ͱ͖ɺTUBUFΦϒδΣΫτͷϑΟϧλ݅Λߋ৽ ࣮मਖ਼ final.component.ts ΠϕϯτϋϯυϦϯάॲཧΛ࣮
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ *OQVUͷUJUMF͕มߋ͞Εͨͱ͖ɺTUBUFΦϒδΣΫτͷUJUMFΛߋ৽ ࣮मਖ਼ final.component.ts ΠϕϯτϋϯυϦϯάॲཧΛ࣮
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ Ͳ͏͍͏ͱ͖ʹԿ͕ى͖Δͷ͔͕એݴతʹ࣮͞Ε͍ͯΔͷͰɺॲཧΛѲ͘͢͠ͳͬͨ ࠓճྫʹ͋͛ͯΔίʔυ͙Β͍ͩͱ͋·ΓޮՌײ͡ʹ͍͕͘ʜ ΠϕϯτϋϯυϦϯάॲཧΛ࣮
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ Ͳ͏͍͏ͱ͖ʹԿ͕ى͖Δͷ͔͕એݴతʹ࣮͞Ε͍ͯΔͷͰɺॲཧΛѲ͘͢͠ͳͬͨ ࠓճྫʹ͋͛ͯΔίʔυ͙Β͍ͩͱ͋·ΓޮՌײ͡ʹ͍͕͘ʜ ॲཧ࣮ߦͷτϦΨͱͳΔΠϕϯτ͕ෳ͋ΔΑ͏ͳέʔεɺ ͻͱͭͷΠϕϯτ͔Βෳͷؔ৺͝ͱΛॲཧ͍ͨ͠έʔεͩͱɺΑΓޮՌΛൃش͢Δؾ͕͢Δ ΠϕϯτϋϯυϦϯάॲཧΛ࣮
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ ίϯϙʔωϯτͰൃੜ͢ΔΠϕϯτΛ4VCKFDUͰఆٛ ίϯϙʔωϯτͷϝϯόมΛ0CTFSWBCMFͱͯ͠ఆٛ ΠϕϯτϋϯυϦϯάॲཧΛ࣮ 4VCTDSJQUJPOͷཧ 3Y+4Λ׆༻͠ɺϦΞΫςΟϒͳ࣮Λߦ͏ͨΊʹʜ
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ ·ͩΠϕϯτϋϯυϥΛTVCTDSJCF͍ͯ͠ͳ͍ͷͰɺॲཧ࣮ߦ͞Εͳ͍ɻ 4VCTDSJQUJPOͷཧ
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ DPOTUSVDUPSͰ·ͱΊͯTVCTDSJCF͢Δ͜ͱͰɺཧ͢Δ4VCTDSJQUJPOΛͭʹ͢Δɻ ·ͨɺUBLF6OUJMͰPO%FTUSPZΛࢦఆ͢Δ͜ͱͰɺίϯϙʔωϯτഁغ࣌ʹDPNQMFUF͞ΕΔɻ ࣮मਖ਼ 4VCTDSJQUJPOͷཧ final.component.ts
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ ίϯϙʔωϯτ͕ੜ͖ͯΔ͚ؒͩɺΠϕϯτϋϯυϦϯά͕ಈ࡞͢ΔΑ͏ʹͳͬͨ 4VCTDSJQUJPOͷཧ
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ Ճཁ݅Λ࣮ͯ͠ΈΑ͏ ɾJUFNTʹมߋ͕͋ͬͨͱ͖ʹɺαʔόʹ࠷৽ͷJUFNTͷঢ়ଶΛૹ৴͢Δ ɾը໘ଆͷԿ͔͠ΒͷΠϕϯτ͕ൃՐͨ͠ͱ͖ɺϩάΛදࣔ͢Δ
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ ͜ΕͰ3Y+4Λ׆༻࣮ͯ͠Ͱ͖ΔΑ͏ʹͳΓ·ͨ͠
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ ͜ΕͰ3Y+4Λ׆༻࣮ͯ͠Ͱ͖ΔΑ͏ʹͳΓ·ͨ͠ ͱ͍͑ɺ࣮࣌ʹؾʹ͢Δ͜ͱ࣮ྔ͕গ͠ଟ͍ʜ EJTUJODU6OUJM$IBOHFEͱ͔ɺTIBSF3FQMBZͱ͔ɺ4VCTDSJQUJPOͷཧͱ͔
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ ͜ΕͰ3Y+4Λ׆༻࣮ͯ͠Ͱ͖ΔΑ͏ʹͳΓ·ͨ͠ ͱ͍͑ɺ࣮࣌ʹؾʹ͢Δ͜ͱ࣮ྔ͕গ͠ଟ͍ʜ EJTUJODU6OUJM$IBOHFEͱ͔ɺTIBSF3FQMBZͱ͔ɺ4VCTDSJQUJPOͷཧͱ͔ ͦ͜Ͱʜ
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ !SYBOHVMBS @rx-angular
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ !SYBOHVMBSΛ͏͜ͱͰɺΑΓ؆ܿʹɺ؆୯ʹϦΞΫςΟϒʹ࣮͢Δ͜ͱ͕Ͱ͖·͢ !SYBOHVMBS
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ !SYBOHVMBSͱԿ͔ !SYBOHVMBS
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ @rx-angular/state @rx-angular/template $PNQPOFOUΞϓϦέʔγϣϯͷঢ়ଶΛϦΞΫςΟϒʹѻ͍͘͢͢ΔͨΊͷϥΠϒϥϦ 0CTFSWBCMFͷΛUFNQMBUFଆͰѻ͏ͱ͖ʹ͑ΔσΟϨΫςΟϒͳͲΛఏڙ !SYBOHVMBS
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ ઌ΄Ͳͷ50%0ΞϓϦέʔγϣϯΛ!SYBOHVMBSTUBUFΛ༻͍ͯॻ͖͑ͯΈΑ͏ !SYBOHVMBS
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ 3Y4UBUFͷΠϯελϯεΛ*OKFDU !SYBOHVMBS rxangular.component.ts
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ $PNQPOFOUͷϝϯόมΛఆٛ !SYBOHVMBS rxangular.component.ts
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ TUBUFGVMTFMFDUΛར༻͢Δ͜ͱͰɺEJTUJODU6OUJM$IBOHFETIBSF3FQMBZΛؾʹ͠ͳͯ͘ྑ͍ !SYBOHVMBS rxangular.component.ts stateful select
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ ΠϕϯτϋϯυϦϯάॲཧͱঢ়ଶͷॳظԽ !SYBOHVMBS rxangular.component.ts
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ 4VCTDSJQUJPOͷཧ3Y4UBUF͕ͬͯ͘ΕΔ !SYBOHVMBS rxangular.component.ts
RxJSΛ׆༻ͯ͠Angular ComponentΛ࣮͢Δ @rx-angular/state @rx-angular/template ͦͷଞͷػೳ !SYBOHVMBS
3Y+4ͷςετʹ͍ͭͯ
RxJSͷςετʹ͍ͭͯ
RxJSͷςετʹ͍ͭͯ $PNJOH4PPO
!SYBOHVMBSΛָͬͯ͘͠։ൃ͠Α͏ ࠓͷ·ͱΊ
ࢀߟ 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