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.7k
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.5k
Vue with TypeScript
kazumanishihata
0
1.8k
ころばぬ先のテクニカルディレクション
kazumanishihata
1
600
動きのデザインとフロントエンドの連携
kazumanishihata
2
1.5k
まぼろしのJS勉強会 #2 「細かすぎて伝わらないUI実装選手権」『使えそうで使えないけど使いたい IntersectionObserver』
kazumanishihata
1
370
WP REST APIとReactで作るSPA
kazumanishihata
2
9.5k
ぼくらのCONST戦争 SCRIPTY #5
kazumanishihata
2
3.4k
Other Decks in Programming
See All in Programming
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.9k
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
330
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
250
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
310
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
150
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
210
XSLTで作るBrainfuck処理系
makki_d
0
210
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
750
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
250
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
490
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
310
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
77
9.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Designing for humans not robots
tammielis
253
25k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
Facilitating Awesome Meetings
lara
54
6.4k
BBQ
matthewcrist
89
9.7k
Producing Creativity
orderedlist
PRO
346
40k
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