今更聞けないJavaScriptのクラス

業務中にJavaScriptのクラスが出てきて、自分の中で咀嚼できていないな、と感じたのでメモがてらJavaScriptのクラスについて書いていこうかなと思います。

基本構文

test.js

// class
class test {
  constructor(text) {
    this.text = text;
  }  
}

// classを使ってObjectを生成
let testObj = new test("test object");

// constructorで設定した値を表示してみる
console.log(testObj.text)

上記がclassの基本文法になります。
classとコメントが書かれたした5行がクラスになります。
classの中身にはconstructorというものが設定されています。
constructorというのはクラスがnewされたタイミングで実行され、引数をオブジェクトに保持させます。
今回だとtextにtest objectという値を保持させるようにしています。
そのためこちらのコードを実行すると、ログにtest objectと表示されます。

メソッド

続いてクラスにメソッドを追加します。

test.js

class test {
  constructor(text) {
    this.text = text;
  }
  // メソッド
  showText() {
    console.log(this.text);
  }
  // 静的メソッド
  static staticMethod() {
    console.log("static method")
  }
}

let testObj = new test("test obj")

// メソッドを実行する
testObj.showText()

// 静的メソッドを実行する
test.staticMethod()

classの中にメソッドを定義できます。
この時、functionという記述は不要です。
**オブジェクト名.メソッド名()**で実行できます。
また、staticをつけたメソッドは静的メソッドといい、**クラス名.メソッド名()**で実行ができます。

その他機能

getter, setter　get/setをつけた関数をclass内で宣言することで使える。該当のメソッドを属性値にように呼べたりするので便利。
extends クラスはextendsを使えば継承することができる。宣言するクラス名の後ろでextends 継承する親クラスと書くことでできる。親クラスのメソッドや変数を子が使えるようになる。
super 親のコンストラクタを呼び出す時に使う。
クラス式 クラス名を持たないクラスを作成できる。

test.js

let test = class {
  constructor() {
    this.text = "text":
  }
}
console.log(test.text);

静的メソッドを使うタイミング

静的メソッドはオブジェクトを生成しなくても呼ぶことができます。
また、オブジェクトを生成してしまうと呼ぶことができません。
そのため、静的メソッドはUtilなどの関数を作るのに使われます。

個人的な所感

classはちゃんと使えるといい感じにコードがまとまりそう。
まだどんな時に使えばいいか（特にクラス式で匿名クラスを作るのはいつかなど）がしっかりとわかっていないので手を動かして覚えていきたい。
今回paiza.ioを使って動作を確認したが、とてもいいのでおすすめ。

参考文献

クラス
JavaScript初心者にclassを伝える