ドキュメント価格ブログ
お問い合わせ
ログイン無料で新規登録
Back to Tech Articles

TypeScriptにおける一般的なデザインパターンの実装

Aug 15, 2025
# Misc

Grace Collins

Solutions Engineer · Leapcell

この記事はEnglish、한국어、Deutschでも利用できます
Cover of "TypeScriptにおける一般的なデザインパターンの実装"

TypeScriptにおけるデザインパターンの紹介

ソフトウェア開発の絶えず進化する状況において、堅牢でスケーラブルかつ保守性の高いアプリケーションを構築することは最優先事項です。デザインパターンは、一般的なソフトウェア設計問題に対する実証済みのソリューションを提供し、柔軟で理解しやすいコードを構造化するためのブループリントを提供します。JavaScriptは immense な柔軟性を提供しますが、TypeScriptの型安全な環境内でこれらのパターンを活用することで、コードの品質を大幅に向上させることができます。TypeScriptは、その強力な型付けとオブジェクト指向機能により、これらの古くからのパターンを実装するための優れた基盤を提供し、開発者が早期にエラーを検出し、コラボレーションを強化できるようにします。この記事では、3つの基本的なデザインパターン—シングルトン、ファクトリ、オブザーバー—に焦点を当て、TypeScriptでの実装とそれらの実用的な利点を強調して説明します。

主要概念の理解

パターンに飛び込む前に、それらのTypeScriptでの実装を理解するために不可欠ないくつかの主要概念を簡単に定義しましょう。

  • クラスとインターフェース: TypeScriptは、オブジェクトのブループリントを定義するための従来の手段を提供するクラスでJavaScriptを拡張します。一方、インターフェースは、実装の詳細を提供することなく、オブジェクトまたはクラスの形状の契約を定義し、疎結合と型安全性を促進します。
  • 静的メンバー: これらは、クラスのインスタンスではなく、クラス自体に属するクラスのメンバーです。これらは、ユーティリティ関数や、すべてのインスタンスにわたる共通の状態を維持するためによく使用されます。
  • カプセル化: データと、そのデータに対して操作を実行するメソッドを1つの単位（例：クラス）にバンドルし、コンポーネントの内部部分への直接アクセスを制限する原則です。TypeScriptの private および protected 修飾子はこの原則を促進します。
  • ポリモーフィズム: オブジェクトが多くの形態をとる能力です。オブジェクト指向プログラミングでは、異なるクラスが共通のインターフェースまたは基底クラスを通じて共通の型のインスタンスとして扱われる能力を指します。

TypeScriptにおけるシングルトンパターン

シングルトンパターンは、クラスが1つのインスタンスのみを持ち、それにグローバルなアクセスポイントを提供することを保証します。これは、データベース接続、構成マネージャー、ロガーなどのリソースを管理する場合に特に役立ちます。複数のインスタンスを持つことは、不整合や不要なリソース消費につながる可能性があります。

原理と実装

コアアイデアは、クラスのコンストラクタをプライベートにして直接インスタンス化を防ぎ、次に、クラスの単一インスタンスを返す静的メソッドを提供することです。インスタンスが存在しない場合にのみ作成します。

class ConfigurationManager {
    private static instance: ConfigurationManager;
    private settings: Map<string, string>;

    private constructor() {
        this.settings = new Map<string, string>();
        // ファイルまたは環境変数から構成をロードすることをシミュレート
        this.settings.set('API_KEY', 'some_secret_key');
        this.settings.set('LOG_LEVEL', 'info');
        console.log('ConfigurationManager instance created.');
    }

    public static getInstance(): ConfigurationManager {
        if (!ConfigurationManager.instance) {
            ConfigurationManager.instance = new ConfigurationManager();
        }
        return ConfigurationManager.instance;
    }

    public getSetting(key: string): string | undefined {
        return this.settings.get(key);
    }

    public setSetting(key: string, value: string): void {
        this.settings.set(key, value);
        console.log(`Setting '${key}' updated to '${value}'.`);
    }
}

// 使用例
const config1 = ConfigurationManager.getInstance();
const config2 = ConfigurationManager.getInstance();

console.log(config1 === config2); // true, 両方の参照が同じインスタンスを指しています

console.log('API Key:', config1.getSetting('API_KEY'));
config2.setSetting('LOG_LEVEL', 'debug');
console.log('Log Level (from config1):', config1.getSetting('LOG_LEVEL'));
// new ConfigurationManager(); // これを行うとTypeScriptのエラーが発生します:
                               // 'ConfigurationManager' クラスのコンストラクタはプライベートであり、クラス宣言内でのみアクセス可能です。

アプリケーションシナリオ

  • ロギング: ファイルまたはログサービスにログを書き込むための単一のロガーインスタンス。
  • 構成マネージャー: アプリケーション設定の一元管理。
  • データベース接続プール: データベース接続を管理する単一の接続プールを保証します。

TypeScriptにおけるファクトリパターン

ファクトリパターンは、スーパークラスでオブジェクトを作成するためのインターフェースを提供しますが、サブクラスが作成されるオブジェクトの型を変更できるようにします。オブジェクト作成プロセスを抽象化し、それらの正確なクラスを指定せずにオブジェクトを作成できるようにすることで、疎結合を促進し、システムをより拡張可能にします。

原理と実装

コアアイデアは、オブジェクトを作成して返す「ファクトリ」メソッドを中心に展開します。このメソッドは基底クラスに実装され、サブクラスでオーバーライドされるか、スタンドアロンのファクトリ関数/クラスとして存在できます。

