RxJSを利用してみた

RxJSは、JavaScriptが不得意とする同期処理やイベント処理を簡単に記述できるライブラリです。開発元はMicrosoftで「Java」、「C++」など多種多様な言語に移植されています。ここではRxJSについて解説していきます。

01: インストール

下記サイトから最新版をダウンロードして解凍/展開する。 サンプルコードを作成する。

bash


# 作業ディレクトの作成/移動
$ mkdir JS0401-RxJS
$ cd JS0401-RxJS

# 解凍/展開したRxJSを作業ディレクトリに移動
$ mv ~/Downloads/RxJS-4.1.0 .

# サンプルコードを作成する。
# 500ミリ秒以内で3文字以上の連続した文字列を取得する。
$ nano index.html

index.html


<html><head>
<script src="RxJS-4.1.0/dist/rx.lite.js"></script>
</head>
<body>
  <input id="input" type="text" value="" />
  <div id="results"></div>
  <script>
    var $input = document.getElementById('input');
    var $results = document.getElementById('results');
    var keyups = Rx.Observable.fromEvent($input, 'keyup');
    var values = keyups.pluck('target', 'value');
    var text = values.filter( function(text) { return text.length > 2; } );
    var debounced = text.debounce(500);
    var distinct = debounced.distinctUntilChanged();
    distinct.subscribe( function(s) {
      console.log(s);
      $results.innerHTML = s;
    });
  </script>
</body></html>

02: 動作確認

ブラウザで作成したindex.htmlにアクセスする。 テキストボックスに素早く文字を入力する。