はじめに

この記事は、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するやりかたがあるんだってよ

[JavaScript] RxJSを使わずにRxJSを理解する