RxJS_Observableについて

RxJSのObservableについて解説します。間違った解釈がありましたらご指摘ください。

まずは簡単に用語の説明からしていきます。

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

データを受け取るたびに関連したプログラムが反応して、処理を行うようにするプログラミングの考え方です。
SPAには不可欠な要素ですね。

###データストリームとは

リアクティブプログラミングでは、随時発生するデータを処理することができる。
この随時データが生成されて、その都度流れてくるデータの流れをデータストリームという。

#RxJSについて

ObservableはDOM操作に使われます。

##Observable
データを生成し、observerメソッドを呼び出して、データをobserverに通知する

##observer
Observableからのデータを受信する

##next 、 error 、complete
Observerは、Observableをsubscribe(購読)し、受け取ったデータを処理する。
next 、 error 、complete の処理をする

####next
Observableがデータを生成する度にObservableによって呼び出される。
Observableによって生成されたデータを引数に取る。

####error
エラーが発生したことを通知する。
これが呼び出されると、 next や complete はそれ以上、呼び出されない。

####complete
完了したことを通知する。
エラーがなかった場合、最後のnextメソッドが呼び出された後に、Observableによって呼び出される。

##subscribe
Observableから流れてくるデータをObserverがsubscribeで受け取り、受け取ったデータに関して、必要な処理を行う。

##コード例

最初にObservableはnew演算子で作成します。Observableの特徴の一つとして、値を複数まとめて扱えることにあります。

色々な記事でonserverという単語がありよく分からなかったのですがObservableの参照を見てみるとsubscribeメソッドの引数にobserverと記述されていたので、observerはメソッドかなんかだと思ってましたがsubscribeメソッドの変数名のことを指していると思います。
この当たりは間違っているかもしれません。。。

subscribe(observer?: PartialObserver<T>): Subscription;

Observableの引数にはsubscribe関数を記述します。
下記コードからnext comlete errorはObservableのメソッドであるということがわかります。

subscribeメソッドは通知の受信を止めるためにunsubscribe()メソッドがあるSubscriptionオブジェクトを返します。

コードの結果は以下のようになります。

開始
0
1
2
3
4
5
終了

上記の順番を見てわかるようにObservableはsubscribeメソッドが走ったタイミングでデータ
が流れていることがわかります。したがって、作成したObservableの値はsubscribe()メソッドで受け取ることができます。

import { Observable } from "rxjs";

//new演算子でObservableのオブジェクト生成
// observerはただの引数名
let observable = new Observable(function subscribe(observer) {
    try {
        // Ovservableのメソッドを実行
        observer.next(0);
        observer.next(1);
        observer.next(2);
        observer.next(3);
        observer.next(4);
        observer.next(5);
        // 正常に完了したことを通知
        observer.complete();
    }
    catch (err) {
        // エラー通知
        observer1.error(err);
    }
});
// 最初に呼び出されます
console.log('開始');

// Subscribe関数は、Observerを受け取って、Observerの中にある関数(next,error,complete)を実行します。
// subscribe()のカッコないにはobserver.next()が行う処理を記述
observable.subscribe(val => console.log(val));
console.log('終了');

参考
https://qiita.com/Sekky0905/items/93bd4804a2003ed0aa8d
https://qiita.com/agajo/items/7942743a0130f7a0f30b
https://fumiononaka.com/Business/html5/FN1802005.html