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.3k
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.3k
Vue with TypeScript
kazumanishihata
0
1.6k
ころばぬ先のテクニカルディレクション
kazumanishihata
1
590
動きのデザインとフロントエンドの連携
kazumanishihata
2
1.4k
まぼろしのJS勉強会 #2 「細かすぎて伝わらないUI実装選手権」『使えそうで使えないけど使いたい IntersectionObserver』
kazumanishihata
1
320
WP REST APIとReactで作るSPA
kazumanishihata
2
8.4k
ぼくらのCONST戦争 SCRIPTY #5
kazumanishihata
2
3.2k
Other Decks in Programming
See All in Programming
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
380
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
1
110
Goのmultiple errorsについて (2024年4月版)
syumai
4
920
新宿ダンジョンを可視化してみた
satoshi7190
2
260
Ruby Pattern Matching
bkuhlmann
0
930
Hanami and htmx
bkuhlmann
0
210
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
270
Fragment Composition of GraphQL
quramy
7
1k
Let's learn code review
riofujimon
2
420
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
370
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
710
Featured
See All Featured
Building Your Own Lightsaber
phodgson
99
5.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
244
20k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Embracing the Ebb and Flow
colly
80
4.1k
Code Reviewing Like a Champion
maltzj
514
39k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Testing 201, or: Great Expectations
jmmastey
28
6.4k
A better future with KSS
kneath
231
16k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Optimising Largest Contentful Paint
csswizardry
8
2.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