前回は「ECMAScript 2015とは、const・letの違い」について学びました。

第2回は「クラス」です。これまでのjavascriptには「クラス」という概念はありませんでしたが、ES2015から新しく「クラス」の概念が追加されました。

今回はこの「クラス」について学んでいきます。


javascriptに追加された「クラス」をとりあえず使ってみる。

以下に「クラス」を使った簡単な例を作成しました。

See the Pen Javascript class1 by blanks (@blanks-site) on CodePen.


クラスの定義

例では、以下の記述で「Person」クラスを定義しています。


//「Person」クラス定義
class Person{  
  //コンストラクタ関数
  constructor(name = '名無し',age= 0){
    this.name = name;
    this.age = age;
  }
  //callInfoメソッド
  callInfo(){
    let p = document.createElement("p");
    p.innerHTML = `${this.name}さんは${this.age}才です。`
    document.getElementById('wrap').appendChild(p);
  }
}


またPersonクラスでは、以下の「コンストラクタ関数」で2つのプロパティ「name」と「age」を定義しています。
「name = '名無し',age= 0」とありますが、これは「name」と「age」の初期値になります。
コンストラクタ関数は、インスタンス生成時に呼び出される特別な関数だということを覚えておきましょう。


//コンストラクタ関数
constructor(name = '名無し',age= 0){
  this.name = name;
  this.age = age;
}

併せてPersonクラスには、以下のように「callInfoメソッド」も定義してあります。
これはid名「wrap」内に「nameさんはage才です。」と出力するメソッドです。


//callInfoメソッド
callInfo(){
  let p = document.createElement("p");
  p.innerHTML = `${this.name}さんは${this.age}才です。`
  document.getElementById('wrap').appendChild(p);
}


インスタンスの生成

次は「Person」クラスを用いて、インスタンスを生成していきます。
インスタンスの生成をしているのは以下の記述です。
newをちゃんと書かないとエラーになりますので、気をつけましょう。


  //インスタンス生成
  let instanceA = new Person('Taro',20);
  let instanceB = new Person('Hanako',21);
  let instanceC = new Person();


メソッドの呼び出し

Personクラスには「callInfo」メソッドが定義されているので、生成したインスタンスはこのメソッドを使用できます。
以下が、callInfoメソッドを呼び出している記述になります。
このメソッドを呼び出しているので、「〇〇さんは□□才です」と表示されています。


  //callInfoメソッドの呼び出し
  instanceA.callInfo();
  instanceB.callInfo();
  instanceC.callInfo();


継承

javascritpのクラスにも「継承」があります。
以下の記述ではPersonクラスを継承して、「Student」クラスを定義しています。継承には「extends」を使います。
継承元のメソッドやコンストラクタ関数を用いる場合には「super」を使用します。
例えばコンストラクタ関数では「super(name,age);」として、継承元のコンストラクタ関数を実行しています。「name」と「age」は継承元には初期値が設定されているため、改めて初期値を設定しなくても初期値が入っています。また逆に、新たに初期値を設定し直すこともできます。例として、「age」は初期値を設定し直しています。


//継承を使う
class Student extends Person{
  //コンストラクタ関数
  constructor( name, age = 19, school = '大学'){
    super(name,age); //継承元のコンストラクタ関数を実行
    this.school = school;
  }
  //callInfoメソッド
  callInfo(){
    super.callInfo();  //継承元のcallInfoメソッドを実行
  }
  //callStudentInfoメソッド
  callStudentInfo(){
    let p = document.createElement("p");
    p.innerHTML = `${this.name}さんは${this.age}才で、${this.school}在学中です。`
    document.getElementById('wrap').appendChild(p);
  }
}


次回は「アロー関数」について書いていこうと思います。それまでしばらくお待ち下さいませ〜。