Compositeパターンの解説

Compositeパターンとは、オブジェクトをツリー構造で表現し、個々のオブジェクトとそのグループを同じように扱えるようにするデザインパターンだ。これにより、個々の要素と要素の集まりを同じ操作で扱える。

たとえば、フォルダの中にファイルがあり、さらにそのフォルダの中に別のフォルダがあるような構造を考えよう。フォルダ全体と、単一のファイルに同じ操作を適用できる。

では、サンプルコードを一緒に見ていこう。

解説

Step 1: 基本的なアイテムクラスを作る

Compositeパターンの目的は、個々のアイテムと、それらのグループを同じように扱うことだ。まずは、アイテムそのものを表す基本クラスを作ろう。このアイテムには、名前と価格を設定して、それを表示するためのメソッドを持たせる。

// 単一のアイテムクラス
class Item {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }

  display() {
    console.log(`${this.name}: ¥${this.price}`);
  }
}
      

Step 2: アイテムのグループを作る

次に、アイテムをグループ化するクラスを作成しよう。このグループは、複数のアイテムを持ち、それぞれのアイテムを追加したり、全てのアイテムを表示する機能を持つ。

// 複数アイテムをグループ化するクラス
class ItemGroup {
  constructor(name) {
    this.name = name;
    this.items = [];
  }

  add(item) {
    this.items.push(item);
  }

  display() {
    console.log(`${this.name}の内容:`);
    this.items.forEach(item => item.display());
  }
}
      

Step 3: Compositeパターンを使って表示する

これで、個々のアイテムだけでなく、複数のアイテムをグループ化して、まとめて操作できるようになった。では、具体的にアイテムとアイテムグループを作って、それぞれの内容を表示してみよう。

// 単一のアイテムを作る
const apple = new Item("リンゴ", 150);
const banana = new Item("バナナ", 100);

// 複数アイテムをグループ化する
const fruitBasket = new ItemGroup("フルーツバスケット");
fruitBasket.add(apple);
fruitBasket.add(banana);

// グループ内のアイテムを表示
fruitBasket.display();
// 結果:
// フルーツバスケットの内容:
// リンゴ: ¥150
// バナナ: ¥100
      

Compositeパターンの重要なポイント

• Compositeパターンは、個々のオブジェクト（アイテム）と、グループ化されたオブジェクト（アイテムグループ）を同じ操作で扱えるようにする。
• ツリー構造を作るのに適していて、再帰的な構造を持つオブジェクトを簡単に管理できる。
• 例えば、フォルダとファイルの関係や、メニューとメニュー項目の関係を構築する際に役立つ。

これでCompositeパターンの解説は終わりだ。
このパターンを使うと、個々の要素とグループを同じように扱えるため、再帰的なデータ構造（たとえば、フォルダとファイルの関係）をシンプルに処理できる。