Slide 1
Slide 1 text
͍·͔Β͡ΊΔECMAScript 6
by Shogo Sensui
2015.06.13 HTML5Φʔϧελʔζษڧձ
https://www.flickr.com/photos/jakeandlindsay/5524669257
Slide 2
Slide 2 text
s
Shogo Sensui
a.k.a 1000ch
Slide 3
Slide 3 text
Profile
WebϑϩϯτΤϯυΤϯδχΞ
iOSωΠςΟϒΤϯδχΞ
HTML5શൠ + Node.js + iOS/Mac
#perfmatters
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
s
ϑϩϯτΤϯυ
ΤϯδχΞ
ཆಡຊ
Slide 6
Slide 6 text
WEB+DB PRESS
WebϑϩϯτΤϯυ
࠷લઢ
Slide 7
Slide 7 text
@cssradar @hiloki @t32k @1000ch @ahomu
Frontend Weekly
• ࠃ֎ͷϑϩϯτΤϯυใΛΩϡϨʔγϣϯ
• िʹҰਫ༵ʹ৴
Slide 8
Slide 8 text
@cssradar @hiloki @t32k @1000ch @ahomu
Frontend Weekly
• ࠃ֎ͷϑϩϯτΤϯυใΛΩϡϨʔγϣϯ
• िʹҰਫ༵ʹ৴
https://frontendweekly.tokyo
Slide 9
Slide 9 text
Agenda
JavaScript ͱ ECMAScript
ECMAScript 6 ͷओͳ৽ػೳ
ECMAScript 6 ͱͷ͖߹͍ํ
·ͱΊ
Slide 10
Slide 10 text
JavaScript ͱ ECMAScript
Slide 11
Slide 11 text
1995ɺJavaScriptര
Java͕ྲྀߦͬͯΔ͔Β
JavaScriptͱ͍͏໊લʹ͠Α͏
Brendan Eichࢯ
Slide 12
Slide 12 text
ͳΜͩͱʁͬͪ͜JScriptͩʂ
͜Ε͕JavaScriptͩʂ
ͯͯɺඪ४Խ͠Α͏…
Slide 13
Slide 13 text
ECMAScript
JavaScript
JScript ActionScript
ඪ४Խ͞Εͨݴޠ༷ʢECMAScriptʣͱ
ͦΕΛ࣮͢Δ֤ݴޠʢJavaScriptͳͲʣ
ECMAScriptͷཱͪҐஔ
Slide 14
Slide 14 text
৭ʑͳҙݟ͕JavaScriptʹ
Өڹ͖ͯͨ͠
etc…
Slide 15
Slide 15 text
ECMAScript 2015?
Slide 16
Slide 16 text
ECMAScript 6 ͷओͳ৽ػೳ
https://www.flickr.com/photos/12355559@N03/18012486244
Slide 17
Slide 17 text
let
const
{
var foo = 10;
let bar = 100;
const baz = 1000;
console.log(foo, bar, baz);
// => 10, 100, 1000
}
console.log(foo, bar, baz);
// => 10, undefined, undefined
ES6
Slide 18
Slide 18 text
Arrow
Functions
$('button').on('click', function (e) {
console.log(this);
// => button
});
$('button').on('click', (e) => {
console.log(this);
// => window
});
$('button').on('click', e => console.log(this));
ES5
ES6
ES6
Slide 19
Slide 19 text
import
export
// export.js
export function foo() {
console.log('foo');
}
export function bar() {
console.log('bar');
}
// import.js
import { foo, bar } from './export.js';
foo();
// => foo
bar();
// => bar
ES6
Slide 20
Slide 20 text
Rest
Parameters
let x = 10, y = 20, z = 30;
function max(array) {
return Math.max.apply(null, array);
}
max([x, y, z]);
// => 30
function max(...array) {
return Math.max.apply(null, array);
}
max(x, y, z);
// => 30
ES6
ES6
Slide 21
Slide 21 text
Default
Parameters
function add(arg1, arg2) {
if (arg1 === undefined) {
arg1 = 0;
}
if (arg2 === undefined) {
arg2 = 0;
}
return arg1 + arg2;
}
function add(arg1 = 0, arg2 = 0) {
return arg1 + arg2;
}
ES5
ES6
Slide 22
Slide 22 text
let hundred = 100;
let multiple = function (x, y) {
return x * y;
}
console.log(`hundred is ${number}`);
// => hundred is 100
console.log(`hundred * 10 is ${multiple(number, 10)}`);
// => hundred * 10 is 1000
Template
Strings
ES6
Slide 23
Slide 23 text
function Human (message) {
this.message = message;
}
Human.prototype.hello = function () {
console.log(this.message);
}
class Human {
constructor(message) {
this.message = message;
}
hello() {
console.log(this.message);
}
}
Class
ES6
ES5
Slide 24
Slide 24 text
function* toThree() {
yield 1;
yield 2;
return 3;
}
console.log(toThree());
// => 1
console.log(toThree());
// => 2
console.log(toThree());
// => 3
Generator
Functions
ES6
Slide 25
Slide 25 text
Proxy
var person = {
firstName: 'Taro',
lastName: 'Tanaka'
};
var interceptor = {
set: function (target, name, value, receiver) {
console.log(name + ' is changed.');
target[name] = value;
}
get: function (target, name, receiver) {
return name + ' is ' target[name];
}
};
person = new Proxy(person, interceptor);
ES6
Slide 26
Slide 26 text
Symbol
var sym1 = Symbol();
var sym2 = Symbol("foo");
var sym3 = Symbol("foo");
Symbol("foo") === Symbol("foo");
// => false
ES6
Slide 27
Slide 27 text
Promise
new Promise(function (resolve, reject) {
resolve(10);
}).then(function (value) {
return value * 10;
}).then(function (value) {
console.log(value);
// 100
});
ES6
Slide 28
Slide 28 text
Set
WeakSet
var set1 = new Set([1, 2, 2, 3, 3, 3, 4, 4, 4, 4]);
// => [1, 2, 3, 4]
var set2 = new Set(set1);
var set3 = new Set(set1.entries());
var set4 = new Set(set1.keys());
ES6
Slide 29
Slide 29 text
Map
WeakMap
var arrayKey = [];
var map = new Map();
map.set(1, 'This is a value');
map.set(arrayKey, 'This is also value');
map.get(1);
// This is a value
map.get(arrayKey);
// This is also value
ES6
Slide 30
Slide 30 text
ECMAScript 6 ͱͷ͖߹͍ํ
https://www.flickr.com/photos/63771280@N08/18643164795/
Slide 31
Slide 31 text
※20156݄13࣌
×
×
Slide 32
Slide 32 text
ECMAScript 6 compatibility table
Slide 33
Slide 33 text
ES6͕ԿʹૉΒͯ͘͠
αϙʔτ͕ਐ·ͳ͍͜ͱʹ
ಋೖͰ͖ͳ͍ʁ
×
Slide 34
Slide 34 text
ES6 ES5
τϥϯεύΠϥΛ͏
ES6ͷίʔυΛίϯύΠϧͯ͠ɺαϙʔτ͍ͯ͠ͳ͍
ϒϥβͰ࣮ߦՄೳͳίʔυʹม͢Δ
Slide 35
Slide 35 text
Traceur Compiler
Slide 36
Slide 36 text
Babel
Slide 37
Slide 37 text
ݶఆ͞ΕͨڥͰ͏
αϙʔτ͕ൺֱతਐΜͰ͍ΔChromeFirefoxͷ
֦ுػೳͰ͋Εࢥ͏ଘ͑Δ
Slide 38
Slide 38 text
AltJSͰऔΓೖΕ͍ͯ͘
TypeScriptFlowͰES6ͷߏจαϙʔτ͕ਐΜͰ͍Δ
Slide 39
Slide 39 text
Node.js 0.12ʙ
ES6ͷػೳ͕--harmonyϑϥά͖Ͱར༻Մೳ
iojsͳΒϑϥάෆཁʹͳ͍ͬͯΔ
Slide 40
Slide 40 text
·ͱΊ
Slide 41
Slide 41 text
ϒϥβαϙʔτ͕
ेʹͳΔͷ·ͩ·ͩઌͷ…
Slide 42
Slide 42 text
ཧ༝Λ͚ͭͯΒͳ͍ؒʹ
࣍ͳΔ༷(ES7ɾES8)͕ग़ͯ͘Δ
Slide 43
Slide 43 text
͑Δػೳ͔ΒঃʑʹऔΓೖΕͯ
ࠓͷ͏ͪʹ׳Ε͍ͯ͘
Slide 44
Slide 44 text
͓ΘΓ
+ShogoSensui
1000ch
1000ch