BFE.devでのAI解答例 - JavaScript コーディング問題
71. Observable Subjectを実装する

class Subject {
  constructor() {
    this.observers = [];
  }

  subscribe(observer) {
    this.observers.push(observer);
  }

  unsubscribe(observer) {
    this.observers = this.observers.filter((obs) => obs !== observer);
  }

  next(value) {
    for (let observer of this.observers) {
      if (observer.next) {
        observer.next(value);
      } else if (typeof observer === 'function') {
        observer(value);
      }
    }
  }

  error(error) {
    for (let observer of this.observers) {
      if (observer.error) {
        observer.error(error);
      }
    }
  }

  complete() {
    for (let observer of this.observers) {
      if (observer.complete) {
        observer.complete();
      }
    }
  }
}

このSubjectは、ObservableSubjectとして振る舞います。すべてのSubscriptionまたはObserverに同じ値を渡します。SubscriptionやObserverはadd和removeによって変更でき、受け取った値が同期されます。Subjectの内部にあるobservers配列に登録されたobserverのリストがあります。

各メソッドでobservers配列上で繰り返し、SubscriberまたはObserverの値を遅延コールバックで呼び出します。 next,error、さらにcompleteのように、ObservableSubjectを完了すると、新しい値またはエラーが投げられたときに、Subscriptionを解除することができます。

例えば、以下のように使うことができます。

const subject = new Subject();

const observer1 = {
  next: (value) => console.log(value * 2),
};

const observer2 = (value) => console.log(value + 2);

subject.subscribe(observer1);
subject.subscribe(observer2);
subject.next(3);
subject.complete();

// 6
// 5

observerの一つはmethodとして、もう一つはfunctionとして登録されています。.nextメソッドは遅延呼び出しになります、つまり、3が後から通知されることを意味します。最後の.complete()はSubscriptionを削除することを意味します。

注意してください、SubjectはObserverもしくはObservableの観察対象であり、自己実行するObserverではありません。 したがって、必ずしも初期化時に値を渡す必要はありません。

このように、Subjectを使用することで、Observableに複数の制御フローを追加できます。あなたは、Observableとともに、addやremove、もっと多くのカスタマイズを一緒に持つことができます。