LoginSignup
1
0

More than 3 years have passed since last update.

RxJS_Observableについて

Last updated at Posted at 2021-04-18

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
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0