Observerパターンの解説

Observerパターンとは、あるオブジェクトの状態が変わると、それを監視している他のオブジェクトに通知が行われるデザインパターンだ。これにより、複数のオブジェクトが同期して動作することができる。

たとえば、ゲームの中でプレイヤーのステータスが変わると、それに応じてUIの表示も自動的に変わるような場面で使える。

では、サンプルコードを一緒に見ていこう。

解説

Step 1: 監視されるオブジェクト（Subject）を作る

まず、監視されるオブジェクト、つまり何か変化が起きたときに他のオブジェクトに通知する役割を持つ「Subject」を作るよ。このクラスでは、オブザーバー（観察者）を登録・削除し、変化があったら通知を送る処理を追加しよう。


// 監視対象（Subject）のクラス
class Subject {
  constructor() {
    this.observers = []; // 観察者のリスト
  }

  addObserver(observer) {
    this.observers.push(observer); // 観察者を追加
  }

  removeObserver(observer) {
    this.observers = this.observers.filter(obs => obs !== observer); // 観察者を削除
  }

  notifyObservers(message) {
    this.observers.forEach(observer => observer.update(message)); // すべての観察者に通知
  }
}

Step 2: 観察するオブジェクト（Observer）を作る

次に、Subjectを監視する「Observer」クラスを作るよ。このクラスでは、Subjectからの通知を受け取るための update() メソッドを実装するんだ。


// 観察者（Observer）のクラス
class Observer {
  constructor(name) {
    this.name = name;
  }

  update(message) {
    console.log(`${this.name}は通知を受け取りました: ${message}`);
  }
}

Step 3: 監視対象と観察者を連携させる

ここで、SubjectとObserverを連携させて、変化が起きたときにObserverに通知が送られるようにするよ。観察者をSubjectに追加して、変化が起きたときにすべての観察者が通知を受け取る仕組みだ。


// SubjectとObserverの連携
const subject = new Subject();

const observer1 = new Observer('Observer 1');
const observer2 = new Observer('Observer 2');

subject.addObserver(observer1);
subject.addObserver(observer2);

// 変化が起きたときにすべての観察者に通知
subject.notifyObservers('イベントが発生しました！');

Step 4: 観察者を追加・削除する

Observerパターンでは、観察者を動的に追加・削除することができるんだ。例えば、観察者1を削除して、通知が届かなくなるようにしてみよう。


// 観察者の削除
subject.removeObserver(observer1);

// 再度通知を送信、Observer 1は通知を受け取らない
subject.notifyObservers('別のイベントが発生しました！');

Observerパターンの重要なポイント

Observerパターンは、あるオブジェクトが変化したときに、他のオブジェクトにその変化を通知する仕組み。
観察者を自由に追加・削除できるため、柔軟な設計が可能。
SubjectとObserverは疎結合であるため、相互に依存しない設計が可能。

これでObserverパターンの解説は終わりだ。
このパターンを使うと、あるオブジェクトの状態変化に応じて、他のオブジェクトも自動で反応するようにできるため、UIやデータのリアルタイムな更新に便利だ。