さまざまな種類の車両を作成することを想像してみましょう。

// 製品インターフェース
interface Vehicle {
    drive(): void;
    getType(): string;
}

// 具体製品
class Car implements Vehicle {
    drive(): void {
        console.log('Driving a car.');
    }
    getType(): string {
        return 'Car';
    }
}

class Truck implements Vehicle {
    drive(): void {
        console.log('Driving a truck.');
    }
    getType(): string {
        return 'Truck';
    }
}

// ファクトリクラス
class VehicleFactory {
    public static createVehicle(type: string): Vehicle | null {
        switch (type.toLowerCase()) {
            case 'car':
                return new Car();
            case 'truck':
                return new Truck();
            default:
                console.warn(`Unknown vehicle type: ${type}`);
                return null;
        }
    }
}

// 使用例
const myCar = VehicleFactory.createVehicle('car');
if (myCar) {
    myCar.drive(); // Driving a car.
    console.log(myCar.getType()); // Car
}

const myTruck = VehicleFactory.createVehicle('truck');
if (myTruck) {
    myTruck.drive(); // Driving a truck.
    console.log(myTruck.getType()); // Truck
}

const unknownVehicle = VehicleFactory.createVehicle('bike'); // Unknown vehicle type: bike

アプリケーションシナリオ

  • UIコンポーネントライブラリ: 特定の構成に基づいて、さまざまなUI要素（ボタン、テキストフィールドなど）を作成します。
  • データパーサー: 入力データ形式に基づいて、さまざまなパーサー（JSON、XML、CSV）を作成します。
  • ゲーム開発: ゲームロジックに基づいて、さまざまな種類の敵またはゲームオブジェクトをスポーンさせます。

TypeScriptにおけるオブザーバーパターン

オブザーバーパターンは、オブジェクト間の1対多の依存関係を定義し、1つのオブジェクトの状態が変化したときに、そのすべての依存関係が自動的に通知および更新されます。このパターンは、イベント処理システムを実装するための基礎となります。

原理と実装

これには主に2種類のオブジェクトが含まれます。

  • サブジェクト（発行者）: 状態が監視されているオブジェクト。依存関係（オブザーバー）のリストを維持し、状態の変更をそれらに通知します。
  • オブザーバー（購読者）: サブジェクトの状態の変更を通知されたいオブジェクト。サブジェクトが呼び出す更新メソッドを提供します。
// オブザーバーインターフェース
interface Observer {
    update(data: any): void;
}

// サブジェクトクラス
class StockMarket implements Subject {
    private observers: Observer[] = [];
    private stockPrice: number;

    constructor(initialPrice: number) {
        this.stockPrice = initialPrice;
    }

    public attach(observer: Observer): void {
        const isExist = this.observers.includes(observer);
        if (isExist) {
            return console.log('Subject: Observer already attached.');
        }
        console.log('Subject: Attached an observer.');
        this.observers.push(observer);
    }

    public detach(observer: Observer): void {
        const observerIndex = this.observers.indexOf(observer);
        if (observerIndex === -1) {
            return console.log('Subject: Nonexistent observer.');
        }
        this.observers.splice(observerIndex, 1);
        console.log('Subject: Detached an observer.');
    }

    public notify(): void {
        console.log('Subject: Notifying observers...');
        for (const observer of this.observers) {
            observer.update(this.stockPrice);
        }
    }

    public setStockPrice(newPrice: number): void {
        this.stockPrice = newPrice;
        console.log(`Stock price changed to: $${this.stockPrice}`);
        this.notify();
    }
}

// 具体的なオブザーバー
class Investor implements Observer {
    private name: string;

    constructor(name: string) {
        this.name = name;
    }

    update(price: any): void {
        console.log(`${this.name}: Stock price updated to $${price}. Time to react!`);
    }
}

// 使用例
const market = new StockMarket(100);

const investor1 = new Investor('Alice');
const investor2 = new Investor('Bob');

market.attach(investor1);
market.attach(investor2);

market.setStockPrice(105);
// Subject: Notifying observers...
// Alice: Stock price updated to $105. Time to react!
// Bob: Stock price updated to $105. Time to react!

market.detach(investor1);

market.setStockPrice(98);
// Subject: Notifying observers...
// Bob: Stock price updated to $98. Time to react!

アプリケーションシナリオ

  • イベント処理: UIフレームワーク（React、Angularなど）では、イベント（クリック、入力変更）はオブザーバーライクなメカニズムを使用して処理されることがよくあります。
  • MVC/MVVMアーキテクチャ: モデルは、ビュー/ビューモデルにデータ変更を通知します。
  • リアルタイムアプリケーション: 接続されているクライアントに更新を通知します。例：チャットアプリケーションまたは株価ティッカー。

結論

TypeScriptでデザインパターンを実装することは、構造化された問題解決と型安全性の強力な組み合わせを提供します。実証されたシングルトン、ファクトリ、オブザーバーパターンは、一般的なアーキテクチャ上の課題に対する堅牢なソリューションを提供し、コードのモジュール性、テスト容易性、保守性を向上させます。これらのパターンを採用することにより、開発者は、理解と進化が容易な、より回復力がありスケーラブルなアプリケーションを構築できます。TypeScriptの機能を真に活用して、プロフェッショナルで将来性のあるコードを作成できます。

Share this article

HackerNews

More Posts from Leapcell

cover

JavaScriptランタイムトライアスロン - Deno、Bun、Node.jsがアリーナで激突

cover

tRPCによるフルスタックTypeScriptでのエンドツーエンドの型安全性の実現

Popular Posts