JavaScript 逆引き集 | super の使用

JavaScript JavaScript
スポンサーリンク

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
JavaScript
  • super(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();
// → "動物が鳴いた"
// → "ワンワン！"
JavaScript
  • super.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() = 親のメソッドを呼ぶ。
  • 親の機能を借りて、子で拡張するのが基本。
  • 初心者は「動物」「乗り物」「ユーザー管理」で練習すると理解が深まる。

これを覚えれば「親の処理を活かしつつ子で拡張する」オブジェクト指向の基本が身につきます。

スポンサーリンク
タイトルとURLをコピーしました