RxJSを触ってみた - Adwaysエンジニアブログ

どうも　もうすぐ２５歳の井古田です。

時の流れとは残酷ですね！！

RxJSとは

C#にあったLINQ(Language INtegrated Query)というクエリ式で、データの形態を気にせず汎用的にデータを問い合わせることができる機能を非同期イベントに対応できるように拡張したものがRx(Reactive Extensions)です。

このRxをJavaScriptでも利用できるようにしたものがRxJS(Reactive Extensions for JavaScript)です。

ダウンロード

cdnjsでホスティングされているので便利です！

サンプルコードと解説

Rxではストリームと呼ばれるものを扱いっています。これはデータの流れるシーケンスであり、時間軸も存在しているみたいです。またストリームはObservableとも呼ばれ、クリックイベントでも配列のデータでも、単一の値でもAPI呼び出しでも、Observableにすることで何でもストリームにすることが可能になります。

ストリーム

生成

"test"という文字列の流れるストリームを作成

Rx.Observable.just("test")

3秒ごとに5回メッセージを流れるストリームを作成

var just = Rx.helpers.just;
Rx.Observable.interval(3000)
.take(5)

JavaScriptのイベントからストリームを生成

Rx.Observable.fromEvent(document[ターゲット], 'click[イベント]')

処理

ストリームをObservable.subscribeすれば流れてくるデータを受け取って処理を行うことができます。

Rx.Observable.just("test")
.subscribe(function(s){ console.log(s); })

また、subscribeは3つの引数を持っています。

第1引数：何かしらの値を受け取ったときに呼ばれる関数(onNext)

第2引数：ストリーム上でエラーが発生したときに呼ばれる関数(onError)

第3引数：ストリームが終了したときに呼ばれる関数(onCompleted)

var just = Rx.helpers.just;
Rx.Observable.interval(3000)
.take(5)
.subscribe(
  function(s){ console.log(s); },
  function(error){ console.log("error!"); },
  function(){ console.log("finish!"); }
);

// 0
// 1
// 2
// 3
// 4
// finish!

操作

map

map関数は、onNextで受け取った値を別の値に変換して、次のストリームに流すことができます。

Rx.Observable.from([1,2,3,4,5])
.map(function(s){ return s * 2; })
.subscribe(
  function(s){ console.log(s); },
  function(error){ console.log("error!"); },
  function(){ console.log("finish!"); }
);

// 2
// 4
// 6
// 8
// 10
// finish!

filter

filter関数は、onNextで受け取った値をふるいにかけることできます。

下記では、条件にマッチしたもののみ、ストリームに流します。

Rx.Observable.from([1,2,3,4,5])
.filter(function(s){ return s % 2 == 0; })
.subscribe(
  function(s){ console.log(s); },
  function(error){ console.log("error!"); },
  function(){ console.log("finish!"); }
);

// 2
// 4
// finish!

まとめ