JavaScript：クラスと継承

出力 == 田中

constructor(name) の中で this.name = name とする。取り出しは p.name。

class Person {
  constructor(name) {
    this.name = name;
  }
}

const p = new Person("田中");
console.log(p.name);

クラスの最小形。constructor で受け取った値を this に入れておくと、あとからプロパティとして取り出せる。

解答 == B

「構築する」という意味の英単語。

B

省略もできて、その場合は何もしない constructor があるものとして扱われる。初期値を設定したいときに書く。

出力 == 314

メソッドの中では this.r で半径を参照する。面積は this.r ** 2 * 3.14。

class Circle {
  constructor(r) {
    this.r = r;
  }

  area() {
    return this.r ** 2 * 3.14;
  }
}

console.log(new Circle(10).area());

メソッドは引数を渡さなくても自分のデータを使える。関数なら area(10) と半径を毎回渡す必要がある。

class Dog {
  constructor(name) {
    ____.name = name;
  }
}

console.log(new Dog("ポチ").name);

出力 == ポチ

「これ自身」を意味する4文字のキーワード。

this

this はそのとき操作している実物を指す。100個インスタンスを作れば、それぞれの this が別のオブジェクトを指す。

解答 == B

getter はプロパティのように振る舞う。

B

カッコを付けないのが getter の特徴。付けると関数そのものを呼ぼうとしてエラーになる。「計算して求まる値」をプロパティらしく見せられる。

出力 == 1500

deposit の中で this.balance += amount とすればプロパティを書き換えられる。

class Account {
  constructor(balance) {
    this.balance = balance;
  }

  deposit(amount) {
    this.balance += amount;
  }
}

const a = new Account(1000);
a.deposit(500);
console.log(a.balance);

メソッドで自分の状態を変えるのがクラスの本領。関数だと変更後の値を return して受け取り直す必要がある。

class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Cat extends Animal {
  constructor(name, indoor) {
    ____(name);
    this.indoor = indoor;
  }
}

console.log(new Cat("タマ", true).name);

出力 == タマ

「親（スーパークラス）」を表すキーワード。関数のように呼ぶ。

super

super() より前に this を使うとエラーになる。子で constructor を書いたら、まず super() を呼ぶと機械的に覚える。

解答 == B

「プライベート」を表す記号。

B

外から obj.#count と書くと構文エラーになる。触ってほしくない状態を確実に守れるので、残高やトークンなどに使う。

出力 == 4500

get subtotal() { return this.price * this.qty; } と書き、item.subtotal で呼ぶ。

class Item {
  constructor(price, qty) {
    this.price = price;
    this.qty = qty;
  }

  get subtotal() {
    return this.price * this.qty;
  }
}

console.log(new Item(1500, 3).subtotal);

常に最新の値が計算されるのが getter の利点。qty を変えれば subtotal も自動で変わるので、値がズレる心配がない。

出力 == ワン

class Dog extends Animal と書き、中で同名の speak を定義すれば上書きされる。

class Animal {
  speak() {
    return "...";
  }
}

class Dog extends Animal {
  speak() {
    return "ワン";
  }
}

console.log(new Dog().speak());

オーバーライドの最小形。親と同じ名前で定義するだけで子が優先される。親の処理も使いたければ super.speak() で呼べる。

出力4行が完全一致

テンプレートリテラルに ${item} と書くと toString が自動で呼ばれる。合計は reduce で。

class Item {
  constructor(name, price, qty) {
    this.name = name;
    this.price = price;
    this.qty = qty;
  }

  get subtotal() {
    return this.price * this.qty;
  }

  toString() {
    return `${this.name}：${this.price.toLocaleString()}円 × ${this.qty} = ${this.subtotal.toLocaleString()}円`;
  }
}

const items = [
  new Item("ノートPC", 128000, 1),
  new Item("マウス", 3200, 2),
  new Item("USBメモリ", 1500, 3),
];

