ちゃんなるぶろぐ

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

【5分でわかる💪】TypeScriptでDesign Pattern〜Builder Pattern〜

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

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

概要

Builder Patternは、オブジェクトの生成をステップバイステップで行い、複雑なオブジェクトを柔軟に構築するためのデザインパターンです。

Builder, ConcreteBuilder, Directorという3つの役割が必要ですになります🖐️

Role Description
Builder インスタンス組み立てに必要な要素のインタフェースを定義する抽象クラス
ConcreteBuilder Builder を実装する具体クラス
Director Builder のインタフェースを使ってインスタンスを組み立てる、その手順を実装する具体クラス
ConcreteBuilder に依存したプログラミングをしない
Client Builder を利用する側
DirectorConcreteBuilderを組み合わせてオブジェクトを生成する

それでは、サンドイッチを作る例を使ってBuilderパターンを見てみましょう🥪

サンプルコード

Builderインターフェースを定義します。

// Builder
interface SandwichBuilder {
  setBread(bread: string): void;
  setSauce(sauce: string): void;
  setFilling(filling: string[]): void;
  build(): Sandwich;
}

具体的なBuilderとしてインタフェースを実装します。

// ConcreteBuilder
class ConcreteSandwichBuilder implements SandwichBuilder {
  private sandwich: Sandwich = new Sandwich();

  setBread(bread: string): void {
    this.sandwich.bread = bread;
  }

  setSauce(sauce: string): void {
    this.sandwich.sauce = sauce;
  }

  setFilling(filling: string[]): void {
    this.sandwich.filling = filling;
  }

  build(): Sandwich {
    return this.sandwich;
  }
}

Builder Patternによって最終的に生成したいクラスを定義します。

class Sandwich {
  bread: string;
  sauce: string;
  filling: string[];
}

Builder のインタフェースを使ってインスタンスを組み立てる、その手順を実装する具体クラス

// Director
class SandwichMaker {
  constructor(private builder: SandwichBuilder) {}

  // ステップバイステップでの生成プロセスを一括定義(このconstruct関数内に隠蔽)
  construct(): Sandwich {
    this.builder.setBread("ホワイトブレッド");
    this.builder.setSauce("マヨネーズ");
    this.builder.setFilling(["ハム", "チーズ", "レタス"]);
    return this.builder.build();
  }
}

次のように呼び出し、サンドイッチを生成します🥪

// Client
const builder = new ConcreteSandwichBuilder();
const maker = new SandwichMaker(builder);
const mySandwich = maker.construct();
console.log(mySandwich);

この例では、SandwichBuilderインターフェースを定義し、具体的なBuilder(ConcreteSandwichBuilder)で実装しています。SandwichMakerクラス(Director)を使ってサンドイッチを作成し、必要に応じてカスタマイズできます。

Builder Patternを使うことで、オブジェクトの生成プロセスをカプセル化し、柔軟性と再利用性を向上させることができます。ぜひ、自分のプロジェクトでBuilderパターンを試してみてください!🥪✨

Builder Patternの使い道

Builderパターンは以下のようなシナリオで役立ちます🥪

  • オブジェクトが複数の部品から構成されている
  • 部品の組み合わせが異なる場合でも、同じプロセスでオブジェクトを生成したい
  • オブジェクトの生成プロセスを柔軟に変更できるようにしたい

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

Builder Patternは他のデザインパターンと組み合わせることで、さらに強力な設計になります。

例えば、

  • Factory Method Pattern:オブジェクト生成プロセスが複雑な場合、ConcreteBuilderのインスタンスを生成するためにFactory Method Patternを使用できる。これにより、クライアントはConcreteBuilderの実装に依存せず、さらに柔軟な生成プロセスを実現できる。

chan-naru.hatenablog.com

  • Singleton Pattern:Builder Patternを使用する際、DirectorやConcreteBuilderをSingletonとして実装することができる。これにより、アプリケーション全体で一貫性のあるオブジェクト生成が可能になる。

chan-naru.hatenablog.com

まとめ

Builder Patternは、複雑なオブジェクトの生成プロセスをステップバイステップで行い、柔軟で再利用可能な設計を実現するデザインパターンです。

Builder, ConcreteBuilder, Directorの役割を持つことで、オブジェクトの構築が簡単になります。また、他のデザインパターンと組み合わせることで、さらに強力な設計が可能となります。

ぜひ、自分のプロジェクトでBuilderパターンを試してみてください!

参考文献

www.oreilly.com

en.wikipedia.org