TypeScript上級

上級 TypeScriptで学ぶイベント駆動設計｜アンチパターン編

 

導入

イベント駆動設計は、アプリケーションの反応性を高め、ユーザー体験を向上させるための強力な手法です。しかし、実際の開発現場では、意図しない使い方や設計ミスが多く見受けられます。本記事では、TypeScriptを用いたイベント駆動設計における典型的なアンチパターンを取り上げ、それらがどのように問題を引き起こすのか、またその解決策について具体的に探ります。

教科書レベルの解説（イベント駆動設計）

重要な概念の整理

イベント駆動設計は、アプリケーションの各部分が独立して動作し、イベントを介して相互作用することを基本としています。このアプローチにより、機能の追加や変更が容易になり、テストやデバッグがしやすくなります。イベントは、ユーザーのアクションやシステムの状態変化を表現するもので、これをリスナーが監視し、適切に処理します。

コード例（TypeScript）


class EventEmitter {
    private listeners: { [event: string]: Function[] } = {};

    on(event: string, listener: Function) {
        if (!this.listeners[event]) {
            this.listeners[event] = [];
        }
        this.listeners[event].push(listener);
    }

    emit(event: string, ...args: any[]) {
        const eventListeners = this.listeners[event];
        if (eventListeners) {
            eventListeners.forEach(listener => listener(...args));
        }
    }
}

const emitter = new EventEmitter();
emitter.on('dataReceived', (data: string) => {
    console.log(`Data received: ${data}`);
});
emitter.emit('dataReceived', 'Hello, World!');

コードの行ごとの解説

  1. クラスEventEmitterを定義し、リスナーを格納するためのオブジェクトlistenersを初期化します。
  2. onメソッドは、特定のイベントにリスナーを登録します。リスナーが存在しない場合は、新たに配列を作成します。
  3. emitメソッドは、指定されたイベントに関連するリスナーを呼び出します。リスナーが存在する場合、引数を渡して実行します。
  4. EventEmitterのインスタンスを作成し、’dataReceived’イベントにリスナーを追加します。
  5. emitメソッドを使用して、’dataReceived’イベントを発生させます。

アンチパターン編

イベント駆動設計における一般的なアンチパターンの一つは、リスナーの管理が不十分なことです。例えば、リスナーが適切に解除されない場合、メモリリークや予期しない動作が発生します。以下に、リスナー解除の欠如がもたらす問題とその改善方法を示します。


// アンチパターン: リスナー解除を行わない
class User {
    private emitter: EventEmitter;

    constructor(emitter: EventEmitter) {
        this.emitter = emitter;
        this.emitter.on('userLoggedIn', this.onUserLoggedIn);
    }

    private onUserLoggedIn = (userId: string) => {
        console.log(`User logged in: ${userId}`);
    };
}

// 使用例
const emitter = new EventEmitter();
const user = new User(emitter);
emitter.emit('userLoggedIn', '12345');
// リスナーが解除されないため、Userインスタンスがメモリに残り続ける

このコードでは、Userクラスがイベントにリスナーを登録していますが、リスナーの解除が行われていないため、Userインスタンスがメモリに残り続けます。解決策として、リスナーを解除するメソッドを追加し、必要なタイミングで呼び出すことが重要です。


// 改善策: リスナー解除を行う
class User {
    private emitter: EventEmitter;

    constructor(emitter: EventEmitter) {
        this.emitter = emitter;
        this.emitter.on('userLoggedIn', this.onUserLoggedIn);
    }

    private onUserLoggedIn = (userId: string) => {
        console.log(`User logged in: ${userId}`);
    };

    public dispose() {
        // リスナー解除
        this.emitter.off('userLoggedIn', this.onUserLoggedIn);
    }
}

// 使用例
const emitter = new EventEmitter();
const user = new User(emitter);
emitter.emit('userLoggedIn', '12345');
user.dispose(); // ここでリスナーを解除

まとめ

  • イベント駆動設計では、リスナーの管理が重要であり、適切に解除しないとメモリリークの原因となる。
  • TypeScriptを使用することで、型安全性を保ちながらイベント処理を行うことができる。
  • アンチパターンを理解し、適切な設計を行うことで、より健全なアプリケーションを構築できる。
RELATED POST