Hello ES6
続いてbabelコマンドを使って、簡単なES6のサンプルコードをES5のコードへトランスパイルします。ここではファイル名でES6のコードを明確に区別できるようにサフィックスを.es6.jsとします。
'use strict'; ["Hello", "ES6"].forEach((v) => console.log(v));
この例ではES6のarrow functionという機能を使って書かれています（arrow functionの詳細については後述します）。
当然ですが、このコードをES6のarrow functionに対応していないブラウザで実行してもエラーとなります。
bableコマンドでES5のコードへとトランスパイルします。
$ bable hello.es6 -o hello.js
hello.jsという名前のファイルが生成され、ES5のコードに変換されたコードが出力されます。
"use strict";
["Hello", "ES6"].forEach(function (v) {
return console.log(v);
});
このようにBabelでトランスパイルすることで、ES6で書かれたコードをES5のコードとして実行できるようになります。
続いてES6で追加される主な機能をBabelを使いながら解説していきます。
Arrow Function
arrow functionとは匿名関数をカッコ「()」と「=>」を使って生成できる構文です。関数への引数はカッコ内に変数名を指定します。
var sum = (x, y) => return x + y; sum(1,2);
arrow functionは"this"が関数内のスコープに束縛されるという特徴があります。そのため、function構文よりも簡潔に書くことができます。
例えば、ES5では下の例のようにthis.countに対して関数内の別の関数から参照する場合、thisが異なるためローカル変数thatを経由して参照するという方法がよく使われます（他にもbindを使う方法もあります）。
'use strict';
function counter() {
this.count = 0;
var that = this;
setInterval(function() {
that.count++;
},1000);
}
同じ処理をarrow functionを使って書くと、arrow functionが宣言された場所のthisにスコープが束縛されるため、下の例のようにより簡潔に書くことが可能です。
'use strict';
function cuonter() {
this.count = 0;
setInterval(() => this.count++,1000);
}
このサンプルコードをbabelコマンドで変換すると、arrow functionはfunction構文に変換され、thisは変数_thisを経由して参照されるコードとなり、上で紹介したES5の例と同じ形式でthisの解決が行われていることが分かります。
'use strict';
function cuonter() {
var _this = this;
this.count = 0;
setInterval(function () {
return _this.count++;
}, 1000);
}
また、1つの式のみの場合は評価された結果の値が暗黙でreturnされるため、明示的にreturnを行わなくても下の例のようなコードが実行可能です。
var x = (a) => a;
console(x("babel")); // "babel"
ただし、ブロック構文を使って記述した場合は明示的にreturnが必要です。
var x = (a) => {
return a;
};
console(x("babel")); // "babel"
