【JavaScript入門】継承

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

継承

　クラス継承は 既存クラス（親）を再利用しながら、振る舞いやプロパティを拡張するしくみ です。ES2015 の class 子 extends 親 構文により、JavaScript でも「共通コードを親に集約し、差分を子で追加する」という典型的なオブジェクト指向設計が書きやすくなりました。ここでは

extends と super の基礎
メソッドのオーバーライド／追加
多層継承での super 呼び出し

をステップ形式で解説し、最後に動くデモで挙動を確認します。

１．継承の基本構文

1.1. クラス宣言と `extends`

要素	書き方	役割
親クラス	`class Parent { … }`	共通プロパティ／メソッドを定義
子クラス	`class Child extends Parent { … }`	親を継承して拡張

1.2 .`super()` とコンストラクター

子クラスの constructor では 最初に super(...) を呼び、親の初期化を実行。
this へアクセスできるのは super() 呼び出し後。

class Child extends Parent{
  constructor(arg1, arg2){
    super(arg1);       // 親の constructor
    this.extra = arg2; // 子独自の初期化
  }
}

２．メソッドのオーバーライドと拡張

2.1. オーバーライド

子クラスで親と同名のメソッドを書くと 親の実装を上書き。
super.method() で親バージョンを呼び出し、結果を加工できる。

greet(){                         // 親にも greet がある
  return super.greet() + '!!';   // 親の結果を拡張
}

2.2. 新規メソッドの追加

子クラス独自の機能は自由にメソッドを増やす。親インスタンスには影響しない。

３．実践サンプル ― メニュー＆ドリンクを継承で実装

ファイル名： inheritance_demo.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>継承デモ</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body{font-family:sans-serif;margin:2rem}
pre{background:#f4f4f4;padding:1rem}
</style>
</head>
<body>
<h2>🍴 メニュー継承デモ</h2>
<pre id="log">loading…</pre>

<script>
/* ---------- 親クラス ---------- */
class Menu {
  constructor(name, price){
    this.name  = name;
    this.price = price;
  }
  info(){
    return `${this.name}：${this.price}円`;
  }
}

/* ---------- 子クラス ---------- */
class DrinkMenu extends Menu {
  constructor(name, price, size){
    super(name, price);           // 親の初期化
    this.size = size;             // S / M / L
  }
  /* 親メソッドをオーバーライド */
  info(){
    return `${super.info()}（サイズ${this.size}）`;
  }
  /* 子クラス独自メソッド */
  volume(){
    const map = {S:200, M:400, L:600};
    return map[this.size] ?? 0;
  }
}

/* ---------- 動作確認 ---------- */
const cake  = new Menu('チョコケーキ', 460);
const tea   = new DrinkMenu('アイスティー', 400, 'M');

const lines = [
  '[親] ' + cake.info(),
  '[子] ' + tea.info(),
  `　┗ 量は ${tea.volume()} ml`
];

document.getElementById('log').textContent = lines.join('\n');
console.log(...lines);
</script>
</body>
</html>

ブラウザの表示例

プログラム解説

ステップ	内容
1	`Menu` が共通の `name/price` と `info()` を提供
2	`DrinkMenu extends Menu` で継承し、`size` を追加
3	`info()` をオーバーライドし `super.info()` で親の文字列を再利用
4	`volume()` は子クラス独自メソッド。親インスタンスでは呼べない。

🔍 ...lines の意味（スプレッド構文）

スプレッド構文（Spread Syntax）とは？

　... は JavaScript で「スプレッド構文」と呼ばれ、配列やオブジェクトの中身を展開（展開＝一つずつ取り出して渡す）するために使われます。

デバックコンソールの出力

[親] チョコケーキ：460円 [子] アイスティー：400円（サイズM） 　┗ 量は 400 ml

まとめ

extends で親の資産を引き継ぎ、super() で初期化・メソッド再利用が可能。
オーバーライドにより既存挙動をカスタマイズしつつ、super.メソッド() で元の処理も呼び出せる。
子クラスにメソッドを追加すれば、親を変更せず機能拡張できる ― これが継承の最大のメリット。

　まずはサンプルをコピーし、DrinkMenu にホット／アイス判定やカフェイン量などを追加して、継承設計の柔軟さを体感してみてください。

【JavaScript入門】継承