Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
RxJSで始めるリアクティブプログラミング
Kazuma Nishihata
November 18, 2017
Programming
1
1.1k
RxJSで始めるリアクティブプログラミング
「秋のJavaScript祭 in mixi 2017」で発表したスライドです。
Kazuma Nishihata
November 18, 2017
Tweet
Share
More Decks by Kazuma Nishihata
See All by Kazuma Nishihata
kazumanishihata
6
5.8k
kazumanishihata
0
880
kazumanishihata
1
530
kazumanishihata
2
1.3k
kazumanishihata
1
240
kazumanishihata
2
6.6k
kazumanishihata
2
2.7k
Other Decks in Programming
See All in Programming
taketora
0
110
satoshun
0
110
lovee
9
2.9k
layzee
1
220
mrtc0
2
1k
manfredsteyer
PRO
0
170
oracle4engineer
0
120
itok
1
960
hyodol2513
0
630
williln
0
230
shiz
1
110
bk_18
2
290
Featured
See All Featured
mza
80
4.1k
keithpitt
401
20k
jonrohan
1021
380k
imathis
479
150k
jensimmons
207
10k
chriscoyier
779
240k
gr2m
83
11k
lauravandoore
437
28k
rocio
155
11k
colly
66
3k
colly
188
14k
tmm1
61
9.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