【5分でわかる⚙️】TypeScriptでDesign Pattern〜Prototype Pattern〜

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

今回は、Prototype PatternをTypeScriptのサンプルコードを用いて紹介します🖐️

概要

既存のオブジェクトをコピーして新しいオブジェクトを生成するパターンです。

オブジェクト生成のコストを抑えることができます👍

今回示すプログラムの設計について

この記事では、簡単なCarクラスの例を用いてPrototype Patternを実装します。Carクラスはmakeとmodelプロパティを持ち、clone()メソッドを使って新しいインスタンスを生成できるようになっています。

サンプルコード

Prototypeクラスの作成

まず、PrototypeとなるシンプルなCarクラスを作成します🚗

class Car {
  constructor(public make: string, public model: string) {}

  clone(): Car {
    return new Car(this.make, this.model);
  }
}

Carクラスに自身を複製するclone()メソッドを追加します。

実際に使ってみる

それでは、CarクラスのPrototypeを使ってオブジェクトを生成してみましょう。

const car1 = new Car("Toyota", "Corolla");
const car2 = car1.clone();

console.log(car1); // Output: Car { make: 'Toyota', model: 'Corolla' }
console.log(car2); // Output: Car { make: 'Toyota', model: 'Corolla' }

car1からclone()メソッドを使って、新しいオブジェクトcar2を生成できました！car1とcar2は別のオブジェクトですが、プロパティは同じです。

Prototype Patternの使い道

Prototype Patternは、オブジェクトの生成に高いコストがかかる場合や、生成されるオブジェクトがある程度似通っている場合に特に役立ちます。

また、Singleton PatternやFactory Patternと組み合わせて使われることが多く、柔軟で再利用性の高いコード設計を実現できます。

chan-naru.hatenablog.com

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

Prototype Patternは、次のようなデザインパターンと組み合わせて使用できます。

• Factory Method Pattern: オブジェクト生成をサブクラスに委譲し、Prototype Patternを使って新しいオブジェクトを生成することができる

chan-naru.hatenablog.com

• Abstract Factory Pattern: 一連の関連オブジェクトを生成するために、それぞれのオブジェクトのPrototypeを使用することができる

chan-naru.hatenablog.com

まとめ

今回の記事では、TypeScriptでのPrototype Patternの実装方法とその使い道を紹介しました。

オブジェクト生成のコストを抑えることができるだけでなく、他のデザインパターンと組み合わせることでさらに柔軟で再利用性の高いコード設計を実現できます。

ぜひ試してみてください！

参考文献

www.oreilly.com

en.wikipedia.org