Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Angular with RxJS
Search
shuufei
December 09, 2020
Programming
440
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Angular with RxJS
* RxJSの基礎(ざっくり)
* RxJSを使いたいモチベーション
* RxJSをAngularで使っていくためには
* RxJSを活用してAngular Componentを実装する
shuufei
December 09, 2020
More Decks by shuufei
See All by shuufei
OOUI(オブジェクト指向UIデザイン)
shuufei
2
900
Elmについて
shuufei
0
290
Angularにおける状態管理
shuufei
0
58
AngularにおけるComponent分割
shuufei
0
68
Other Decks in Programming
See All in Programming
コードレビューのボトルネックを"する側"と"される側"の両面から解消する
yub0n
2
1.7k
Agentic Software Factoryに、すごく賢いIF文を。 / super smart IF statement into the Agentic Software Factory.
rkaga
8
2.4k
GraphQL の onError と Nullability のこれから
quramy
0
180
【加筆修正版】Laravel のアプリケーションをどこにデプロイするか #phpcon_ehime
akase244
0
160
Kotlinize Is Not Just Converting to Kotlin
chigichan24
1
190
Compiling a real-world CLI tool to native with Static Hermes
tmikov2023
0
130
現場と育てるRailsモデリング 〜Spreadsheetから始めたモデル設計〜
siroemk
2
940
作れる、でも消せるか?──安全に「枯らして消す」機能削除術 / Drain, Then Delete
chobishiba
2
980
HTML-in-Canvasで作る未来のWeb UI表現
clockmaker
5
5.7k
R8 の設定見直しでアプリサイズ削減
andpad
0
230
クラウドゲーミングのパフォーマンス最適化に挑む / Cloud Gaming Performance Tuning
vivion
0
230
ChromeでローカルLLM
ryu1013
0
160
Featured
See All Featured
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
540
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
2.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
18k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
helenjbeal
2
370
How to Ace a Technical Interview
jacobian
280
24k
How to train your dragon (web standard)
notwaldorf
96
6.9k
So, you think you're a good person
axbom
PRO
2
2.2k
Building Applications with DynamoDB
mza
96
7.3k
Darren the Foodie - Storyboard
khoart
PRO
4
4k
Google's AI Overviews - The New Search
badams
0
1.6k
Rails Girls Zürich Keynote
gr2m
96
14k
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
68
59k
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