RxJS

RxJSハマりポイント(初心者向け)


はじめに

Angularを使っているとRxJSは避けて通れないと思いますが、

初めて使った時にそれなりに戸惑ったので、

役にたつかわかりませんが、自分が理解でハマったポイントをまとめようと思います。

※解説記事ではありません。


バージョンの違い

RxJSはバージョン6.0から各関数のインポートパスが変更になっています。

RxJS 6.0 変更点まとめ(適宜更新)

自分が関わったプロジェクトではバージョン6.xを使っているのですが、

6.xは現行のバージョン(2018/11/20時点)で新しいため、検索すると当然6.0よりも前のバージョンの記事の方が多くヒットします。

ここで6.x以降と6.0より前では記述の仕方がかなり違うため、戸惑いました。(調べた書き方では全然動かない)

調べるときはバージョンに気をつけましょう。

(今考えればバージョンくらいちゃんと気にしろよと過去の自分に言いたいですが、

当初はそこまで考えが回っておらず、結局ライブラリの中身を見渡してみてどうやらバージョン違いのようだというとこで自分の中では落ち着きました。)

この件以外にも言えますが、破壊的変更が加わるバージョンアップにはちゃんと気をつけておきたい。。。。(PHPとかPHPとかPHPとか。。。)


Observable? Observer? Stream?

新しい概念を表すには当然それを表す用語が必要なのはわかりますが、急にいろんな単語が出てきて困りました。

概念自体が多少抽象的(?)なので、調べてみてもふわっとした感じの解説が多い印象。

Observerパターンというデザインパターンがもとになっています。

結局自分でガシガシ実験してみて体感的に理解しました。

結果、これが一番の近道だったと思います。

いろんな解説サイトを回るよりも自分で試すのが一番!

なのですが、参考は必要なので自分的に理解の助けになったサイトをいくつか載せておきます。

Reactive Extensionsのはじめかた

Practical RxJS In The Wild 🦁— Requests with concatMap() vs mergeMap() vs forkJoin() 🥊

Learn to combine RxJs sequences with super intuitive interactive diagrams

RxJS Operators for Dummies: forkJoin, zip, combineLatest, withLatestFrom


なんとなく理解したあたりで登場するSubject

ObservableかつOvserverな奴。

しかもHotとColdという違いもあるらしい。

わかってきたなーと思いはじめたあたりでSubjectの概念が登場して「どういうこと?」となりました。

わかってしまえば単純なのだけれど、混乱のもとになったのは確か。。。

最初はSubjectについてはあまり触れない方がいいかもしれない(?)


たくさんあるoperator

RxJSにはof()やfrom()、timer()などのObservableを生成する関数の他に、

ストリームに流れてくる値を加工するためのoperatorと呼ばれる関数がありますが、

この数がまた多い。。。

普段使うものはそんなに多くないのですが、複数のストリームを扱ったりしようとする場合は様々なoperatorを使う必要が出て、それぞれの動きを理解するのがちょっと大変になります。

とりあえずはmapやfilter、mergeMapなどの基本的なものに絞って覚えるのが良いと思います。


まとめ

色々書きましたが、Rxは概念さえ覚えてしまえばストリームを自在に操ることができるようになって便利です。

この記事がRxJSを初めて使う人の役に立てば幸いです。