Mixin パターン

mixin は、継承を使用せずに別のオブジェクトまたはクラスに再利用可能な機能を追加するために使用できるオブジェクトです。mixin は単独では使用できません。その唯一の目的は、継承を使わずにオブジェクトまたはクラスに 機能を追加 することです。

アプリケーションで複数の犬を作成する必要があるとしましょう。ただし、作成する基本的な犬には name プロパティしかありません。

使用する場面

• 継承チェーンを作成せずに、複数のクラスに再利用可能な機能を追加する必要があるとき
• 複数のソースから動作を合成したいとき

使用しない方が良い場面

• React の Hooks または Vue の composables などの合成で同じ結果がより良い追跡可能性で実現できる場合
• プロトタイプ汚染のリスクがある場合 — mixin は共有プロトタイプを変更し、命名の衝突を引き起こす可能性があります
• 追加される機能がシンプルで、ユーティリティ関数またはモジュール インポートで十分な場合

手順

• Object.assign() を使用して mixin プロパティをクラス プロトタイプに追加する
• プロトタイプ汚染に注意してください — プロトタイプの変更により予期しない動作が発生する可能性があります
• React では、mixin より Hooks を優先します（mixin は React チームによって非推奨です）
• 再利用可能な動作を設計する場合は、継承より合成を検討してください

詳細

class Dog {
  constructor(name) {
    this.name = name;
  }
}

犬は単に名前を持つだけ以上のことができるべきです。吠えたり、尻尾を振ったり、遊んだりできるべきです！機能を Dog に直接追加する代わりに、bark、wagTail、play プロパティを提供する mixin を作成できます。

const dogFunctionality = {
  bark: () => console.log("Woof!"),
  wagTail: () => console.log("Wagging my tail!"),
  play: () => console.log("Playing!"),
};

Object.assign メソッドを使用して、dogFunctionality mixin を Dog プロトタイプに追加できます。このメソッドを使うと、ターゲット オブジェクト （この場合は Dog.prototype）にプロパティを追加できます。Dog の新しいインスタンスはそれぞれ、dogFunctionality のプロパティにアクセスできます。これらは Dog のプロトタイプに追加されているからです！

class Dog {
  constructor(name) {
    this.name = name;
  }
}

const dogFunctionality = {
  bark: () => console.log("Woof!"),
  wagTail: () => console.log("Wagging my tail!"),
  play: () => console.log("Playing!"),
};

Object.assign(Dog.prototype, dogFunctionality);

最初のペット pet1 を Daisy という名前で作成しましょう。dogFunctionality mixin を Dog のプロトタイプに追加したので、Daisy は歩いたり、尻尾を振ったり、遊んだりできるはずです！

const pet1 = new Dog("Daisy");

pet1.name; // Daisy
pet1.bark(); // Woof!
pet1.play(); // Playing!

完璧です！Mixin を使用すると、継承を使わずにクラスまたはオブジェクトにカスタム機能を簡単に追加できます。

mixin で継承なしに機能を追加できますが、mixin 自体が継承を使用することもできます！

ほとんどの哺乳動物は歩いたり、眠ったりすることもできます。犬は哺乳動物であり、歩いたり眠ったりできるはずです！

walk および sleep プロパティを追加する animalFunctionality mixin を作成しましょう。

const animalFunctionality = {
  walk: () => console.log("Walking!"),
  sleep: () => console.log("Sleeping!"),
};

Object.assign を使用して、これらのプロパティを dogFunctionality プロトタイプに追加できます。この場合、ターゲット オブジェクトは dogFunctionality です。

const animalFunctionality = {
  walk: () => console.log("Walking!"),
  sleep: () => console.log("Sleeping!"),
};

const dogFunctionality = {
  bark: () => console.log("Woof!"),
  wagTail: () => console.log("Wagging my tail!"),
  play: () => console.log("Playing!"),
  walk() {
    super.walk();
  },
  sleep() {
    super.sleep();
  },
};

Object.assign(dogFunctionality, animalFunctionality);
Object.assign(Dog.prototype, dogFunctionality);

完璧です！Dog の新しいインスタンスはすべて、walk および sleep メソッドにもアクセスできるようになりました。

実際の mixin の例は、ブラウザ環境の Window インターフェイスで見られます。Window オブジェクトは、WindowOrWorkerGlobalScope および WindowEventHandlers mixin からプロパティの多くを実装しており、これにより setTimeout および setInterval、indexedDB、isSecureContext などのプロパティにアクセスできるようになっています。

mixin はオブジェクトに 機能を追加 するだけに使用されるため、WindowOrWorkerGlobalScope 型のオブジェクトを作成することはできません。

React (ES6 以前)

mixin は、ES6 クラスが導入される前に React コンポーネントに機能を追加するために頻繁に使用されていました。React チームは mixin の使用を非推奨としています。これは容易にコンポーネントに不要な複雑さを追加し、保守と再利用を困難にするためです。React チームは、代わりに高階コンポーネントの使用を推奨しており、現在はしばしば Hooks で置き換えられるようになっています。

Mixin を使用すると、オブジェクトのプロトタイプに機能を注入することで、継承なしにオブジェクトに機能を簡単に追加できます。オブジェクトのプロトタイプの変更はベスト プラクティスではないと見なされています。これはプロトタイプ汚染につながり、関数の出所に関する不確実性が生じる可能性があるためです。

ソース

• patterns.dev/vanilla/mixin-pattern

参考資料

• Functional Mixins - Eric Elliott
• Mixins - JavaScript Info