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.5k
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.4k
Vue with TypeScript
kazumanishihata
0
1.8k
ころばぬ先のテクニカルディレクション
kazumanishihata
1
600
動きのデザインとフロントエンドの連携
kazumanishihata
2
1.5k
まぼろしのJS勉強会 #2 「細かすぎて伝わらないUI実装選手権」『使えそうで使えないけど使いたい IntersectionObserver』
kazumanishihata
1
360
WP REST APIとReactで作るSPA
kazumanishihata
2
9.3k
ぼくらのCONST戦争 SCRIPTY #5
kazumanishihata
2
3.3k
Other Decks in Programming
See All in Programming
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
580
チームリードになって変わったこと
isaka1022
0
200
Rails アプリ地図考 Flush Cut
makicamel
1
120
Introduction to kotlinx.rpc
arawn
0
700
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
120
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
260
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
740
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
110
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
710
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
120
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
130
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.3k
Featured
See All Featured
Building Applications with DynamoDB
mza
93
6.2k
Site-Speed That Sticks
csswizardry
4
380
The Language of Interfaces
destraynor
156
24k
How GitHub (no longer) Works
holman
314
140k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Practical Orchestrator
shlominoach
186
10k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Writing Fast Ruby
sferik
628
61k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
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