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
RxJSで始めるリアクティブプログラミング
Search
Kazuma Nishihata
November 18, 2017
Programming
1
1.7k
RxJSで始めるリアクティブプログラミング
「秋のJavaScript祭 in mixi 2017」で発表したスライドです。
Kazuma Nishihata
November 18, 2017
Tweet
Share
More Decks by Kazuma Nishihata
See All by Kazuma Nishihata
フロントエンドの技術選定
kazumanishihata
6
6.6k
Vue with TypeScript
kazumanishihata
0
1.8k
ころばぬ先のテクニカルディレクション
kazumanishihata
1
600
動きのデザインとフロントエンドの連携
kazumanishihata
2
1.5k
まぼろしのJS勉強会 #2 「細かすぎて伝わらないUI実装選手権」『使えそうで使えないけど使いたい IntersectionObserver』
kazumanishihata
1
380
WP REST APIとReactで作るSPA
kazumanishihata
2
9.6k
ぼくらのCONST戦争 SCRIPTY #5
kazumanishihata
2
3.4k
Other Decks in Programming
See All in Programming
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
710
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.3k
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
430
Rancher と Terraform
fufuhu
2
210
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
230
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
200
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
18
9.7k
AIコーディングAgentとの向き合い方
eycjur
0
260
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
240
Protocol Buffersの型を超えて拡張性を得る / Beyond Protocol Buffers Types Achieving Extensibility
linyows
0
110
AIエージェント開発、DevOps and LLMOps
ymd65536
1
380
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
0
410
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Designing for humans not robots
tammielis
253
25k
Statistics for Hackers
jakevdp
799
220k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
A designer walks into a library…
pauljervisheath
207
24k
How to Ace a Technical Interview
jacobian
279
23k
Done Done
chrislema
185
16k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Gamification - CAS2011
davidbonilla
81
5.4k
Transcript
K2VFSZ͔ΒεςʔδΞοϓ ̍าઌߦͨ͘Ίͷ+BWB4DSJQU ാҰഅ to-R 3Y+4Ͱ࢝ΊΔϦΞΫςΟϒϓϩάϥϛϯά ാҰഅ
גࣜձࣾτΡʔΞʔϧ දऔకϑϩϯτΤϯυΤϯδχΞ ാҰഅ גࣜձࣾτΡʔΞʔϧ දऔకϑϩϯτΤϯυΤϯδχΞ ാҰഅ
ϑϩϯτΤϯυʹಛԽͨ͠8FC੍࡞ձࣾ w )5.-$44 w K2VFSZ+BWB4DSJQU w "OHVMBS3FBDU7VF w ςΫχΧϧσΟϨΫγϣϯ to-R
גࣜձࣾτΡʔΞʔϧ දऔకϑϩϯτΤϯυΤϯδχΞ ാҰഅ
גࣜձࣾτΡʔΞʔϧ දऔకϑϩϯτΤϯυΤϯδχΞ ാҰഅ
https://www.to-r.net/media/react-tutorial/
https://www.to-r.net/media/react-tutorial/ ࠷ۙͷ͓ࣄ΄ͱΜͲ"OHVMBS
3Y+4 ຊͷςʔϚ
const button = document.querySelector('button'); button.addEventListener('click', () => { console.log('Clicked!') });
+BWB4DSJQU
3Y+4 var button = document.querySelector('button'); Rx.Observable.fromEvent(button, 'click') .subscribe(() => {
console.log('Clicked!') });
$('button:first').click( () => { console.log('Clicked!'); }); K2VFSZ
+BWB4DSJQU [1, 2, 3, 4, 5, 6, 7, 8] .map(val
=> val*2) .forEach(val => { console.log(val) });
3Y+4 Rx.Observable.from([1, 2, 3, 4, 5, 6, 7, 8]) .map(val
=> val*2) .subscribe(val => { console.log(val); });
͜Μͳʹศརͳ໋ྩ͕ छྨ΄Ͳ༻ҙ͞Ε͍ͯΔ
https://www.learnrxjs.io/
3Y+4ʹର͢ΔϑΝʔετΠϯϓϨογϣϯ wͳʹ͕ศར͔Θ͔Βͳ͍ w֮͑Δ͜ͱଟ͍ wྻ͕ετϦʔϜ wK2VFSZศར ҧ͏
3Y+4ͷར ͋Δఔ͍͜ͳ͞ͳ͍ͱ ݟ͑ͯ͜ͳ͍
https://polipoliweb.com/blog/shinjin-kyouiku/
ؓٳ
3Y+4Λཧղ͢ΔͨΊͷͭͷϙΠϯτ wඇಉظ wϦΞΫςΟϒ wσʔλετΞ
ඇಉظ
ඇಉظ
ඇಉظ ͍ͭ࢝·Δ͔Θ͔Βͳ͍͠ɺ ऴΘΔλΠϛϯά୲อ͞Ε͍ͯͳ͍
ඇಉظ ෳͷॲཧ͕ऴΘͬͨλΠϛϯάͰԿ͔͍ͨ͠
ඇಉظ const streamA = Rx.Observable.of('A').delay(1000); const streamB = Rx.Observable.of('B').delay(500); const
streamC = Rx.Observable.of('C').delay(1500); Rx.Observable.forkJoin( streamA, streamB, streamC ).subscribe( data => console.log(data[0], data[1], data[2]) ); 3Y+4
ඇಉظ const proA = new Promise( resolve => setTimeout(resolve, 1000,
"A") ); const proB = new Promise( resolve => setTimeout(resolve, 500, "B") ); const proC = new Promise( resolve => setTimeout(resolve, 1500, "C") ); Promise.all([proA, proB, proC]) .then(data => console.log(data[0], data[1], data[2])); +BWB4DSJQU
ඇಉظ Կ͔ͷॲཧ͕ऴΘͬͨλΠϛϯάͰԿ͔͍ͨ͠
ඇಉظ const streamA = Rx.Observable.of('A').delay(1000); const streamB = Rx.Observable.of('B').delay(500); const
combine = streamA.map(() => { console.log('Finish A'); return streamB }).concatAll(); combined.subscribe(() => console.log('Finish B')); 3Y+4
ඇಉظ const proA = () => new Promise( resolve =>
setTimeout(resolve, 1000, "A") ); const proB = () => new Promise( resolve => setTimeout(resolve, 500, "B") ); ( async () => { await proA(); console.log('Finish A'); await proB(); console.log('Finish B'); } )(); +BWB4DSJQU
ϦΞΫςΟϒ
ϦΞΫςΟϒ ετϦʔϜͷʹԠͯ͡ ॲཧΛ࣮ߦ͢Δ ʢݫີͳఆٛͰͳ͋͘͘·ͰRxJSΛཧղ͢Δ্ͷ֓೦ͱͯ͠ʣ
ϦΞΫςΟϒ 0CFSWBCMF 0CTFSWFS
ϦΞΫςΟϒ 0CFSWBCMF 0CTFSWFS ͕มΘͬͨ͜ͱΛ͑Δ ͕มΘͬͨΒ࣮ߦ ɹߪಡ
ϦΞΫςΟϒ const sub = new Rx.BehaviorSubject(0); sub.subscribe( res => {
console.log(res); }); window.addEventListener('click', () => { sub.next(sub.value + 1); });
ϦΞΫςΟϒ const sub = new Rx.BehaviorSubject(0); sub.subscribe( res => {
console.log(res); }); window.addEventListener('click', () => { sub.next(sub.value + 1); }); ߪಡ ͕มΘͬͨΒ࣮ߦ ͕มΘͬͨ͜ͱΛ ڭ͑Δ
ϦΞΫςΟϒ const sub = new Rx.BehaviorSubject(0); sub.subscribe( res => {
console.log(1, res); }); sub.subscribe( res => { console.log(2, res); }); window.addEventListener('click', () => { sub.next(sub.value + 1); }); ॲཧA ॲཧB
wΞΠςϜΛՃ w૯ΛมԽ wϖʔδϯάΛมԽ 41"ͰͭͷใมߋͰࢁͷॲཧ͕ඞཁʹͳΔ 50%0Ϧετʹ ৽نΞΠςϜΛ Ճ
σʔλετΞ
σʔλετΞ AngularͷίʔυͰগ͠۩ମతʹ
"OHVMBS $PNQPOFOU $PNQPOFOU 4FSWJDF
@Injectable() export class CountService { public count = new Rx.BehaviorSubject(0);
increment() { this.count.next(this.count.value + 1); } } "OHVMBS αʔϏε
export class CountComponent implements OnInit { count: number; constructor( private
countService: CountService ) { } ngOnInit() { this.countService.count.subscribe( res => { this.count = res; }); } increment() { this.countService.increment(); } } "OHVMBS ίϯϙʔωϯτ
VOTVCTDSJCFΕͣʹ
export class CountComponent implements OnInit, OnDestroy { count: number; subscription:
Subscription; constructor( private countService: CountService ) { } ngOnInit() { const sub = this.countService.count.subscribe( res => { this.count = res; }); this.subscription.add(sub); } ngOnDestroy() { this.subscription.unsubscribe(); } increment() { this.countService.increment(); } } "OHVMBS ίϯϙʔωϯτ
"OHVMBSͷ BTZODύΠϓ͕ศར
export class CountComponent implements OnInit { count: Observable<number>; constructor( private
countService: CountService ) { } ngOnInit() { this.count = this.countService.count; } increment() { this.countService.increment(); } } "OHVMBS ίϯϙʔωϯτ
<p>{{count | async}}</p> <button (click)="increment()">click</button> "OHVMBS ςϯϓϨʔτ
݁
ศརͰ͢ΑͶ
5IBOL:PV