RxJSで始めるリアクティブプログラミング

 RxJSで始めるリアクティブプログラミング

「秋のJavaScript祭 in mixi 2017」で発表したスライドです。

035e26d167208e8645a70f7b76b70781?s=128

Kazuma Nishihata

November 18, 2017
Tweet

Transcript

  1. 12.

    +BWB4DSJQU [1, 2, 3, 4, 5, 6, 7, 8] .map(val

    => val*2) .forEach(val => { console.log(val) });
  2. 13.

    3Y+4 Rx.Observable.from([1, 2, 3, 4, 5, 6, 7, 8]) .map(val

    => val*2) .subscribe(val => { console.log(val); });
  3. 21.
  4. 22.
  5. 25.

    ඇಉظ 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
  6. 26.

    ඇಉظ 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
  7. 28.

    ඇಉظ 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
  8. 29.

    ඇಉظ 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
  9. 34.

    ϦΞΫςΟϒ const sub = new Rx.BehaviorSubject(0); sub.subscribe( res => {

    console.log(res); }); window.addEventListener('click', () => { sub.next(sub.value + 1); });
  10. 35.

    ϦΞΫςΟϒ const sub = new Rx.BehaviorSubject(0); sub.subscribe( res => {

    console.log(res); }); window.addEventListener('click', () => { sub.next(sub.value + 1); }); ߪಡ ஋͕มΘͬͨΒ࣮ߦ ஋͕มΘͬͨ͜ͱΛ ڭ͑Δ
  11. 36.

    ϦΞΫςΟϒ 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
  12. 41.

    @Injectable() export class CountService { public count = new Rx.BehaviorSubject(0);

    increment() { this.count.next(this.count.value + 1); } } "OHVMBS αʔϏε
  13. 42.

    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 ίϯϙʔωϯτ
  14. 44.

    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 ίϯϙʔωϯτ
  15. 46.

    export class CountComponent implements OnInit { count: Observable<number>; constructor( private

    countService: CountService ) { } ngOnInit() { this.count = this.countService.count; } increment() { this.countService.increment(); } } "OHVMBS ίϯϙʔωϯτ
  16. 48.