JavaScript | クラス継承でアロー関数を使うときの実務的な注意点

では「継承と super」について、アロー関数と通常メソッドの違いを交えながら整理してみましょう。

基本：クラス継承と super

• extends を使うと、あるクラスを親クラスとして継承できる
• 子クラスのコンストラクタでは 必ず super() を呼んで親クラスを初期化する必要がある
• 子クラスのメソッド内では super.メソッド名() で親クラスのメソッドを呼び出せる

例1：通常メソッドでの super

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

  speak() {
    console.log(`${this.name} が鳴いた`);
  }
}

class Dog extends Animal {
  // 通常メソッドなら super が使える
  speak() {
    super.speak(); // 親クラスの speak を呼ぶ
    console.log("ワン！");
  }
}

const d = new Dog("ポチ");
d.speak();
// 出力:
// ポチ が鳴いた
// ワン！

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

  speak() {
    console.log(`${this.name} が鳴いた`);
  }
}

class Dog extends Animal {
  // 通常メソッドなら super が使える
  speak() {
    super.speak(); // 親クラスの speak を呼ぶ
    console.log("ワン！");
  }
}

const d = new Dog("ポチ");
d.speak();
// 出力:
// ポチ が鳴いた
// ワン！

✅ 通常メソッドでは super が有効。親クラスの処理を拡張できる。

例2：アロー関数でのメソッド定義

class Dog extends Animal {
  // アロー関数で定義すると…
  speak = () => {
    // super.speak(); ❌ エラーになる
    console.log("ワン！");
  };
}

const d = new Dog("ポチ");
d.speak();
// 出力:
// ワン！

class Dog extends Animal {
  // アロー関数で定義すると…
  speak = () => {
    // super.speak(); ❌ エラーになる
    console.log("ワン！");
  };
}

const d = new Dog("ポチ");
d.speak();
// 出力:
// ワン！

❌ アロー関数では super が使えない。
理由は、アロー関数は「インスタンスのプロパティに関数を代入しているだけ」なので、super の解決スコープを持たないから。

実務的な使い分け

• 通常メソッド
  • 親クラスのメソッドをオーバーライドして拡張したいとき（super が必要）
  • 共通処理をインスタンス間で共有したいとき
• アロー関数
  • イベントハンドラやコールバックで this を固定したいとき
  • ただし super は使えないので、オーバーライドには不向き

✅ まとめ

• super を使いたいなら 通常メソッド
• this を固定したいなら アロー関数
• クラス設計では「共通処理やオーバーライドは通常メソッド」「イベントハンドラやコールバックはアロー関数」と役割分担するのがベスト