Go 6to5 !!
Learn ES6
What is 6to5?
- ES6 -> ES5 のトランスパイラ
- ランタイムではない
- 事前にトランスパイルする
Why use 6to5?
- ES6の構文が使える
- AltJSの代わりになる
- 変換後のコードが綺麗
Important point!!
- 書くのは生のJavaScript
-
いつか変換せずにブラウザで動かせる
- Nodeならもうすぐ？
- 負債にならない（重要）
Let's learn ES6
Class
Class
class Foo {
constructor(x, y) {
this.x = x;
this.y = y;
}
bar() {
return this.x + this.y;
}
}Class
var Foo = (function () {
function Foo(x, y) {
this.x = x;
this.y = y;
}
_prototypeProperties(Foo, null, {
bar: {
value: function bar() {
return this.x + this.y;
},
writable: true,
enumerable: true,
configurable: true
}
});
return Foo;
})();Template Literal
Template Literal
var template = `
<div class="hoge">
<h1>hogehoge</h1>
<p>tempalte string</p>
</div>
`;文字列改行できる
Template Literal
var template = "\n<div class=\"hoge\">\n
<h1>hogehoge</h1>\n
<p>tempalte string</p>\n</div>\n";文字列改行できる
Template Literal
var width = 200;
var height = 100;
var html = `<div
style="width: ${width}px; height: ${height}px;"
>`;変数展開も
Template Literal
var width = 200;
var height = 100;
var html = "<div" +
"style=\"width: " +
width + "px; height: " +
height + "px\">";変数展開も
Arrow Function
Arrow Function
var func = (x, y) => {
return x + y;
}
var func = x => {
return x + 10;
}
var func = x =>
x + 10;
var func = () => {
return 10;
}function書かなくてよい
Arrow Function
var func = function (x, y) {
return x + y;
};
var func = function (x) {
return x + 10;
};
var func = function (x) {
return x + 10;
};
var func = function () {
return 10;
};function書かなくてよい
Arrow Function
var obj = {
func(x, y) {
return x + y;
}
};コロンいらず
Arrow Function
var obj = {
func: function func(x, y) {
return x + y;
}
};コロンいらず
Default Parameters
Default Parameters
var func = (x, y = 5) => {
return x + y;
}
func(5); // => 10引数の値にデフォルトを設定できる
Default Parameters
var func = function (x) {
var y = arguments[1] === undefined ? 5 : arguments[1];
return x + y;
};
func(5); // => 10引数の値にデフォルトを設定できる