逆引きRxJSの使い方パターン


RxJSを覚えようとして調べたところ、mapやfilterなどRxJSが提供している機能の解説はすぐに見つかりましたが、実際にウェブページを作るときにありがちなパターンをRxJSでどのように実現するかという例があまり見つからないので苦労しました。
RxJSの勉強のためにちょっとしたサンプルアプリを作り、その中で見えてきたありがちなパターンを実現するRxJSのコードをまとめてみました。
この記事のRxJSは5系です。4から5で結構メソッド名などが変わっているようなので以前からRxJSを知っている方はご注意を。
また、動作確認はnode v8.1.3で行いました。
ダブルクリック
RxJSの入門として紹介されることが多いサンプルですが、まずはここから。
色々なところで紹介されている入門。
double_click.js
const Rx = require(‘rxjs/Rx’)
const Emitter = require(‘event-emitter’)
const emitter = new Emitter()
// 本来はDOMのクリックイベントなどを監視するが、CLIで動かすためにevent-emitterを使う
const click$ = Rx.Observable.fromEvent(emitter, ‘click’)
const doubleClick$ = click$
.bufferTime(100) // 100ms以内のイベントを配列にまとめる
.filter(arr => arr.length > 1) // 配列長が1より大きい = ダブルクリック
.map(arr => arr.shift() ) // 最初のイベントだけ使いたいので先頭だけ取り出す
click$.subscribe(() => {
console.log(‘single click’)
})
doubleClick$.subscribe(() => {
console.log(‘double click’)
})
setTimeout(() => emitter.emit(‘click’), 50)
setTimeout(() => emitter.emit(‘click’), 100)
setTimeout(() => emitter.emit(‘

サイト名: Qiita

Leave a Reply

Your email address will not be published. Required fields are marked *