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[]) {
        if (this.listeners[event]) {
            this.listeners[event].forEach(listener => listener(...args));
        }
    }
}

// 使用例
const emitter = new EventEmitter();

emitter.on('dataReceived', (data: string) => {
    console.log(`Data received: ${data}`);
});

emitter.emit('dataReceived', 'Hello, World!');

コードの行ごとの解説

  1. class EventEmitter: イベントを管理するクラスを定義します。
  2. private listeners: 各イベントに対するリスナーを格納するオブジェクトです。
  3. on: 指定したイベントにリスナーを追加するメソッドです。
  4. emit: 特定のイベントを発火させ、関連するリスナーを呼び出すメソッドです。
  5. 使用例: イベントエミッターをインスタンス化し、イベントをリッスンし、発火させる例です。

練習問題編

以下の練習問題を解いて、イベント駆動設計の理解を深めてください。

  1. 問題1: イベントエミッターに複数のリスナーを追加し、同じイベントを発火させたときに全てのリスナーが呼び出されることを確認するコードを書いてください。
  2. 問題2: イベントが発火するたびにリスナーを削除する機能を追加してください。リスナーが一度だけ呼び出されるようにします。
  3. 問題3: イベントエミッターにエラーハンドリング機能を追加し、リスナー内でエラーが発生した場合にログを出力するようにしてください。

まとめ

  • イベント駆動設計は、システムの拡張性とメンテナンス性を向上させる有効な手法です。
  • TypeScriptを用いることで、型安全性を保ちながらイベント駆動の実装が可能です。
  • 具体的なシナリオを通じて、実務に役立つスキルを磨くことが重要です。
RELATED POST