NativeScriptで開発していく上で、RxJSの知識が必要になってきたので、勉強しました。
今日は、RxJSとはどういったもので、どういう時に使えるのかサンプルを示しながら軽く説明したいと思います。
まずはRxJSに入る前に、Reactiveというのがどういうものなのかわかっていないといけないので、そこについて押さえておきます。
このスライドがわかりやすかったのですが、「Reactive」とつくものは全て
- プログラミングモデル
- ランタイム
- アーキテクチャ
の３つの要素からなります。
そして、それぞれ
- Reactive Programming
- Reactive Streams
- Reactive Manifesto
に対応しています。
全て掘り下げると本題から逸れてしまうのでやめておきますが、興味がある方は調べてみてください。
僕がReactiveを理解する上で一番ピンときたのは、「Excel」です。
１つのセルを書き換えた時に、そのセルの値を用いて計算している他のセルがあれば、その変更に伴って自動的に変わります。
これと似たようなことがJavaなりSwiftなりJavaScriptなりで実現できるということです。
RxJSはJavaScriptのReactive Programmingなので、ホームページを見ながら、JSFiddleで試して見て勉強しました。
var count = 0;
var rate = 1000;
var lastClick = Date.now() - rate;
var button = document.querySelector('button');
button.addEventListener('click', (event) => {
if (Date.now() - lastClick >= rate) {
count += event.clientX;
console.log(count)
lastClick = Date.now();
}
});
例えば、本来ならばこのように書かなければならないコードが次のように書けます。
var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
.throttleTime(1000)
.map(event => event.clientX)
.scan((count, clientX) => count + clientX, 0)
.subscribe(count => console.log(count));
これのどこがいいのかというと、まず従来の方法ではrateを変数として定めていますが、それをしなくていいということです。throttleTimeというメソッドが定義されているので、このような手法が取れます。
そして、「.」で繋げていますが、それぞれ抽出のような作業を行っていて、前の処理でとれたものに対して次の処理を行うことができているというのも注目すべきポイントではないかと思います。
この記事でも言及されていましたが、問題が複雑化していった時に、条件がストリームで分離されていると、予期しない処理を実行させずにすみます。そのため、見通しの良いプログラムを書くことができるという点もリアクティブプログラミングのメリットなのではないでしょうか？