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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

3Y+4 ຊ೔ͷςʔϚ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

+BWB4DSJQU [1, 2, 3, 4, 5, 6, 7, 8] .map(val => val*2) .forEach(val => { console.log(val) });

Slide 13

Slide 13 text

3Y+4 Rx.Observable.from([1, 2, 3, 4, 5, 6, 7, 8]) .map(val => val*2) .subscribe(val => { console.log(val); });

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

https://www.learnrxjs.io/

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

ؓ࿩ٳ୊

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

ඇಉظ

Slide 22

Slide 22 text

ඇಉظ

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

ϦΞΫςΟϒ

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

ϦΞΫςΟϒ 0CFSWBCMF 0CTFSWFS

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

ϦΞΫςΟϒ const sub = new Rx.BehaviorSubject(0); sub.subscribe( res => { console.log(res); }); window.addEventListener('click', () => { sub.next(sub.value + 1); });

Slide 35

Slide 35 text

ϦΞΫςΟϒ const sub = new Rx.BehaviorSubject(0); sub.subscribe( res => { console.log(res); }); window.addEventListener('click', () => { sub.next(sub.value + 1); }); ߪಡ ஋͕มΘͬͨΒ࣮ߦ ஋͕มΘͬͨ͜ͱΛ ڭ͑Δ

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

σʔλετΞ

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

"OHVMBS $PNQPOFOU $PNQPOFOU 4FSWJDF

Slide 41

Slide 41 text

@Injectable() export class CountService { public count = new Rx.BehaviorSubject(0); increment() { this.count.next(this.count.value + 1); } } "OHVMBS αʔϏε

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

VOTVCTDSJCF͸๨Εͣʹ

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

"OHVMBSͷ BTZODύΠϓ͕ศར

Slide 46

Slide 46 text

export class CountComponent implements OnInit { count: Observable; constructor( private countService: CountService ) { } ngOnInit() { this.count = this.countService.count; } increment() { this.countService.increment(); } } "OHVMBS ίϯϙʔωϯτ