パブリッシュ/サブスクライブ (PubSub) パターンは、アプリケーションのさまざまな部分の間で、相互に直接知る必要がなく通信を容易にするために使用される一般的な設計パターンです。このパターンは、イベントが公開され、サブスクライバーがこれらのイベントに反応できる大規模アプリケーションでコンポーネントを分離する場合に特に役立ちます。

この記事では、オブジェクトベースのアプローチとクラスベースのアプローチの両方を使用して、JavaScript で PubSub パターンを実装する方法を検討します。最後には、このパターンを自分のプロジェクトで使用する方法をしっかりと理解できるようになります。

オブジェクトベースの実装
オブジェクトベースのアプローチは、単一のグローバル イベント マネージャーで十分なシナリオではシンプルで効果的です。実装方法は次のとおりです:

pubsub.js
const PubSub = {
    subscribers: [],

    subscribe: function(subscriber) {
        this.subscribers.push(subscriber);
    },

    publish: function(payload) {
        this.subscribers.forEach(subscriber => {
            subscriber(payload);
        });
    }
};

export default PubSub;

オブジェクトベースのPubSubの使用方法
アプリケーションでは、必要な場所に PubSub オブジェクトをインポートできます。以下に例を示します:

// file1.js
import PubSub from './pubsub';

PubSub.subscribe((payload) => {
    console.log('File 1 received:', payload);
});

// file2.js
import PubSub from './pubsub';

PubSub.subscribe((payload) => {
    console.log('File 2 received:', payload);
});

// main.js
import PubSub from './pubsub';

PubSub.publish('Hello from main!');

クラスベースの実装
柔軟性を高めるため、または PubSub システムの複数のインスタンスが必要な場合は、クラスベースのアプローチを使用できます。これにより、独自の購読者のリストを持つ独立した PubSub インスタンスを作成できます。

class PubSub {
    constructor() {
        this.subscribers = [];
    }

    subscribe(subscriber) {
        this.subscribers.push(subscriber);
    }

    unsubscribe(subscriber) {
        this.subscribers = this.subscribers.filter(sub => sub !== subscriber);
    }

    publish(payload) {
        this.subscribers.forEach(subscriber => {
            try {
                subscriber(payload);
            } catch (error) {
                console.error('Error in subscriber:', error);
            }
        });
    }
}

export default PubSub;

クラスベースのPubSubの使用方法
以下は、アプリケーションでクラスベースの PubSub パターンを使用する方法の例です:

import PubSub from './pubsub';

// Create an instance of PubSub
const pubSubInstance = new PubSub();

// Subscribe to events
pubSubInstance.subscribe((payload) => {
    console.log('Instance 1 received:', payload);
});

pubSubInstance.subscribe((payload) => {
    console.log('Instance 2 received:', payload);
});

// Publish an event
pubSubInstance.publish('Hello from instance!');

結論
PubSub パターンは、アプリケーションのさまざまな部分間の通信を管理するための強力なツールです。オブジェクトベースの実装を使用するかクラスベースの実装を使用するかは、特定のニーズによって異なります。オブジェクトベースのアプローチはシンプルで簡単で、小規模なプロジェクトや単一のグローバル イベント マネージャーで十分な場合に最適です。一方、クラスベースのアプローチは柔軟性が高く、PubSub システムの複数のインスタンスが必要になる可能性がある大規模なアプリケーションに適しています。

これらの例をご自身のプロジェクトで自由に使用し、ニーズに合わせて変更してください。コーディングを楽しんでください!