継承とsuper
このレッスンで分かること
class Child extends Parentで継承、親のプロパティ / メソッドを引き継ぐ- 子の
constructorではsuper(...)を 必ず最初に呼ぶsuper.method()で親メソッドの実装を呼べる- JavaScript はプロトタイプベース、
classは糖衣だが多重継承は不可
継承とsuper とは
extendsで親クラスを継承し、superで親のメソッドを呼び出す方法を学ぼう。本レッスンでは、継承とsuper の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。
継承とsuper
既存のクラスを拡張して新しいクラスを作る方法を学びましょう。
extendsで継承
JavaScript
class Animal {
constructor(name) { this.name = name; }
speak() { return `${this.name}は音を出します`; }
}
class Dog extends Animal {
speak() { return `${this.name}はワンワンと鳴きます`; }
}super()で親を呼ぶ
子クラスのconstructorでは必ずsuper()を呼んで親の初期化を行います。
JavaScript
class Cat extends Animal {
constructor(name, color) {
super(name); // 親のconstructor
this.color = color; // 子独自のプロパティ
}
}この問題では、Animalを継承したDog/Cat/CustomAnimalクラスの階層を作成しましょう。
実務で遭遇するパターン
中級レッスンで学んだことが、実際の業務コードでどう登場するかを整理します。
- UI コンポーネント階層 ─
Button extends BaseControl - Error クラス ─
class ValidationError extends Error - Game オブジェクト ─
Player extends Character extends Entity - フレームワーク拡張 ─ Express の
Routerをラップする独自クラス
コードレビューで指摘されがちなポイント
PR を出すとシニアから入りやすい指摘です。先回りで身につけておけばレビューが一発で通ります。
super()呼び忘れ ─thisを使う前に呼ばないと ReferenceError- 継承の代わりに composition ─
is-aではなくhas-aなら委譲が良い - 深すぎる継承 ─ 3 階層を超えると追跡が困難
extends Object不要 ─ 全クラスが暗黙に Object を継承
パフォーマンス考慮事項
- プロトタイプ チェーンの探索 ─ 階層が深いとプロパティ参照が遅くなる
- JIT 最適化 ─ 単純な継承ならインライン化される
- メモリ効率 ─ メソッドは prototype 上で共有、フィールドのみインスタンス毎
instanceofチェーン ─ 階層が深いと O(深さ) で遅い
ここまでの要点
extends + super で継承、super() を constructor の最初で呼ぶ。super.method で親実装、深い階層より composition を優先。
よくある質問
Q. 継承と委譲（composition）はどっちを使うべき？
A. 迷ったら委譲を選ぶのが現代の主流（Composition over Inheritance）です。継承は密結合になりやすく、親クラスの変更が子に波及します。委譲なら必要なメソッドだけ持つフィールドに任せるため、変更耐性と柔軟性が高くなります。
Q. オーバーライド時に super を呼ぶ必要はありますか？
A. 親の処理を維持したい場合は super.method() を最初に呼んでください。例えば Error を継承したカスタムエラークラスで super(message) を呼ばないとメッセージや stack が正しく設定されず、React の旧クラスコンポーネントでも super(props) を省略すると props が未定義になります。完全に置き換えたいなら super 呼び出しは不要です。
Q. 多重継承は JavaScript でできますか？
A. クラスは extends で継承できる親が 1 つだけです（単一継承）。複数の機能を合成したいときは Mixin 関数（関数でプロトタイプを合成する手法）や委譲（composition）を使います。
次のレッスン
次は 多態性とstatic で、extendsで親クラスを継承し、superで親のメソッドを呼び出す方法を学ぼう を学びます。
事前確認 — 進む前に次の 3 つができることを確認しましょう。
- 継承とsuper の要点を自分の言葉で説明できる
- このレッスンの最小コード (または操作手順) を見ずに書ける
- 練習問題やクイズで間違えた箇所を読み直して理解した
理解度チェック (30 秒)
Q. 継承とsuper とは何か、1 文で説明してください。
A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。
関連レッスン
入出力例
test-cases.txt
createAnimalHierarchy("dog", "ポチ") → {"info":"dog: ポチ","isAnimal":true,"speak":"ポチはワンワンと鳴きます","type":"dog"}
createAnimalHierarchy("cat", "タマ") → {"info":"cat: タマ","isAnimal":true,"speak":"タマはニャーと鳴きます","type":"cat"}
createAnimalHierarchy("bird", "ピーちゃん", "ピヨピヨ") → {"info":"bird: ピーちゃん","isAnimal":true,"speak":"ピーちゃんはピヨピヨと鳴きます","type":"bird"}