ひとりごと

文章の練習と自分のアウトプットのために書いていく日記です。

RxJSメモ(1)

はじめに

これは自分用メモです。時間がたつと忘れたりするので、すぐ見返すことができるようにするためのものです。カジュアルに書いて更新していく方針です。 

今日はUdemyの動画をみて、内容を簡単にまとめました。自分が見返して思い出せるレベルのメモです。見た講座は こちら

動画を作っていらっしゃる方の表現がわかりやすく、個人的におすすめです。(少し前に公開されたもので、Angularのバージョンは5ですが)

それでも初めて見たときはあんまりピントきていませんでした。実際にコードを読んだり書いたりするようになって、また見返してみるとわかりやすい!理解深まってる!と感じたので、やっぱりドキュメント読んだり動画見たりってのと併せて書いてみるのが一番だなって思いました。

特にサンプルコードだけだと自分の場合、どこで使うんだ?ってとこまでぴんと来なかったりするので、何かしら自分で作ってみるなりするのが良さそう。(RxJSの場合、Rxなんちゃらに馴染みがあればすぐピンとくるんだろうなとは思います。)実務で使えたら一番すっと入ってくると思います。今は使っているので各オペレーターとかあーなるほどーとなります。以下、キーワードと説明です。自分用なので超簡潔です。  

RxJS

リアクティブプログラミングを簡単に実装するためのライブラリ。JavaScript用。

リアクティブプログラミング

通知されてくるデータを受け取るたびに関連したプログラムが反応して処理を行うようにするプログラミングの考え方。非同期処理を直感的に書ける。

Observable

非同期データソース(ストリーム)を表すクラス。Observe(観察)する何か。

Stream

データが流れる仕組み。1本の川にイベントやデータを流すイメージ。

オペレータ

流れてくるデータを中間で操作するメソッド群。

以下、オペレータ一部抜粋

map

流れてきたデータを使って加工したデータを流すことができる。

debounceTime

連続するデータの間引き処理をする。具体的には、最後にデータが流れたタイミングから指定したミリ秒の間は流れないようにするという制御ができる。

throttleTime

指定したミリ秒ごとに処理が実行されるように制御できる。

distinctUntilChanged

前回と異なる値が流れた場合のみストリームを流す。変更があった場合だけなんらかの処理をしたい場合等に使える。

merge

複数のObservableを1本にまとめたものをストリームに流す。

switchMap

ストリームAに流れてくるデータをもとに別のストリームBを流す。別のストリームBが終わる前に元のストリームAが流れた場合、Bは途中でキャンセル・破棄され、初めから再び実行される。

skip

引数で指定した回数分のストリームを流さず、スキップする。

take

引数で指定した回数分のみストリームにデータを流す。

Subscribe

下流で流れてくるデータを受け取って処理する(toPromise.thenでもできる)

Subscribe([受け取った時のコールバック][エラー時のコールバック][処理完了時のコールバック])

asyncパイプ

Subscribeを明示的に受け取らなくてもテンプレート側でストリームに流れてきたデータを受け取ることができる。コードがシンプルになる。

Subject

ObservableだとSubscribeしたタイミングで流れる。また、1度しか流れない。 SubjectはObservableを継承している。任意のタイミングでデータを流せる。 Sbscribeするときのcallbackなど(Observer)を保持している。

主な使われ方

1.Servise側でSubjectを初期化
2.公開コンポーネントでSubjectを監視する

参考

メモ

いい感じに図で表現したい気持ちはある。おいおいできたらな。