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

Transcript

1. 1.

   K2VFSZ͔ΒεςʔδΞοϓ
   ̍าઌߦͨ͘Ίͷ+BWB4DSJQU ੢ാҰഅ to-R 3Y+4Ͱ࢝ΊΔϦΞΫςΟϒϓϩάϥϛϯά ੢ാҰഅ

2. 2.

   גࣜձࣾτΡʔΞʔϧ
   ୅දऔక໾
   
   ϑϩϯτΤϯυΤϯδχΞ
   ੢ാҰഅ גࣜձࣾτΡʔΞʔϧ
   ୅දऔక໾
   
   ϑϩϯτΤϯυΤϯδχΞ
   ੢ാҰഅ

3. 3.

   ϑϩϯτΤϯυʹಛԽͨ͠8FC੍࡞ձࣾ w )5.-
   
   $44
   w K2VFSZ
   
   +BWB4DSJQU
   w "OHVMBS
   
   
   3FBDU
   
   7VF
   w ςΫχΧϧσΟϨΫγϣϯ to-R

4. 4.

   גࣜձࣾτΡʔΞʔϧ
   ୅දऔక໾
   
   ϑϩϯτΤϯυΤϯδχΞ
   ੢ാҰഅ

5. 5.

   גࣜձࣾτΡʔΞʔϧ
   ୅දऔక໾
   
   ϑϩϯτΤϯυΤϯδχΞ
   ੢ാҰഅ

6. 6.

   https://www.to-r.net/media/react-tutorial/

7. 7.

   https://www.to-r.net/media/react-tutorial/ ࠷ۙͷ͓࢓ࣄ͸΄ͱΜͲ"OHVMBS

8. 8.

   3Y+4 ຊ೔ͷςʔϚ

9. 9.

   const button = document.querySelector('button'); button.addEventListener('click', () => { console.log('Clicked!') });

   +BWB4DSJQU
10. 10.

    3Y+4 var button = document.querySelector('button'); Rx.Observable.fromEvent(button, 'click') .subscribe(() => {

    console.log('Clicked!') });
11. 11.

    $('button:first').click( () => { console.log('Clicked!'); }); K2VFSZ

12. 12.

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

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

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

    => val*2) .subscribe(val => { console.log(val); });
14. 14.

    ͜Μͳʹศརͳ໋ྩ͕
    छྨ΄Ͳ༻ҙ͞Ε͍ͯΔ

15. 15.

    https://www.learnrxjs.io/

16. 16.

    3Y+4ʹର͢ΔϑΝʔετΠϯϓϨογϣϯ wͳʹ͕ศར͔Θ͔Βͳ͍
    w֮͑Δ͜ͱଟ͍
    w഑ྻ͕ετϦʔϜ
    wK2VFSZศར
    ҧ͏

17. 17.

    3Y+4ͷར఺͸
    ͋Δఔ౓࢖͍͜ͳ͞ͳ͍ͱ
    ݟ͑ͯ͜ͳ͍

18. 18.

    https://polipoliweb.com/blog/shinjin-kyouiku/

19. 19.

    ؓ࿩ٳ୊

20. 20.

    3Y+4Λཧղ͢ΔͨΊͷͭͷϙΠϯτ wඇಉظ
    wϦΞΫςΟϒ
    wσʔλετΞ

21. 21.

    ඇಉظ

22. 22.

    ඇಉظ

23. 23.

    ඇಉظ ͍ͭ࢝·Δ͔Θ͔Βͳ͍͠ɺ ऴΘΔλΠϛϯά΋୲อ͞Ε͍ͯͳ͍

24. 24.

    ඇಉظ ෳ਺ͷॲཧ͕ऴΘͬͨλΠϛϯάͰԿ͔͍ͨ͠

25. 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
26. 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
27. 27.

    ඇಉظ Կ͔ͷॲཧ͕ऴΘͬͨλΠϛϯάͰԿ͔͍ͨ͠

28. 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
29. 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
30. 30.

    ϦΞΫςΟϒ

31. 31.

    ϦΞΫςΟϒ ετϦʔϜͷ஋ʹԠͯ͡ ॲཧΛ࣮ߦ͢Δ ʢݫີͳఆٛͰ͸ͳ͋͘͘·ͰRxJSΛཧղ͢Δ্ͷ֓೦ͱͯ͠ʣ

32. 32.

    ϦΞΫςΟϒ 0CFSWBCMF 0CTFSWFS

33. 33.

    ϦΞΫςΟϒ 0CFSWBCMF 0CTFSWFS ஋͕มΘͬͨ͜ͱΛ఻͑Δ ஋͕มΘͬͨΒ࣮ߦ ɹߪಡ

34. 34.

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

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

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

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

    wΞΠςϜΛ௥Ճ
    w૯਺ΛมԽ
    wϖʔδϯάΛมԽ 41"Ͱ͸ͭͷ৘ใมߋͰ୔ࢁͷॲཧ͕ඞཁʹͳΔ 50%0Ϧετʹ
    ৽نΞΠςϜΛ
    ௥Ճ

38. 38.

    σʔλετΞ

39. 39.

    σʔλετΞ AngularͷίʔυͰগ͠۩ମతʹ

40. 40.

    "OHVMBS $PNQPOFOU $PNQPOFOU 4FSWJDF

41. 41.

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

    increment() { this.count.next(this.count.value + 1); } } "OHVMBS αʔϏε
42. 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 ίϯϙʔωϯτ
43. 43.

    VOTVCTDSJCF͸๨Εͣʹ

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

    "OHVMBSͷ
    BTZODύΠϓ͕ศར

46. 46.

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

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

    <p>{{count | async}}</p> <button (click)="increment()">click</button> "OHVMBS ςϯϓϨʔτ

48. 48.

    ݁࿦

49. 49.

    ศརͰ͢ΑͶ

50. 50.

    5IBOL
    :PV