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

INPUT · スライド

クラスに動きを持たせる

01 / 04

データだけじゃなく動きも

ここまでのクラスは「どんな値を持つか」だけを決めていた。

でも実物にはできることもあるよね。ロボットならあいさつする、注文なら金額を計算する。この「できること」も設計図に書けるんだ。

02 / 04

メソッドの書き方

クラスの { } の中に 名前() { } と書く。これをメソッド(クラスが持つ関数)と呼ぶよ。

function は書かない。呼ぶときは インスタンス.メソッド名() と、うしろに ( ) をつけるよ。

class Robot {  hello() {    console.log("ぴぴっ");  }}const r = new Robot();r.hello();

実行結果

ぴぴっ

03 / 04

引数も戻り値も使える

メソッドは関数の仲間だから、引数を受け取ることも return で値を返すこともできるよ。

返ってきた値はふつうの値。そのまま表示したり計算に使ったりできる。

class Machine {  double(n) {    return n * 2;  }}const m = new Machine();console.log(m.double(7));

実行結果

14

04 / 04

コンストラクタと並べて書く

コンストラクタとメソッドは同じ { } の中に並べて書く。間に , は要らないよ(オブジェクトリテラルと違うところ)。

メソッドは何個書いてもいい。「この設計図から作ったものにできること」を並べていく場所だと思っておこう。ここから書いてみよう。

class Robot {  constructor(name) {    this.name = name;  }  greet() {    console.log("ぴぴっ");  }}const r = new Robot("がしゃん");console.log(r.name);r.greet();

実行結果

がしゃん
ぴぴっ