メニューを閉じる

テクノデジタルグループ

メニューを開く

2017.08.30

プログラミング

RxJSを導入して触ってみた

新卒のMです。

ReactiveExtensions(Rx)
RxはC#でLINQが作られたことから始まり、
その利便性からLINQを各種言語へRxとして移植までされているほどです。

※LINQについては今回は詳しく説明しません。簡単に言うとデータをクエリのようなもので扱うものです。

Rxは簡単に説明すると、イベントを取り扱うものです。
この時条件式は自由に設定できますし、途中から変更したりもできます。

今回はJavaScript(JS)へと移植された、RxJSを使ってみました。

まずは簡単に使ってみます。

Rx.Observable.interval(1000)
    .subscribe(function(cnt){console.log("経過時間:"+cnt+"秒");});

これで経過秒数をカウントし、出力するプログラムの完成です。
.intervalを付けることで、指定したms毎に条件を満たすので、subscribeされます。
ここに、終了フラグを付けてみます。

//  ストップウォッチ
Rx.Observable.interval(1000)
    .filter(function(){return !endFlag;})
    .subscribe(function(cnt){console.log("経過時間:"+cnt+"秒");});
//  タイマー
function(time){
    Rx.Observable.interval(1000)
        .take(time+1)
        .subscribe(function(cnt){console.log("残り時間:"+(time-cnt)+"秒");});
}

これでフラグがたてば止まるストップウォッチと、
関数に投げた時間で止まるタイマーができました。
filterを付けることで、intervalが満たされた時にfilterの判定が入りtrueが返された時にだけsubscribeされます。

createを使うと複雑なものも作れます。

var source = Rx.Observable.create(function(observer){
    //  1秒ごとに終了条件を確認
    var interval = setInterval(function(){
        if( endFlag ){
            //  onCompleted()を呼ぶことでストリームを終了
            //  終了後disposeされる
            observer.onCompleted();
        }
    }, 1000);
    //  disposeされたときに呼ばれる
    return function(){
        //  後始末 
        clearInterval(interval);
        console.log('disposed');
    }
});

//  各関数ごとの処理を追加
var subscription = source.subscribe(
        //  onNext(x)時の処理
        function(x){
            console.log('onNext:' + x);
        },
        //  onError(e)時の処理
        function(e){
            console.log('onError');
        },
        //  onCompleted()時の処理
        function(){
            console.log('onCompleted');
        }
);

これまでの書き方だとストリームでのイベント処理は行えますが、
自分自身でストリームを消すことができません。
ですが、上記の書き方だとストリームの終了まで
そのストリーム自身で行うことができます。
もちろんこのままでは使い道はありませんが、
その時に応じて幅広く使うことができます。

導入はとても簡単でした。
https://github.com/Reactive-Extensions/RxJS
ここからrx.all.jsをダウンロードして、
スクリプトを読み込ませるだけです。

このライブラリの利点は時間を使った処理や、
イベント処理を独立して書くことができる点です。

UnityなどのC#などでも使えるので興味が出たら触ってみましょう。

以上、簡単にRxJSを触ってみました。


【記事への感想募集中!】

記事への感想・ご意見がありましたら、ぜひフォームからご投稿ください!
  • こんな記事が読んでみたい、こんなことが知りたい、調べてほしい!という意見も募集中!
  • いただいた感想は今後の記事に活かしたいと思います!

感想フォームはこちら


【テクノデジタルではエンジニア/デザイナーを積極採用中です!】

下記項目に1つでも当てはまる方は是非、詳細ページへ!
  • 自分でアプリを作ってみたい
  • ITで世の中にワクワクを生み出したい
  • 使いやすさ、デザインにこだわったWebサイトを開発したい

採用情報の詳細はこちら


Qangaroo(カンガルー)

  • 徹底した見やすさと優れた操作性で、テストの「見える化」を実現。
  • テストの進捗が見える。開発がスマートに進む。
  • クラウド型テスト管理ツール『Qangaroo(カンガルー)』

【テクノデジタルのインフラサービス】

当社では、多数のサービスの開発実績を活かし、
アプリケーションのパフォーマンスを最大限に引き出すインフラ設計・構築を行います。
AWSなどへのクラウド移行、既存インフラの監視・運用保守も承りますので、ぜひご相談ください。
詳細は下記ページをご覧ください。

https://www.tcdigital.jp/infrastructure/

最近の記事