概要

Observer Patternは、一つのオブジェクトが状態を持ち、その状態の変更を他のオブジェクト（オブザーバー）に通知するときに役立ちます。

オブザーバーは状態の変更に対して何らかのアクションを行うことができます。

今回示すプログラムの設計

あるオンラインショップで商品の在庫が変更されるたびに、在庫に関心を持つオブザーバー（顧客）に通知するシチュエーションを考えてみましょう🙋‍♀️

以下がクラス図とTypeScriptのサンプルコードです。

クラス図

クラス名	役割
`Subject`	被験者を表すインターフェイス
`ConcreteSubject`	被験者の具体的な実装。オブザーバーを管理し、在庫情報を保持し、在庫が変更された際にオブザーバーに通知する
`Observer`	オブザーバーを表すインターフェイス。状態の変更に対するアップデートメソッドを持つ
`ConcreteObserver`	オブザーバーの具体的な実装。顧客のメールアドレスを持ち、通知を受け取った際の処理を行う

サンプルコード

interface Subject {
    attach(observer: Observer): void;
    detach(observer: Observer): void;
    notify(): void;
}

class ConcreteSubject implements Subject {
    private observers: Observer[] = [];
    private inventory = 0;

    attach(observer: Observer): void {
        this.observers.push(observer);
    }

    detach(observer: Observer): void {
        this.observers = this.observers.filter((obs) => obs !== observer);
    }

    notify(): void {
        this.observers.forEach((observer) => observer.update(this));
    }

    setInventory(inventory: number): void {
        this.inventory = inventory;
        this.notify();
    }

    getInventory(): number {
        return this.inventory;
    }
}

interface Observer {
    update(subject: Subject): void;
}

class ConcreteObserver implements Observer {
    private email: string;

    constructor(email: string) {
        this.email = email;
    }

    update(subject: Subject): void {
        console.log(
            `通知を受け取りました: ${
                this.email
            }, 在庫数は ${subject.getInventory()} です`
        );
    }
}

では、実際に使ってみましょう🖐️

const subject = new ConcreteSubject();

const observer1 = new ConcreteObserver('email1@example.com');
subject.attach(observer1);
subject.setInventory(10);

const observer2 = new ConcreteObserver('email2@example.com');
subject.attach(observer2);
subject.setInventory(20);