ちゃんなるぶろぐ

エンジニア5年生🧑‍💻 オライリーとにらめっこする毎日。

【5分でわかる🤝】TypeScriptでDesign Pattern〜Mediator Pattern〜

どうも、ちゃんなるです!

今回は、Mediator Patternを紹介します🖐️

概要

Mediator Patternは、オブジェクト間の相互作用をカプセル化し、複数のオブジェクトが直接相互作用する代わりに、Mediatorオブジェクトを介して行わせるデザインパターンです。

これにより、オブジェクト間の依存関係を低減し、コードの再利用性と拡張性を向上させることができます。

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

チャットルームアプリケーションを例にして、Mediator Patternを実装してみましょう。ユーザーはチャットルームに参加し、メッセージを送信できます。

チャットルームは、メッセージを受信し、すべての参加者にそれを配信します。

クラス図

サンプルコードのクラス図:Mermaid Live Editorで作成

クラス名 役割
Mediator コンポーネント間のメッセージ送信を処理するインターフェイス
ChatRoom Mediatorインターフェイスを実装し、ユーザー間のメッセージ送信を管理するクラス
Colleague Mediatorを介して通信するコンポーネントの抽象クラス
User Colleagueクラスを継承し、個々のユーザーを表すクラス

サンプルコード

interface Mediator {
    sendMessage(message: string, sender: Colleague): void;
}
class ChatRoom implements Mediator {
    private users: Colleague[] = [];

    addUser(user: Colleague): void {
        this.users.push(user);
    }

    sendMessage(message: string, sender: Colleague): void {
        for (let user of this.users) {
            if (user !== sender) {
                user.receive(message, sender);
            }
        }
    }
}
abstract class Colleague {
    protected mediator: Mediator;

    constructor(mediator: Mediator) {
        this.mediator = mediator;
    }

    abstract send(message: string): void;
    abstract receive(message: string, sender: Colleague): void;
}
class User extends Colleague {
    public name: string;

    constructor(name: string, mediator: Mediator) {
        super(mediator);
        this.name = name;
    }

    send(message: string): void {
        console.log(`${this.name}がメッセージを送信: ${message}`);
        this.mediator.sendMessage(message, this);
    }

    receive(message: string, sender: Colleague): void {
        console.log(`${this.name}${sender.name}からメッセージを受信: ${message}`);
    }
}

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

// チャットルームインスタンスを作成
const chatRoom = new ChatRoom();

// ユーザーインスタンスを作成し、チャットルームに追加
const user1 = new User("Alice", chatRoom);
const user2 = new User("Bob", chatRoom);
const user3 = new User("Charlie", chatRoom);
chatRoom.addUser(user1);
chatRoom.addUser(user2);
chatRoom.addUser(user3);

// メッセージの送信と受信をテスト
user1.send("こんにちは、みんな!");
user2.send("やあ、Alice!");
user3.send("元気ですか?");

まずChatRoomインスタンスを作成し、3人のユーザー(Alice、Bob、Charlie)を追加します。

その後、各ユーザーがメッセージを送信することで、チャットルームを介したコミュニケーションを表現してます。

設計とそれを使うイメージが湧いたでしょうか?👀

Mediator Patternの使い道

  1. システム内のオブジェクトが密結合されていて、再利用や拡張が難しい場合
  2. オブジェクト間のコミュニケーションが複雑で、可読性や保守性が低い場合

組み合わせられるデザインパターン

  1. Observer Pattern: Mediatorが各コンポーネントの状態変更を監視し、適切な通知を行うことができます。

chan-naru.hatenablog.com

  1. Factory Method Pattern: Mediatorが特定のインターフェイスに従ってオブジェクトを生成することで、コンポーネント間の依存関係をさらに低減できます。

chan-naru.hatenablog.com

まとめ

今回は、Mediator Patternについて解説しました。

このパターンは、システム内のオブジェクト間のコミュニケーションをシンプルにし、依存関係を低減することで、コードの再利用性や拡張性を向上させることができます。

ぜひ、自分のプロジェクトでMediator Patternを活用して、より効率的なシステム設計を実現してください!

参考文献

www.oreilly.com

en.wikipedia.org