[day: 8]RxJSの学習始め

RxJSの学習始め

業務でAngularを使用しておりRxJS、ngxsの理解を深めるために学習を始めました
今回は先人の方が残した記事を読みながら書き残したメモ書きです。
学習が落ち着いたら学んだことを整理して記事にしようと考えています。

学習に使用している記事

RxJSを学ぼう1
RxJSを学ぼう2
RxJSを学ぼう3
Angular after tutorial

RxJSについて

Observablesというアーキテクチャを用いたリアクティブプログラミング用のライブラリ
非同期処理を簡潔かつ、可読性高くかけることを目的としている

元々はMicrosoftがC#向けのライブラリとして設計したものだが、様々な言語に移植された
そのためRxの名を関するライブラリは様々な言語に存在し、内容も似ている

キーワード
RP:リアクティブプログラミング
RxJS:Reactive Extentions for JavaScript
Angularではhttpリクエスト周りにおいて内部でObservableを返すといった使われ方をしている

リアクティブプログラミング:値の変更を伝播させるデータフロー指向のプログラミングパラダイム、値の関係性を記述してプログラミングする
Aに変更が加わればすぐにBにもその変更が伝わり、Bの値が変化するということ
https://system.blog.uuum.jp/entry/%E3%83%AA%E3%82%A2%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E3%81%B8%E3%81%AE%E7%90%86%E8%A7%A3%E3%81%8C%E3%82%A4%E3%83%9E%E3%82%A4%E3%83%81%E3%81%A0%E3%81%A3

RxJSの三本柱

Observable:非同期データソース(ストリーム)を表すクラスで、言葉とおりObserve(観察)する何か
Operators:Observableに対してフィルターをかける値を加工するためのメソッド郡
Schedulers:遅延操作をするなどObsevableの並行性を制御するもの
この3つを足してRxJS

RxJSの基本はObserverパターン

Observerパターンを基本に据えている。イベントや値が時間軸という名のストリームを流れる要素として扱えるように設計されたもの
ストリーム：川のことで、時間の経過と共に値が変化していく様を表す。

もう少し具体的な例を挙げてみます。『時間軸という名のストリーム』を一本の川に例えてみましょう。川にはいろいろなモノが流れています。Observable とは『川』のことです。その川の上流からユーザーはボタンクリックやテキスト入力といったアクションによって『桃』を流します。流れる桃は一見するとどれも同じ見た目ですが、それぞれ中身が異なります。この桃こそが『イベント』であり、その中身こそがユーザーアクションによって送信された『値』です。そして川に対して filter ( ある条件に一致する桃だけを下流に流す ) や merge ( 複数の川を合流させて一本の川にする ) といった操作を Operators と呼びます。

Schedulerは川の流れを遅らせたりするのに使用するが、高度な処理をする際に使用するものなので、必要な時に学べば良い

Observableはただ書いただけでは値を流すことはしない、
subscribeを書いて初めて値を流す

RxJSを学ぼう2

よく使うオペレーター

90ものオペレーターが存在するが、実際に使用するのは20くらい

Converting events to Operators

Observable.of

引数に渡された値をそのまま流して終了するだけのObservableを生成する
可変長引数なのでカンマ区切りで複数指定できる。
その場合は前から順番に出力される
全部出力すると最後にcompleteイベントが発火する
明示した値を流すだけのシンプルな Observable が欲しい時や開発途中のちょっとした動作確認などでよく使います。

Observable.from

配列のようなIterableな引数をとり、それらを順番に流す
文字列を渡すと一文字ずつIterateするStringIteratorに変換されてから出力する

イテレータ（英語: iterator）とは、プログラミング言語において配列やそれに類似する集合的データ構造（コレクションあるいはコンテナ）の各要素に対する繰り返し処理の抽象化である。 実際のプログラミング言語では、オブジェクトまたは文法などとして現れる。 JISでは反復子（はんぷくし）と翻訳されている。

例) Helloを渡すとH,e,l,l,oになって出力する
一文字ずつイテレート(反復処理)する

Time-based Operators

Obervable.interval

setIntervalのように指定された間隔ごとに値を流すObservableを生成する。
流れてくるのは整数のシーケンス
crearIntervalのようにシーケンスを止めるにはSubscribe.unsubscribeメソッドを呼び出す。
この場合にはcompleteは発火しない
なぜなら値を全て出力できていないから

Transforming Operators

Observable.map

任意の関数を流れてくるObservableソースによって生成され流れてくる値に適用して、その戻り値を再びObservableとして返す
川の途中で値を加工してまた、流すイメージ
最も使用頻度が高いものである

Observable.mapTo

mapと似ているが、これは流れてくる値を必ず同じ値にして返すもの
いいね+1ボタンを押されたら、1にして返す
いいね-1ボタンが押されたら、-1にして返す
といった使用方法がある

Observable.scan

非常に使用頻度が高いオペレーター
ボタンを押すたびに1を流す(mapTo(1))が、シード値(初期値)に1を足した累計値も一緒に返す
scalaでいうfoldLeftなどをイメージする

Observable.switchMap