for (const item of items) {
  console.log(`${item}`);
}

const total = items.reduce((sum, i) => sum + i.subtotal, 0);
console.log(`合計：${total.toLocaleString()}円`);

JS08・JS13と同じ請求書だが、表示形式がクラスの中に閉じ込められた。明細の見た目を変えたければ toString だけを直せばよい。

出力2行が完全一致

judge の中で this.average を参照できる（カッコ不要）。平均は toFixed(1)。

class Student {
  constructor(name, scores) {
    this.name = name;
    this.scores = scores;
  }

  get average() {
    return this.scores.reduce((s, n) => s + n, 0) / this.scores.length;
  }

  get judge() {
    return this.average >= 60 ? "合格" : "不合格";
  }
}

const students = [
  new Student("田中", [82, 91, 67, 76]),
  new Student("鈴木", [45, 60, 38, 67]),
];

for (const s of students) {
  console.log(`${s.name}：平均${s.average.toFixed(1)}点 → ${s.judge}`);
}

getter から別の getter を呼べる。judge は average に依存しているが、点数を変えれば両方とも自動で追随するのでズレようがない。

出力4行が完全一致

#balance はクラスの中でのみ参照できる。失敗する出金は try / catch で受け止める（JS10）。

class Account {
  #balance;

  constructor(balance = 0) {
    this.#balance = balance;
  }

  get balance() {
    return this.#balance;
  }

  deposit(amount) {
    this.#balance += amount;
  }

  withdraw(amount) {
    if (amount > this.#balance) {
      throw new Error("残高が不足しています");
    }
    this.#balance -= amount;
  }
}

const account = new Account(10000);

account.deposit(5000);
console.log(`入金後：${account.balance.toLocaleString()}円`);

account.withdraw(3000);
console.log(`出金後：${account.balance.toLocaleString()}円`);

try {
  account.withdraw(999999);
} catch (e) {
  console.log(`エラー：${e.message}`);
}

console.log(`最終残高：${account.balance.toLocaleString()}円`);

残高を直接書き換える手段が存在しないのが要点。account.balance = 999999 と書いても getter しかないので効かない。不正な操作をクラス自身が拒否する設計になっている。

出力3行が完全一致

子の constructor で super(name, 種別, 割引率) を呼び、種別と率だけを変える。計算と表示は親に1回書けばよい。

class Member {
  constructor(name, kind = "一般", rate = 0) {
    this.name = name;
    this.kind = kind;
    this.rate = rate;
  }

  finalPrice(price) {
    return Math.round(price * (1 - this.rate));
  }

  toString() {
    return `${this.name}（${this.kind}）`;
  }
}

class Premium extends Member {
  constructor(name) {
    super(name, "プレミアム", 0.1);
  }
}

class VIP extends Member {
  constructor(name) {
    super(name, "VIP", 0.2);
  }
}

const members = [new Member("田中"), new Premium("鈴木"), new VIP("佐藤")];

for (const m of members) {
  console.log(`${m}：${m.finalPrice(10000).toLocaleString()}円`);
}

計算式は親に1回だけ書けばよい。会員種別が10種類に増えても、子クラスは constructor 1つずつで済む。JS04で if/elif を並べた割引処理と見比べてほしい。

出力2行が完全一致

constructor で this.count = 0 と初期化する。a.reset() を呼んでも b は変わらない。

class Counter {
  constructor() {
    this.count = 0;
  }

  increment() {
    this.count++;
  }

  reset() {
    this.count = 0;
  }
}

const a = new Counter();
const b = new Counter();

a.increment();
a.increment();
a.increment();
b.increment();

console.log(`a: ${a.count} / b: ${b.count}`);

a.reset();
console.log(`リセット後 a: ${a.count} / b: ${b.count}`);

b が影響を受けないことがこの問題の答え。同じクラスから作っても実物は別物。JS13のモジュールは全体で1つしか存在しないので、ここが両者の使い分けの分かれ目になる。