JavaScriptでクラスを使ってみる。

はじめに

JSでもクラスが使えるようになってとても便利だなと感じていますが、まだES5の名残りがあるコードはたくさんあるので、使ったことがない人もいるかと思います。これからは主流の書き方になると思うので、確実に押さえておきましょう！
これまでの使い方を復習した上で、クラスの使い方を見ていこうと思います。

コンストラクタとは

コンストラクタとは、インスタンス(実体)を作成する関数のことです。

function Person(name, age) {
  // プロパティを設定
  this.name = name;
  this.age = age;

  // メソッドを設定
  this.setName = function(name) {
      this.name = name;
  }
}

// コンストラクタからインスタンスを作成
let person1 = new Person('tanaka', 22);

プロトタイプについて

メソッド定義の方法のことで、インスタンスが生成されるたびにコピーされることはないのでメモリの節約になります。

Person.prototype.setName = function(name) {
    this.name = name;
}

クラスの使い方

class Person {
  // コンストラクタを設定
  constructor(name, age) {
      this.name = name;
      this.age = age;
  }

  // メソッドを設定
  hello(someone) {
    console.log('Hello ' + someone.name, ', I am ' + this.name + '.');
  }
}

let tanaka = new Person('Tanaka', 22);
let kato = new Person('Kato', 30);
kato.hello(tanaka);  // Hello Tanaka , I am Kato.
tanaka.hello(kato);  // Hello Kato , I am Tanaka.

クラスの継承

クラスを継承することで無駄の無いコードを実装出来ます。継承には、extends句を使います。

class Person {
  // コンストラクタを設定
  constructor(name, age) {
      this.name = name;
      this.age = age;
  }
}

// Personクラスを継承
class ChildPerson extends Person {
  // コンストラクタを設定
  constructor(name, age, person) {
    super(name, age) // Personクラスのプロパティを継承
    this.person = person
  }
}

終わりに

一部のブラウザではまだ機能できない事がありますが、これから調整されて利用できると思うので今から身につけておきましょう！

参考

【JavaScript入門】コンストラクタの使い方

JavaScriptのクラス（class）を理解する