では「classの継承を使うと便利な実例」を紹介します。抽象的な説明だけでなく、ゲームやWebアプリのような身近なシーンで考えてみましょう。
実例1：ゲームのキャラクター
ゲームでは「キャラクター」に共通の性質（名前・HP・攻撃など）があり、そこから「勇者」「魔法使い」「モンスター」などを派生させると便利です。
// 親クラス：共通のキャラクター
class Character {
constructor(name, hp){
this.name = name;
this.hp = hp;
}
showStatus(){
console.log(`${this.name} のHPは ${this.hp}`);
}
}
// 子クラス：勇者
class Hero extends Character {
attack(){
console.log(`${this.name} が剣で攻撃した！`);
}
}
// 子クラス：魔法使い
class Wizard extends Character {
castSpell(){
console.log(`${this.name} が魔法を唱えた！`);
}
}
let hero = new Hero("アレン", 100);
let wizard = new Wizard("ミナ", 80);
hero.showStatus(); // → アレン のHPは 100
hero.attack(); // → アレン が剣で攻撃した！
wizard.showStatus(); // → ミナ のHPは 80
wizard.castSpell(); // → ミナ が魔法を唱えた！
👉 共通部分は Character にまとめ、子クラスで「攻撃方法」だけを追加しているので、コードがスッキリします。
実例2：WebアプリのUI部品
Webアプリでは「ボタン」「リンクボタン」「送信ボタン」など、見た目や動作が似ているUI部品を継承で表現できます。
// 親クラス：共通のボタン
class Button {
constructor(label){
this.label = label;
}
render(){
console.log(`[${this.label}] ボタンを表示`);
}
}
// 子クラス：リンクボタン
class LinkButton extends Button {
constructor(label, url){
super(label);
this.url = url;
}
click(){
console.log(`${this.label} をクリック → ${this.url} へ移動`);
}
}
// 子クラス：送信ボタン
class SubmitButton extends Button {
click(){
console.log(`${this.label} をクリック → フォーム送信！`);
}
}
let link = new LinkButton("Google", "https://google.com");
let submit = new SubmitButton("送信");
link.render(); // → [Google] ボタンを表示
link.click(); // → Google をクリック → https://google.com へ移動
submit.render(); // → [送信] ボタンを表示
submit.click(); // → 送信 をクリック → フォーム送信！
👉 「見た目を表示する処理」は親クラスにまとめ、クリック時の動作だけ子クラスで変えています。
✅ まとめ
- 継承のメリット
- 共通部分を親クラスにまとめられる
- 子クラスで機能を追加・変更できる
- コードの重複を減らし、整理された設計になる
💡 初心者へのおすすめ理解法：
- ゲーム → 「キャラクターの共通部分をまとめる」
- Webアプリ → 「UI部品の共通部分をまとめる」