たんたんとがんばる

ruby, Ruby on Rails, React etc.

Qiita「ES6でクラス定数を使う」を理解する

たまたまJavascriptでプログラムでクラス変数使いたいなぁ、と思っていたら、素晴らしい記事がありました。

qiita.com

さて、ここに書かれていることを理解するには以下の前提が必要なので備忘録として記載します。
※上記記事が一発で理解できる人は読む必要ありません。

  1. ES6ではstaticキーワードはメソッドにしか使えない。staticメソッドは定義できるがstatic変数はできない(ES7で検討中らしい)
  2. Javascriptではgetter/setterが使える(ES6以前から)

getter

get 構文は、オブジェクトのプロパティを、プロパティが参照された時に関数が呼び出されるように結びつけます。

developer.mozilla.org

説明は難しいですが以下のサンプルコードを読むと分かりやすいですね。

var man = {
  firstName: 'Bill',
  lastName: 'Evans',
  get fullName() {
    return this.firstName + ' ' + this.lastName;
  },
};
man.fullName
=> Bill Evans

クラス変数の理解

以下のようにまずstaticメソッドを定義すると、Constant.EXCLUSION_NOTES_FOR_FLAT_KEYS()が呼び出せます。
さらに、getをつかうことでConstant.EXCLUSION_NOTES_FOR_FLAT_KEYS()が、Constant.EXCLUSION_NOTES_FOR_FLAT_KEYSと呼べます。

と書いていて気づいたのですが、これは表面的には()を書かなくてすむだけかしらん…

class Constant {
  static get EXCLUSION_NOTES_FOR_FLAT_KEYS(){
    return ['c', 'f', '_b', '_e', '_a', '_g', '_d'];
  }
}

console.log(Constant.EXCLUSION_NOTES_FOR_FLAT_KEYS)
=> ['c', 'f', '_b', '_e', '_a', '_g', '_d'];