JavaScript | classの継承（extends）

では「Mixinパターン」について紹介します。これは コンポジションをもっと便利に使うためのテクニック で、JavaScriptでもよく使われます。

Mixinとは？

• Mixin（ミックスイン）は「ある機能を持ったオブジェクトや関数を、別のクラスに混ぜ込む」仕組み
• 継承のように「親子関係」を作らずに、必要な機能だけを追加できる
• 「このクラスにも飛ぶ機能を」「このクラスにも攻撃機能を」といったときに便利

例題：Mixinで機能を追加する

1. Mixinを定義

// 飛ぶ機能を持つMixin
let FlyMixin = {
  fly(){
    console.log(`${this.name} が空を飛んだ！`);
  }
};

// 攻撃する機能を持つMixin
let AttackMixin = {
  attack(){
    console.log(`${this.name} が攻撃した！`);
  }
};

// 飛ぶ機能を持つMixin
let FlyMixin = {
  fly(){
    console.log(`${this.name} が空を飛んだ！`);
  }
};

// 攻撃する機能を持つMixin
let AttackMixin = {
  attack(){
    console.log(`${this.name} が攻撃した！`);
  }
};

2. クラスに混ぜ込む

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

// Object.assignで機能を追加
Object.assign(Character.prototype, FlyMixin, AttackMixin);

let hero = new Character("勇者");
hero.fly();    // → 勇者 が空を飛んだ！
hero.attack(); // → 勇者 が攻撃した！

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

// Object.assignで機能を追加
Object.assign(Character.prototype, FlyMixin, AttackMixin);

let hero = new Character("勇者");
hero.fly();    // → 勇者 が空を飛んだ！
hero.attack(); // → 勇者 が攻撃した！

🔑 ポイント

• Object.assign を使って 複数の機能をまとめて追加できる
• 継承を使わずに「飛ぶ」「攻撃する」などの能力を後付けできる
• 1つのクラスに複数のMixinを組み合わせられる

✅ まとめ

• 継承：親子関係を作って共通部分をまとめる
• コンポジション：部品を持たせて組み合わせる
• Mixin：既存のクラスに「能力」を後付けする便利な方法

💡 初心者へのおすすめ理解法：

• 「Mixin = 機能のパーツ」
• 「必要なときにクラスに貼り付ける」イメージで覚えるとわかりやすいです。