Observable ソースから値が流れ出す ( A ) のを起点として別の Observable ( B ) を流すことが出来ます。また、その際に起点として流れてきた値 [ A ] を Observable [ B ] は引数として受け取る事ができます。

インクルメンタルサーチなどで使用することがありそう
難解っぽいので必要になる時にまた理解しに戻ってこよう

Filtering Operators

Observable.filter

filterを意識して使用すればOk
流れてくる値を任意の関数に適用してtrueになったもののみを返す

Observable.skip

流れてくる値のうち、指定した回数をスキップする

Observable.skip

スキップとは異なり、指定した回数のみ受け取る
全て受け取るとcompleteが発火する
画面遷移やフォームの送信などで最初の一回のみを実行したい場合にtake(1)とすることで実装することができる

Observable.distinctUntilChanged

直前の値から変化したものだけを流す
from([1, 1, 2, 2, 2, 1, 1, 2, 3, 3, 4])の場合には1, 2, 1, 2, 3, 4だけを返す
1,1,1というように値が直前と同じ場合には値を流さない

Combining Operators

Observable.merge

各Observableに値が流れてくるたびにそのまま値を流す
複数の川が1本に流れるイメージ(mmerge)
map同様に使用頻度が高い

Observable.startWith

指定した引数の値をObservableソースから値がくるよりも先に返す。
初期値として必ず同じ値を返したい場合などに便利

Observable.combineLatest

mergeと同じように2つの川を1つにまとめるが、mergeでは値は1つずつしか流れない
しかしcombineLatestは2つの値を同時に流す
1秒毎に整数を 5回流すものと 1.5秒ごとにアルファベットを 5回流すという二つの Observableがあった場合には"0A","1B","2C"のように一緒になって流れてくる
注意点として全ての Observable が最初の値を流しはじめるまで結果値が流れてこない

Observable.withLatestFrom

最初に起点となる Observable の値が流れるタイミングの時だけイベント発火します。
ここがcombinLatestと異なるところである

RxJSを学ぼう3

Observable.do

Observableソースから流れてくる全ての値に対して任意の処理を実行する(副作用)
ただし、doの戻り値は流れてきた値そのままで副作用の結果は流れない
つまり、mapのように関数を適用するが戻り値は元のまま
副作用：本来の主たる作用とは関係のない作用のこと
デバッグで使用することがある
console.logとしての目的であればdoを使用する必要はない

const positions = clicks
  .map((event: MouseEvent) => console.log(event.type) || event.clientX)

console.logはundefindを返すので、trueではないので処理は引き続き実行される
故に中の値を確認できる

Observable.never

何の値も流さないObservableソースである。nextもcompleteも返さない
errorも返さない
ある特定の条件下で返す値がない場合に使用することがある
類似のオペレーターにemptyがあるがこれはcompleteが走る
neverは決して何も返さないと覚える

Observable.delay

delay = 遅延
Observableソースから値が流れるのを遅らせる
引数はnumberかdateのみ
numberだとミリ秒単位で流れるのを遅らせ、Dateは絶対時間としてその日時まで遅らせることができる

Observable.switch

Observable を発行する Observable
それまで流れてきたものをキャンセルして後から来るObservableへスイッチしていく
最終的には最新の値のみがsubscribeされる
ここは理解が曖昧であるので、必要になったらまた戻ってこよう

Observable.throttle

ウィンドウのリサイズなど大量のイベントが発生するようなシチュエーションにおいて適度に処理を間引いて負荷を下げるといった用途で使われます。
最初の処理の実行から時間を間引いて処理を実行する

Observable.throttleTime

throttle が 引数に Observable を取ることによって間引き時間を指定したのに対し、throttleTime はシンプルに数値型 ( ミリ秒 ) を受け取って指定します。

Observable.debounce

throttle が指定した時間の間は同一イベントを処理しないのに対し、debounce は指定した時間内に同一イベントが発生すると処理せず、発生しなければ処理を実行するというアーキテクチャです
YouTube などのビデオプレイヤーには、マウスカーソルを一定時間動かさないと再生 / 停止ボタンやシークバーといったコントローラが非表示になるというインタラクションが良く見られますが、こういったものは debounce を使うことで簡単に実装出来ますね。

Observable.partition

Observable ソースを二つに分割するオペレータで、使い方は filter オペレータと非常によく似ています。filter は任意のフィルタリング関数において true となる値だけを返すのに対して、partition は true となる値と false となる値の Observable を配列で返します。

filetrでtrueの値とfalseの値とで2分することができる
1つめはtrueになる

Angular after tutorial

HttpClientModuleをapp.module.tsにimportしないとエラーになってhtto通信でuserのdataを取得できなかった
Angularの一般的なアプローチとして、コンポーネントからUIに関係しない処理は サービス に分離されます。Angularにおけるサービスという語彙は、特定の実装やインターフェースの名称ではなく、ある単一の関心のための作られた機能集約のことをまとめてサービスと呼びます。

Store
状態管理をおこなうStoreサービスを作成します。状態を保持するための BehaviorSubject と、状態を更新するための update メソッド、そして状態を購読するための select メソッドを実装しています。