概要

Abstract Factory Patternは、関連するオブジェクトの集まりを作成するインターフェースを提供するデザインパターンです。

これにより、具体的なクラスを指定せずにオブジェクトを生成できるため、柔軟なコード設計が可能です。

「工場(Factory)が製品(Product)を作る」という概念をオブジェクト作成に落とし込んだものと言えます🏭

説明	役割
`AbstractProduct`	`AbstractFactory` によって作られる`抽象`的な部品や製品のインタフェースを定義する
`AbstractFactory`	`AbstractProduct` のインスタンスを作るためのインタフェースを定義する
`Client`	`AbstractFactory` と `AbstractProduct` のインタフェース`のみ`を使って仕事を行う
	具体的な部品や製品や工場については知らない
	--- 以降は具体 ↓↓↓ ---
`ConcreteProduct`	`AbstractProduct` のインタフェースを実する
`ConcreteFactory`	`AbstractFactory` のインタフェースを実装する

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

今回のシナリオでは、異なるデバイス（スマートフォン、タブレット）向けのUIコンポーネントを生成する例を見ていきます📱

AbstractFactory: UIコンポーネント生成用のインターフェース
SmartphoneFactory: スマートフォン向けUIコンポーネント生成用の具象ファクトリ
TabletFactory: タブレット向けUIコンポーネント生成用の具象ファクトリ
Button: ボタンコンポーネントの抽象クラス
SmartphoneButton: スマートフォン向けボタンコンポーネント
TabletButton: タブレット向けボタンコンポーネント
Slider: スライダーコンポーネントの抽象クラス
SmartphoneSlider: スマートフォン向けスライダーコンポーネント
TabletSlider: タブレット向けスライダーコンポーネント

サンプルコード

interface AbstractFactory {
  createButton(): Button;
  createSlider(): Slider;
}

class SmartphoneFactory implements AbstractFactory {
  createButton(): Button {
    return new SmartphoneButton();
  }
  createSlider(): Slider {
    return new SmartphoneSlider();
  }
}

class TabletFactory implements AbstractFactory {
  createButton(): Button {
    return new TabletButton();
  }
  createSlider(): Slider {
    return new TabletSlider();
  }
}

abstract class Button {}
class SmartphoneButton extends Button {}
class TabletButton extends Button {}

abstract class Slider {}
class SmartphoneSlider extends Slider {}
class TabletSlider extends Slider {}

実際にAbstract Factory Patternを使って端末を生成してみましょう🖐️

const createUIComponents(factory: AbstractFactory) => {
  const button = factory.createButton();
  const slider = factory.createSlider();

  // AbstractFactoryを通じて生成されたUIコンポーネントを利用できる
  // 例えば、イベントリスナーの追加や、DOMにコンポーネントを追加するなどの処理を行うことができる
}

// 具体的なファクトリを選択してUIコンポーネントを生成することができる
let factory: AbstractFactory = new SmartphoneFactory();
createUIComponents(factory);

// 別のファクトリを選択するのも容易
factory = new TabletFactory();
createUIComponents(factory);