super の使用 — super() / super.method()
JavaScript の super は「親クラス(基底クラス)」を呼び出すためのキーワードです。extends で継承したクラスの中で使い、親の constructor やメソッドを呼び出すことができます。初心者は「親の機能を借りるための特別な呼び出し」と覚えると理解しやすいです。
基本のコード例
1. super() — 親の constructor を呼ぶ
class Parent {
constructor(name) {
this.name = name;
}
}
class Child extends Parent {
constructor(name, age) {
super(name); // 親の constructor を呼ぶ
this.age = age;
}
}
const c = new Child("Aki", 20);
console.log(c.name); // → "Aki"
console.log(c.age); // → 20
JavaScriptsuper(name)→ 親の初期化処理を実行。- 子クラスの
constructorではthisを使う前に必ずsuper()を呼ぶ必要がある。
2. super.method() — 親のメソッドを呼ぶ
class Animal {
speak() {
console.log("動物が鳴いた");
}
}
class Dog extends Animal {
speak() {
super.speak(); // 親のメソッドを呼ぶ
console.log("ワンワン!");
}
}
const d = new Dog();
d.speak();
// → "動物が鳴いた"
// → "ワンワン!"
JavaScriptsuper.speak()→ 親クラスのspeakを呼び出す。- 子クラスでメソッドを「上書き(オーバーライド)」するときに便利。
よく使うテンプレート集
親の初期化 + 子の追加プロパティ
class User {
constructor(name) {
this.name = name;
}
}
class Admin extends User {
constructor(name, role) {
super(name);
this.role = role;
}
}
JavaScript親メソッドを拡張
class Logger {
log(msg) {
console.log("LOG:", msg);
}
}
class TimestampLogger extends Logger {
log(msg) {
super.log(new Date().toISOString() + " " + msg);
}
}
const logger = new TimestampLogger();
logger.log("アプリ起動");
// LOG: 2025-12-12T02:19:00.000Z アプリ起動
JavaScript例題: 乗り物クラス
class Vehicle {
constructor(type) {
this.type = type;
}
run() {
console.log(`${this.type} が走る!`);
}
}
class Car extends Vehicle {
constructor(name) {
super("車"); // 親の初期化
this.name = name;
}
run() {
super.run(); // 親のメソッドを呼ぶ
console.log(`${this.name} がクラクションを鳴らす!`);
}
}
const car = new Car("プリウス");
car.run();
// → "車 が走る!"
// → "プリウス がクラクションを鳴らす!"
JavaScript実務でのコツ
- constructor では必ず super() を呼ぶ(子クラスで
thisを使う前)。 - 親メソッドを拡張するときは super.method() を使う。
- 共通処理は親にまとめる → 子は追加や上書きで拡張。
- 深い継承は避ける → 複雑になりすぎるので、必要なときだけ使う。
ありがちなハマりポイントと対策
super()を忘れる:- 子クラスの
constructorでthisを使う前に必ず呼ぶ。
- 子クラスの
- 親メソッドを完全に上書きしてしまう:
- 拡張したいなら
super.method()を呼んでから追加処理を書く。
- 拡張したいなら
練習問題(動物クラス)
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} が鳴いた`);
}
}
class Cat extends Animal {
speak() {
super.speak();
console.log(`${this.name} がニャーと鳴いた`);
}
}
const cat = new Cat("タマ");
cat.speak();
// → "タマ が鳴いた"
// → "タマ がニャーと鳴いた"
JavaScript直感的な指針
super()= 親の constructor を呼ぶ。super.method()= 親のメソッドを呼ぶ。- 親の機能を借りて、子で拡張するのが基本。
- 初心者は「動物」「乗り物」「ユーザー管理」で練習すると理解が深まる。
これを覚えれば「親の処理を活かしつつ子で拡張する」オブジェクト指向の基本が身につきます。
