ES2015のクラス構文を堪能する(1)

JavaScriptは奥の深い言語です。
文法自体はプログラミング言語の中でも易しい方だと思いますが、DOMやAjaxの非同期通信が絡むと綺麗に書くのは難しくなります。

かの有名なjQueryも単体で使うと書けば書くほどクロージャーが増えるので他の人が見ると結構きついです。DOM操作やイベント拾うのはとても簡単なんですけどね。

今回はその問題を解決するかもしれない一つのプログラミング手法についてご説明します。
それはJavaScriptでクラス構文を使うことです。

一昔前はJavaScriptで”クラス化”というとプロトタイプチェーンというやや特殊な概念でオブジェクトを継承させて擬似的に”クラスっぽく”表現してきました。オブジェクトの生成もnew演算子を使うことが出来るためそれなりに便利でした。しかし数年前にECMAScript6(今ではES2015というらしい)というJavaScriptの元となる標準仕様としてクラス構文が発表されました。まだ全てのブラウザが対応してるわけではありませんが、これは開発者にとって良いニュースです。

 

私の主観ですが、JavaScriptは簡単だと言い切る人と書きにくいと毛嫌いする人が極端な言語だと思います。
ただサーバサイドのNode.JSやスマートフォンアプリ、WindowsアプリなんかもJavaScriptで出来る時代です。なんとなく苦手意識を持っている技術者に対してJavaScriptがとても興味深い開発者にやりがいを感じさせてくれる言語であると思って頂けたら幸いです。

 

まずクラスの基本構文は以下のようになります。

class Hoge{
  constructor(){
    console.log('hello constructor!');
    this.test = 'ok';
  }
  hello(){
    console.log('hello world!');
  }
  static test(){
    console.log('hello static!');
  }
}
var hoge = new Hoge();  // hello constructor!が出力される
hoge.hello();           // hello world!が出力される
Hoge.test();            // hello static!が出力される

残念ながらプロパティをデフォルト定義することはできないようです。。
constructorに定義しましょう。

 

 

次に継承を行います。

class Hoge{
  fuga(){
    console.log('parent fuga!');
  }
}
class HogeSub extends Hoge{
  constructor(){
    super();             // 親がいる場合はsuper()を呼ぶ必要があります
    this.fuga();
  }
}
var hogeSub = HogeSub(); // parent fuga!が出力される

ちなみにメソッドをオーバーライドした場合はサブクラスから
super.fuga()と記述すると親のメソッドを呼び出すことが出来ます。

 

 

最後にゲッターセッターを使ってみます

class User{
  constructor(){
    this.property = {};
  }
  get userId(){
    return this.property.userId;
  }
  set userId(userId){
    this.property.userId = userId;
  }
}
var user = User();
user.userId = 1000;

これは一見なにやってるかわからないかもしれませんが、
user.userId = 1000;を実行した時にset userId()というメソッドが呼ばれます。
この例では値をそのまま格納していますが、例えば型を統一したり、nullが入ってきたら空文字に置き換えたりすることができるようになります。
スクリプト言語にはありがたい機能ですね!

長くなったので今日はこの辺で。
インターフェースや抽象化は今のところないみたいです。
ですが、プロトタイプチェーンでクラス化っぽくしたようになんちゃってインターフェースとかがそのうち流行るかもしれませんね。