読者です 読者をやめる 読者になる 読者になる

RxJSを触ってみた

JavaScript

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

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

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!

まとめ

  • 複数の非同期処理がある場合、管理が楽そう
  • throttleを利用すれば、ユーザーの入力値などでもある程度まとまった処理ができそう
  • エラーリカバリなどの処理も簡潔に書ける?(簡潔になっているか分からない)

関数型のプログラミングの知識が浅いのでもっと勉強していきたいなぁと思いましたー(*´∇`*)