同じ形をまとめて作る(クラス)

INPUT · スライド

あるクラスをもとに作る

01 / 04

ほとんど同じクラスが2つ

「のりもの」と「トラック」の設計図を別々に書いたとしよう。名前を持つ、走る……という共通部分を両方に同じことを書くことになる。

共通部分を直したいとき2か所を直すのは面倒だし、片方だけ直して食い違うのがいちばん怖いよね。

02 / 04

extends で引き継ぐ

class 子 extends 親 { } と書くと、親クラスの中身をそのまま引き継いだクラスが作れる。これを継承と呼ぶよ。

子クラスの { } が空っぽでも、親のコンストラクタがちゃんと働く。だから new に値を渡せば、親が書いたとおりにプロパティが用意されるよ。

class Vehicle {  constructor(name) {    this.name = name;  }}class Bicycle extends Vehicle {}const b = new Bicycle("あかいじてんしゃ");console.log(b.name);

実行結果

あかいじてんしゃ

03 / 04

親と子の呼び方

引き継がれるほうを親クラス、引き継ぐほうを子クラスと呼ぶよ(スーパークラス・サブクラスとも言う)。

引き継ぎは一方通行。子は親のものを使えるけれど、親は子のことを何も知らない。ここは大事なのであとでもう一度出てくるよ。

class Vehicle {  constructor(name, wheels) {    this.name = name;    this.wheels = wheels;  }}class Truck extends Vehicle {}const t = new Truck("おおきいトラック", 6);console.log(t.name);console.log(t.wheels);

実行結果

おおきいトラック
6

04 / 04

共通部分を1か所にできる

同じ親から子をいくつ作っても、共通部分の置き場所は親1か所だけ。

直したいときも1か所。書く量が減るより、直す場所が減るのが継承のいちばんのねらいだと思っておこう。ここから書いてみよう。

class Vehicle {  constructor(name) {    this.name = name;  }}class Bicycle extends Vehicle {}class Truck extends Vehicle {}const b = new Bicycle("あかいじてんしゃ");const t = new Truck("おおきいトラック");console.log(b.name);console.log(t.name);

実行結果

あかいじてんしゃ
おおきいトラック