ES6(ECMAScript6)ではJavaScriptでclassが使える

初めに

これからJavaScriptを使うことになるのだが,そこでECMAScriptなるものの存在を知った.あんまりJavaScriptに触れたことがなく,全くわからなかったが,結構重要そうなので少し調べてみると,以前挫折した,JavaScriptのクラスがES6ではJavaなどのclassっぽく書けるようになるようなので記事を書いた.

ECMAScript

Wikipedia - ECMAScript参照

環境

今回環境として,Babel ・ The compiler for writing next generation JavaScriptを利用した.
これは,ブラウザからBabelのトランスパイルをしてくれるもので,今回は便利だった.
また,変換したES5のソースが見れるのでいかにクラスの書き方が単純化されたかがわかる.

実装

class_construct_extends.js

class Foo {
  //同名の関数ではなくconstructでコンストラクタを定義する.
  constructor( name ){
    this.name = name;
  }
  echoName( ){
    console.log( this.name );
  }
}

class Boo extends Foo {
  constructor( name ){
    super( name );
  }
  echo( ){
    super.echoName( );
  }
}

class Too extends Foo {
  constructor( name ){
    super( name );
  }
  echo( ){
    super.echoName( );
  }
}

var BooInstance = new Boo( "kokoax" );
var TooInstance = new Too( "hawai" );

BooInstance.echo();       //クラスが実装できているのがわかる.
BooInstance.echoName();   //継承しているのがわかる.

//配列にも入る.
var ArrayInstance = new Array( BooInstance, TooInstance );

ArrayInstance[0].echo();
ArrayInstance[1].echo();

を実行すると

kokoax
kokoax
kokoax
hawai

が表示される.

終わりに

以前,JavaScriptでクラスはどうなっているのか気になって,調べた時prototypeを使ったやり方が出てきてかなりややこしくなって途中で投げ出してしまうほどだったが,これならぐっとクラスを使いやすくなると思う.

参考文献

JS.next JavaScriptの最新実装情報を追うブログ Class構文が実装された
Babelで学ぶECMAScript6（入門編）