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

INPUT · スライド

作るときに値を渡す

01 / 05

同じ中身しか作れない問題

前のレッスンのやり方だと、new するたびにまったく同じ中身の実物ができる。

でもロボットは1台ごとに名前が違うし、商品は1つずつ値段が違うよね。作るときに「この値で作って」と伝えられればいい。

02 / 05

コンストラクタに引数を書く

constructor(name, power) のように、かっこの中に引数(受け取る値の置き場)を書く。渡すのは new Robot("がしゃん", 10) のように new のかっこの中だよ。

関数で覚えた引数とまったく同じ仕組み。渡した順に受け取るよ。

class Robot {  constructor(name, power) {    this.name = name;    this.power = power;  }}const r = new Robot("がしゃん", 10);console.log(r.name);console.log(r.power);

実行結果

がしゃん
10

03 / 05

渡す値を変えれば別ものになる

設計図は1つのまま、中身の違う実物をいくつでも作れるようになったよ。

これがクラスの本領。形は同じ、中身は別。まさに「量産するための設計図」だね。

class Robot {  constructor(name, power) {    this.name = name;    this.power = power;  }}const a = new Robot("がしゃん", 10);const b = new Robot("ぴこ", 18);console.log(a.name);console.log(b.name);

実行結果

がしゃん
ぴこ

04 / 05

左と右で同じ名前でもいい

this.name = name; は左右で名前が同じでちょっと不思議に見えるけど、意味はきっぱり分かれているよ。

  • 左の this.name … これから作る実物のプロパティ
  • 右の name … いま受け取った引数

「受け取った値を、実物のプロパティに写す」と読めばいいよ。

05 / 05

受け取った値で計算してもいい

コンストラクタの中はふつうの処理が書ける場所。受け取った値から別のプロパティを作ることもできるよ。

作った瞬間に合計まで用意されている、というわけだね。ここから書いてみよう。

class Order {  constructor(price, count) {    this.price = price;    this.count = count;    this.total = price * count;  }}const o = new Order(160, 3);console.log(o.total);

実行結果

480