はじめに
この記事は、RxJSの使い方を解説する記事です。
けど、RxJSは出てきません。
（えっ
よくわからないままにRxJSを使い始めて悩んでいるひと（←自分）のための再入門記事です。
2つのテーマについて書いています。
-
subscribeしないと動かないのはなぜか - 何度も
subscribeすると、何度も動くのはなぜか
この記事の登場人物
プロデューサー
プロデューサーは、依頼を受けて何か仕事をしてくれます。
仕事がいつできあがるかはわかりません。
できあがり次第教えてくれることになっています。
オブザーバー
オブザーバーは、仕事の結果を受け取ります。
場合によって、3つの役目を受け持ちます。
正常結果を受け取る役目、失敗結果（エラー）を受け取る役目、仕事が全て終わったことを受け取る役目です。
オブザーバブル
オブザーバブルは、プロデューサーとオブザーバーの仲介役です。
オブザーバーから注文を受けると、プロデューサーを働かせて仕事結果をオブザーバーへ渡させます。
subscribeメソッドを持ちます。
今回のキモです。
実装
RxJSを理解するために、それぞれを簡単に実装してみます。
まずキモであるオブザーバブルです。
オブザーバブルの実装
オブザーバブルは、オブザーバーからの注文をsubscribeというメソッドで受け付けます。
仕事の内容は、コンストラクタ引数で受け取ったプロデューサー任せです。
subscribeメソッドの中身はまた後で実装します。
class オブザーバブル {
constructor(プロデューサー) {
this._プロデューサー = プロデューサー;
}
subscribe(オブザーバー) {
// 後で
}
}
オブザーバーの実装
オブザーバーはnext error completeの3つのメソッドを持つオブジェクトです。
それぞれ、正常結果、失敗結果（エラー）、仕事の完了を受け取るためのものです。
const オブザーバー = {
next: function(結果) {},
error: function(エラー) {},
complete: function() {},
};
プロデューサーの実装
プロデューサーはただの関数にしました。
オブザーバーを引数に取り、自分の仕事結果を渡します。
仕事がすべて正常に終わればcompleteを呼び出し、途中で何か問題があればerrorを呼び出します。
実際の開発現場では、フレームワーク等があらかじめ用意しているプロデューサーを使うことになると思います。
function プロデューサー(オブザーバー) {
try {
オブザーバー.next(仕事1());
オブザーバー.next(仕事2());
オブザーバー.next(仕事3());
オブザーバー.complete();
} catch (e) {
オブザーバー.error(e);
}
}
使い方
上記で実装したプログラムを使うシーンはこうなります。
オブザーバブルオブジェクトを作って、subscribeメソッドにオブザーバーを渡します。
const observable = new オブザーバブル(プロデューサー);
observable.subscribe(オブザーバー);
subscribeメソッドの実装
後回しにしたオブザーバブルのsubuscibeメソッドの実装です。
ここが今回のテーマのキモです。
キモですが、内容はごく単純です。プロデューサーを呼んでいるだけです。
class オブザーバブル {
constructor(プロデューサー) {
this._プロデューサー = プロデューサー;
}
subscribe(オブザーバー) {
this._プロデューサー(オブザーバー);
}
}
まとめ
subscribeしないと、プロデューサーは呼ばれないことがわかりました。
subscribeする度に、プロデューサーが呼ばれることがわかりました。
次は……!?
- subscribeしなくても動くプロデューサーがあるんだってよ
- プロデューサー一回の働きを、複数箇所でsubscribeするやりかたがあるんだってよ