[day: 8]RxJSの学習始め

# RxJSの学習始め
業務でAngularを使用しておりRxJS、ngxsの理解を深めるために学習を始めました
今回は先人の方が残した記事を読みながら書き残したメモ書きです。
学習が落ち着いたら学んだことを整理して記事にしようと考えています。
## 学習に使用している記事
[RxJSを学ぼう1](https://tech.recruit-mp.co.jp/front-end/rxjs-intro/)
[RxJSを学ぼう2](https://tech.recruit-mp.co.jp/front-end/post-11475/)
[RxJSを学ぼう3](https://tech.recruit-mp.co.jp/front-end/post-11539/)
[Angular after tutorial](https://zenn.dev/lacolaco/books/angular-after-tutorial/viewer/1-4-forms-and-state)

### 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
https://tech.recruit-mp.co.jp/front-end/post-11539/

### 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<T> メソッドを実装しています。