ES5→ES6、簡単移行まとめ


1.Class構文

es5


//コンストラクタを宣言
function Hoge(foo, bar) {
    this.foo = foo;
    this.bar = bar;
}

Hoge.prototype.sayHello = function () {
    console.log(this.foo + "," + this.bar + "!");
};

Hoge.prototype.method2 = function (arg) {
    //do something
};
//メソッドの追加は、プロトタイプチェーンを生やしてメソッドを拡張していく

ちなみに、上記のようなクラス定義は継承を利用しないシンプルなパターンですが、継承を実現しようとするともう少し面倒な定義になります。

es6

"use strict";
class Hoge {

    constructor(foo, bar) {
        this.foo = foo;
        this.bar = bar;
    }

    sayHello() {
        console.log(this.foo + "," + this.bar + "!");
    }

    method2(args) {
        //do something...
    }
}

es6を使うことで記述量は特に減っていないように見えますが、個人的には、javaやRubyのクラス定義に似ているスタイルで書けるのが良いポイントだと思ってます。

2.アロー式

無名即時関数を引数に渡す時の糖衣構文。
その他に、thisの束縛をいい感じにやってくれます。

es5

//jQueryでよくあるやつ
$('#hoge').on('click',function(event)=>{
    //do something...
});

es6

$('#hoge').on('click',event=>{
    //do something...
});

3.const,let

var…宣言された関数全体で有効になる。
実運用上注意すべき点としては、「宣言された行の上で変数が生きている可能性がある」ことに注意を払わなければならない、という点です。
ちなみに、javascriptのスタイルチェックツールであるjslintではこのvarの性質上、関数の途中で宣言したvarに対して「わかりにくいからvarは全部一番上で宣言しろや」って警告を吐いたりします。
「変数は使う直前に宣言することで影響範囲を狭める」ことを推奨するプログラミング言語は多いので、やや直感に反しますね。

ES6で追加された以下のconst、letは宣言された行の下のみしか生きていないので、何の憂いもなく使う直前に宣言することができます。

const…再代入禁止。

let…ブロックスコープ。varのようなホイスティングが起こらない。

新しくES6で記述するコードは基本的にvarを使用せず、const、letのみで記述するようにします。
逆に、varの巻き上げによって動いているソースコードもあるので、既存ソースのvarを一斉にletに置換したりする行為はご法度です。

4.即時関数

即時関数も簡単に書けるようになりました。
用途はes5時代と同様、名前空間の汚染防止です。

es5


(function(){
    console.log('Hello');
})();

es6


{
    console.log('Hello!This is ...');
}

他にもES6の機能はいろいろありますが、とりあえずこれだけ覚えておくだけでも最低限ES6っぽいコードは書けるっぽいです。
ブラウザで使用する場合はbabelを忘れずに使用してね。

参考:https://github.com/lukehoban/es6features