［JavaScript］オブザーバパターン

この記事で書くこと

• オブザーバパータンを JavaScript で実装する

オブザーバパターン

• 状態変化に応じた処理を記述する際に使用
• 観察対象の状態が変化すると、観察者に対して通知する

コード

sample.js

class Observer {
    update = (generator) => { };
}

class NumberGenerator {
    #observers = [];
    addObserver = (observer) => {
        this.#observers.push(observer);
    }
    notifyObservers = () => {
        this.#observers.forEach((observer) => {
            observer.update(this);
        });
    }
    getNumber = () => { throw new Error("Line15 Error"); }
    execute = () => { throw new Error("Line16 Error"); }
}

class RandomNumberGenerator extends NumberGenerator {
    #number;
    getNumber = () => this.#number;
    execute = () => {
        let count = 0;
        let notifyFunction = setInterval(() => {
            count++;
            this.#number = Math.round(Math.random() * 20); // 0 から 20 までの乱数（整数）を生成
            this.notifyObservers();
            if (count === 20) { clearInterval(notifyFunction) };
        }, 1000);
    }
}

class DigitalObserver extends Observer {
    update = (generator) => {
        console.log(`DigitalObserver: ${generator.getNumber()}`);
    }
}

class GraphObserver extends Observer {
    update = (generator) => {
        console.log(`GraphObserver: ${"*".repeat(generator.getNumber())}`);
    }
}

const main = () => {
    const generator = new RandomNumberGenerator();
    const observer1 = new DigitalObserver();
    const observer2 = new GraphObserver();
    generator.addObserver(observer1);
    generator.addObserver(observer2);
    generator.execute();
}

main();

実行結果

• 1秒ごとに乱数（0から20の整数）を発生
• 1秒ごとにその乱数に応じた処理結果をコンソールに出力する

GraphObserver: **********
DigitalObserver: 12
GraphObserver: ************
DigitalObserver: 13
GraphObserver: *************
DigitalObserver: 19
GraphObserver: *******************
DigitalObserver: 8
GraphObserver: ********
DigitalObserver: 19
GraphObserver: *******************
DigitalObserver: 11
GraphObserver: ***********
DigitalObserver: 5
GraphObserver: *****
DigitalObserver: 1
GraphObserver: *
DigitalObserver: 18
GraphObserver: ******************
DigitalObserver: 10
GraphObserver: **********
DigitalObserver: 4
GraphObserver: ****
DigitalObserver: 1
GraphObserver: *
DigitalObserver: 4
GraphObserver: ****
DigitalObserver: 8
GraphObserver: ********
DigitalObserver: 20
GraphObserver: ********************
DigitalObserver: 17
GraphObserver: *****************
DigitalObserver: 19
GraphObserver: *******************
DigitalObserver: 12
GraphObserver: ************
DigitalObserver: 2
GraphObserver: **