Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
いまからはじめるECMAScript 6 / Begin ECMAScript6
Shogo Sensui
June 13, 2015
Technology
0
520
いまからはじめるECMAScript 6 / Begin ECMAScript6
2015年6月13日に行われたHTML5オールスターズ勉強会の「いまからはじめるECMAScript 6」のセッションの資料です。
Shogo Sensui
June 13, 2015
Tweet
Share
More Decks by Shogo Sensui
See All by Shogo Sensui
1000ch
1
350
1000ch
0
320
1000ch
0
340
1000ch
0
340
1000ch
1
6.6k
1000ch
11
2.8k
1000ch
3
740
1000ch
9
7.6k
1000ch
8
6.9k
Other Decks in Technology
See All in Technology
koukyo1994
6
1.7k
pemugi
0
140
noriyukitakei
0
100
900groove
2
560
kaniza
0
120
free_world21
0
110
armaniacs
0
400
trafficbrain
0
220
hmatsu47
0
110
kanaugust
PRO
0
160
s_uryu
0
190
ryomasumura
0
130
Featured
See All Featured
jnunemaker
PRO
40
4.6k
morganepeng
18
1.2k
vanstee
117
4.9k
shpigford
165
19k
hannesfritz
28
950
holman
461
280k
chriscoyier
145
20k
iamctodd
19
2k
kneath
219
15k
lara
172
9.6k
sugarenia
233
860k
yeseniaperezcruz
302
31k
Transcript
͍·͔Β͡ΊΔECMAScript 6 by Shogo Sensui 2015.06.13 HTML5Φʔϧελʔζษڧձ https://www.flickr.com/photos/jakeandlindsay/5524669257
s Shogo Sensui a.k.a 1000ch
Profile WebϑϩϯτΤϯυΤϯδχΞ iOSωΠςΟϒΤϯδχΞ HTML5શൠ + Node.js + iOS/Mac #perfmatters
None
s ϑϩϯτΤϯυ ΤϯδχΞ ཆಡຊ
WEB+DB PRESS WebϑϩϯτΤϯυ ࠷લઢ
@cssradar @hiloki @t32k @1000ch @ahomu Frontend Weekly • ࠃ֎ͷϑϩϯτΤϯυใΛΩϡϨʔγϣϯ •
िʹҰਫ༵ʹ৴
@cssradar @hiloki @t32k @1000ch @ahomu Frontend Weekly • ࠃ֎ͷϑϩϯτΤϯυใΛΩϡϨʔγϣϯ •
िʹҰਫ༵ʹ৴ https://frontendweekly.tokyo
Agenda JavaScript ͱ ECMAScript ECMAScript 6 ͷओͳ৽ػೳ ECMAScript 6 ͱͷ͖߹͍ํ
·ͱΊ
JavaScript ͱ ECMAScript
1995ɺJavaScriptര Java͕ྲྀߦͬͯΔ͔Β JavaScriptͱ͍͏໊લʹ͠Α͏ Brendan Eichࢯ
ͳΜͩͱʁͬͪ͜JScriptͩʂ ͜Ε͕JavaScriptͩʂ ͯͯɺඪ४Խ͠Α͏…
ECMAScript JavaScript JScript ActionScript ඪ४Խ͞Εͨݴޠ༷ʢECMAScriptʣͱ ͦΕΛ࣮͢Δ֤ݴޠʢJavaScriptͳͲʣ ECMAScriptͷཱͪҐஔ
৭ʑͳҙݟ͕JavaScriptʹ Өڹ͖ͯͨ͠ etc…
ECMAScript 2015?
ECMAScript 6 ͷओͳ৽ػೳ https://www.flickr.com/photos/12355559@N03/18012486244
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
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
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
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
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
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
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
function* toThree() { yield 1; yield 2; return 3; }
console.log(toThree()); // => 1 console.log(toThree()); // => 2 console.log(toThree()); // => 3 Generator Functions ES6
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
Symbol var sym1 = Symbol(); var sym2 = Symbol("foo"); var
sym3 = Symbol("foo"); Symbol("foo") === Symbol("foo"); // => false ES6
Promise new Promise(function (resolve, reject) { resolve(10); }).then(function (value) {
return value * 10; }).then(function (value) { console.log(value); // 100 }); ES6
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
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
ECMAScript 6 ͱͷ͖߹͍ํ https://www.flickr.com/photos/63771280@N08/18643164795/
※20156݄13࣌ × ×
ECMAScript 6 compatibility table
ES6͕ԿʹૉΒͯ͘͠ αϙʔτ͕ਐ·ͳ͍͜ͱʹ ಋೖͰ͖ͳ͍ʁ ×
ES6 ES5 τϥϯεύΠϥΛ͏ ES6ͷίʔυΛίϯύΠϧͯ͠ɺαϙʔτ͍ͯ͠ͳ͍ ϒϥβͰ࣮ߦՄೳͳίʔυʹม͢Δ
Traceur Compiler
Babel
ݶఆ͞ΕͨڥͰ͏ αϙʔτ͕ൺֱతਐΜͰ͍ΔChromeFirefoxͷ ֦ுػೳͰ͋Εࢥ͏ଘ͑Δ
AltJSͰऔΓೖΕ͍ͯ͘ TypeScriptFlowͰES6ͷߏจαϙʔτ͕ਐΜͰ͍Δ
Node.js 0.12ʙ ES6ͷػೳ͕--harmonyϑϥά͖Ͱར༻Մೳ iojsͳΒϑϥάෆཁʹͳ͍ͬͯΔ
·ͱΊ
ϒϥβαϙʔτ͕ ेʹͳΔͷ·ͩ·ͩઌͷ…
ཧ༝Λ͚ͭͯΒͳ͍ؒʹ ࣍ͳΔ༷(ES7ɾES8)͕ग़ͯ͘Δ
͑Δػೳ͔ΒঃʑʹऔΓೖΕͯ ࠓͷ͏ͪʹ׳Ε͍ͯ͘
͓ΘΓ +ShogoSensui 1000ch 1000ch