2015/7/3(金)20:00 天神LT勉強会 ビールとピザとLTと(ノンアルコールもコーラもあるよ) http://www.zusaar.com/event/6137004

1. で、ES2015(ES6)を学ぼう!
天神LT勉強会 2015/7/3(金)

2. -自己紹介-
株式会社キャムの江原と申します。
Excelとかプログラムとか何かイロイロしてます。
twitter : @itokami1123
企業の経営戦略に役立つサービス「CAM MACS」を
AWSにて提供してます。

3. あの..
ES2015(ES6)って何？

4. 最近(6/17)に
標準化された
ECMAScript のことです！
もっと知りたい人はこちらがオススメ！↓
Run through ES6
https://teppeis.github.io/run-through-es6/#1

5. つまり全てのブラウザで
（いつか）動く
ﾁｮﾋﾟﾘかっこいいJSです！

6. でも、まだまだ..
ブラウザでうごきませぬ…
各ブラウザの対応状況！
https://kangax.github.io/compat-table/es6/

7. そこで Babel を使って
ES6を体験しましょ！

8. https://babeljs.io/

9. https://babeljs.io/repl/
手軽に Try it outで試せます

10. var compute = (x, y) => {
return x*y;
};
console.log(compute(2, 3));
"use strict";
var compute =
function compute(x, y) {
return x * y;
};
console.log(compute(2, 3));
Arrows

11. var nobitan = {
favorite: "hirune",
say(){
[1, 2, 3].forEach(
(x) => console.log(
"No.",
x,
this.favorite
)
)
}
};
nobitan.say();
"use strict";
var nobitan = {
favorite: "hirune",
say: function say() {
var _this = this;
[1, 2, 3].forEach(function (x) {
return console.log(
“No.",
x,
_this.favorite);
});
}
};
nobitan.say();
Arrows -Lexical this-

12. class Hero {
constructor(name){
this.name = name;
}
say (){
console.log(this.name + "参上");
}
}
var hero = new Hero("さうざー");
hero.say();
var _createClass = 省略・・
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError(
"Cannot call a class as a function");
}
}
var Hero = (function () {
function Hero(name) {
_classCallCheck(this, Hero);
this.name = name;
}
_createClass(Hero, [{
key: "say",
value: function say() {
console.log(this.name + "参上");
}
}]);
return Hero;
})();
var hero = new Hero("さうざー");
hero.say();
Classes

13. class Hero {
constructor(name){
this.name = name;
}
say (){
console.log(this.name + "参上");
}
}
class HokuKen extends Hero {
constructor(){
super("けんしろ");
}
say (){
console.log("お前はもう○○だ");
super.say();
}
}
var hokuken = new HokuKen();
hokuken.say();
var _createClass = 省略・・
function _classCallCheck 省略…
var _get = 省略…
function _inherits省略…
var HokuKen = (function (_Hero) {
function HokuKen() {
_classCallCheck(this, HokuKen);
_get(
Object.getPrototypeOf(HokuKen.prototype),
"constructor", this).
call(this, "けんしろ");
}
_inherits(HokuKen, _Hero);
_createClass(HokuKen, [{
key: "say",
value: function say() {
console.log("お前はもう○○だ");
_get(
Object.getPrototypeOf(
HokuKen.prototype
), "say", this).call(this);
}
}]);
return HokuKen;
})(Hero);
var hokuken = new HokuKen();
hokuken.say();
Classes -extends-

14. var favorite = "hirune";
var nobitan = {
favorite,
say(){
[1, 2, 3].forEach(
(x)=>console.log(
"No.",
x,
this.favorite)
)
}
};
nobitan.say();
"use strict";
var favorite = "hirune";
var nobitan = {
favorite: favorite,
say: function say() {
var _this = this;
[1, 2, 3].forEach(function (x) {
return console.log(
“No.",
x,
_this.favorite);
});
}
};
nobitan.say();
Enhanced Object Literals - Shorthand -

15. // Enhanced Object Literals
// Computed (dynamic) property names
var favorite = "hirune";
var nobitan = {
favorite,
say(){
[1, 2, 3].map(
(i) => {
return {
["fav-"+i]: this.favorite
};
}
).forEach(
(x)=>console.log(x)
);
}
};
nobitan.say();
"use strict";
function _defineProperty(obj, key, value) {
return Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true }); }
var favorite = "hirune";
var nobitan = {
favorite: favorite,
say: function say() {
var _this = this;
[1, 2, 3].map(function (i) {
return _defineProperty(
{},
"fav-" + i, _this.favorite);
}).forEach(function (x) {
return console.log(x);
});
}
};
nobitan.say();
Enhanced Object Literals - Computed (dynamic) property names -

