かえるの井戸端雑記

開発日誌的な記事だったり備忘録だったり。まとめ記事と言うよりは、七転八倒の様子を小説みたいに読んで眺めてもらえればと。

Angular2を使ってみる 3. 環境構築その2+RxJS

前回のオチ

前回のオチを紹介する。

実はこういうslideを見つけたわけで。

www.slideshare.net

starter kitがちゃんとあったよ……という。

github.com

github.com

こっちを素直に使うが吉。

RxJSとは

これだけではさみしいのでRxJSというkeywordがちまちま出てくるので調べてみる。

さきのslideを見るとreactive programming用のlibraryということはわかった。いやわからぬ。

github.com

…is a set of libraries to compose asynchronous and event-based programs using observable collections and Array#extras style composition in JavaScript

JavaScriptで観測可能なコレクションとArray#extrasスタイルのコンポジションを使用して非同期およびイベントベースのプログラムを作成する一連のライブラリです

google translateさんはほんとうに優秀になって。もう。

「RxJS」初心者入門 - JavaScriptの非同期処理の常識を変えるライブラリ | 株式会社LIG

すごく大雑把に言うと、RxJSとは非同期処理(マウスクリックなどのイベントベースの処理も含める)をするときに超絶便利なライブラリです!

ふむん。targetにしている領域は見えてきた気がする。

「ReactiveX (Reactive Extensions)」(以下「RX」)というC#発のプロジェクトがありますが、RxJSはそのJS版に当たります。

ほう。元々そういう物があったのか。

少し横道にそれてReactive Extensionsについて調べてみる

各言語に広まったRx(Reactive Extensions、ReactiveX)の現状・これから - Build Insider

2009年にマイクロソフトが初めて.NET Frameworkに向けて提供を開始したReactive Extensions(Rx)ライブラリ「Rx.NET」は、今ではさまざまな開発言語に移植され、幅広く使われている。

こわくないReactive Extensions超入門 - Qiita

Rxというのは、つまり、イベントです。

すごい潔くまとめたな。

ああそれでwhereとかselectとかいろいろ便利なこともできるやつということか。で、先の説明とかを考えると非同期なeventの取り扱いに向いたeventの実装ということっぽいなあ。たぶん。

元の道に戻る

で、jsでそれをやるといわれると ? と思わなくもない。jsで非同期と言われるとぱっと思いつくのはajaxだけど(他にもあれこれあった覚えはある)、普通にevent loopするprogramを連想すると、jsで実現するのはつらいなーと言う印象は出てくる。

というか前にやってやたら苦労した覚えがある。setIntervalとかsetTimeoutとか使って無限ループさせる形にして画面遷移を定期的にし続けるようなcodeを前に組んだことがあるけどきちんと整理しないと組めないし見通し悪いし同期させるのもどうしようか悩んだりで苦労した。

結局同期させたい関数のためのstatusを保持するglobalなlistを一つ作ってそこをsetIntervalで定期的に監視しすべてに1 or 0が入ったらeventを抜けるとかやったような。おうふ。

あ。もしかしてこの時に使っていれば楽になったのか?

liginc.co.jp

方法。Rx.Observabl.fromEventでbindするdomとhandleするeventを入れ込んで、あとはfilterやsubscribeといった先ほど横道にそれたときに見たような関数を使ってeventをうまく定義できる、と。

なんとなく価値が見えてきた。もう少し掘り下げるとRx.Observable.fromでStreamを作ってRx.Observer.createでstreamを受け取るevent handlerを作るということもできた模様。

ああなるほど。そりゃあ非同期な処理とかもしたくなる。いろいろ納得した。

……あれ? なんでこんなこと調べてたんだっけ。

あ、そうか。Angular2で使うものの一つとしてよく上がってきていたんだった。そりゃまあjsでeventを作るなら使いたくなるだろうなあと納得できたので今回はこれで終わり。

どこかでRxJSをそのまま使って見ることもあるかもしれないし、その機会が来る前にAngular2を使う勉強の中で使うかもしれないので、使って見るのはまたの機会へ。