16. // Enhanced Object Literals
// Computed (dynamic) property names
var favorite = "hirune";
var nobitan = {
favorite,
say(){
[1, 2, 3].map(
(i) => {
return {
["fav-"+i]: this.favorite
};
}
).forEach(
(x)=>console.log(x)
);
}
};
nobitan.say();
"use strict";
function _defineProperty(obj, key, value) {
return Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true }); }
var favorite = "hirune";
var nobitan = {
favorite: favorite,
say: function say() {
var _this = this;
[1, 2, 3].map(function (i) {
return _defineProperty(
{},
"fav-" + i, _this.favorite);
}).forEach(function (x) {
return console.log(x);
});
}
};
nobitan.say();
Enhanced Object Literals - Methods -

17. // Template Strings
// Multiline strings
var hello = `こんちは
せかい！`;
console.log(hello);
// Interpolate variable bindings
var name = "たろう", food = "すし";
console.log(`Hello ${name}, ${food} 食う?`);
// Template Strings
// Basic literal string creation
"use strict";
// Multiline strings
var hello = "こんちは n せかい！";
console.log(hello);
// Interpolate variable bindings
var name = "たろう",
food = "すし";
console.log(
"Hello " + name + ", " + food + " 食う?");
Template Strings

18. // list matching
var [goku, ,bejita] = [80,50,70];
// object matching
var {
name: targetNm,
option: { op: targetOption }
} = getTarget();
// object matching shorthand
// binds `op`, `lhs` and `rhs` in scope
var {name, option} = getTarget();
// Can be used in parameter position
function eat({food: f, times: t}) {
console.log(`${f}を${t}回食べたい`);
}
eat({food: "すし", times: 2})
// Fail-soft destructuring
var [hogehoge] = [];
// hogehoge === undefined;
// Fail-soft destructuring with defaults
var [fugafuga = "OK"] = [];
// fugafuka === "OK";
// list matching
var _ref = [80, 50, 70];
var goku = _ref[0];
var bejita = _ref[2];
// object matching
var _getTarget = getTarget();
var targetNm = _getTarget.name;
var targetOption = _getTarget.option.op;
// object matching shorthand
// binds `op`, `lhs` and `rhs` in scope
var _getTarget2 = getTarget();
var name = _getTarget2.name;
var option = _getTarget2.option;
// Can be used in parameter position
function eat(_ref2) {
var f = _ref2.food;
var t = _ref2.times;
console.log("" + f + "を" + t + "回食べたい");
}
eat({ food: "すし", times: 2 });
// Fail-soft destructuring
var _ref3 = [];
var hogehoge = _ref3[0];
// Fail-soft destructuring with defaults
var _ref4 = [];
var _ref4$0 = _ref4[0];
var fugafuga = _ref4$0 === undefined ? "OK" : _ref4$0;
Destructuring

19. // Default Params
function cal(x, y = 2) {
return x * y;
}
console.log(cal(3)); // 3*2=>6
// Rest Params
function entry(own, ...list) {
list.forEach(
(item)=>
console.log(`${own}は ${item} 持ってる`)
);
}
entry("スネヲ", "くるま", "ひこうき", "ふね");
// Spread Operator
function foge(x, y, z) {
return x * y * z;
}
console.log(foge(...[2, 3, 4])); // == 24
// Default Params
"use strict";
function cal(x) {
var y = arguments[1] === undefined ?
2 : arguments[1];
return x * y;
}
console.log(cal(3)); // 3*2=>6
// Rest Params
function entry(own) {
for (var _len = arguments.length,
list = Array(_len > 1 ? _len - 1 : 0),
_key = 1; _key < _len; _key++
) {
list[_key - 1] = arguments[_key];
}
list.forEach(function (item) {
return
console.log(""+own+"は "+item+" 持ってる");
});
}
entry("スネヲ", "くるま", "ひこうき", "ふね");
// Spread Operator
function foge(x, y, z) {
return x * y * z;
}
console.log(foge.apply(undefined, [2, 3, 4]));
// == 24
Default + Rest + Spread

20. //
// Let
//
var varX = 10;
let letX = 20;
{
var varX = 1;
let letX = 2;
console.log(varX, letX);
}
console.log(varX, letX);
//
// const
//
const ON = 1;
ON = 0; // => error!
//=> "ON" is read-only
"use strict";
var varX = 10;
var letX = 20;
{
var varX = 1;
var _letX = 2;
console.log(varX, _letX);
}
console.log(varX, letX);
//
// const
//
var ON = 1;
ON;
let ,const

21. 続きは次回！