いまからはじめるECMAScript 6 / Begin ECMAScript6

2015年6月13日に行われたHTML5オールスターズ勉強会の「いまからはじめるECMAScript 6」のセッションの資料です。

Transcript

1. ͍·͔Β͸͡ΊΔECMAScript 6 by Shogo Sensui 2015.06.13 HTML5Φʔϧελʔζษڧձ https://www.flickr.com/photos/jakeandlindsay/5524669257
2. s Shogo Sensui a.k.a 1000ch
3. Profile WebϑϩϯτΤϯυΤϯδχΞ iOSωΠςΟϒΤϯδχΞ HTML5શൠ + Node.js + iOS/Mac #perfmatters
5. s ϑϩϯτΤϯυ ΤϯδχΞ ཆ੒ಡຊ
6. WEB+DB PRESS WebϑϩϯτΤϯυ ࠷લઢ
7. @cssradar @hiloki @t32k @1000ch @ahomu Frontend Weekly • ࠃ಺֎ͷϑϩϯτΤϯυ৘ใΛΩϡϨʔγϣϯ • िʹҰ౓ਫ༵೔ʹ഑৴
8. @cssradar @hiloki @t32k @1000ch @ahomu Frontend Weekly • ࠃ಺֎ͷϑϩϯτΤϯυ৘ใΛΩϡϨʔγϣϯ • िʹҰ౓ਫ༵೔ʹ഑৴ https://frontendweekly.tokyo
9. Agenda JavaScript ͱ ECMAScript ECMAScript 6 ͷओͳ৽ػೳ ECMAScript 6 ͱͷ෇͖߹͍ํ ·ͱΊ
10. JavaScript ͱ ECMAScript
11. 1995೥ɺJavaScriptര஀ Java͕ྲྀߦͬͯΔ͔Β JavaScriptͱ͍͏໊લʹ͠Α͏ Brendan Eichࢯ
12. ͳΜͩͱʁͬͪ͜͸JScriptͩʂ ͜Ε͕JavaScriptͩʂ ଴ͯ଴ͯɺඪ४Խ͠Α͏…
13. ECMAScript JavaScript JScript ActionScript ඪ४Խ͞Εͨݴޠ࢓༷ʢECMAScriptʣͱ ͦΕΛ࣮૷͢Δ֤ݴޠʢJavaScriptͳͲʣ ECMAScriptͷཱͪҐஔ
14. ৭ʑͳҙݟ͕JavaScriptʹ Өڹ͖ͯͨ͠ etc…
15. ECMAScript 2015?
16. ECMAScript 6 ͷओͳ৽ػೳ https://www.flickr.com/photos/12355559@N03/18012486244
17. 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
18. 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
19. 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
20. 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
21. 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
22. 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
23. 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
24. function* toThree() { yield 1; yield 2; return 3; } console.log(toThree()); // => 1 console.log(toThree()); // => 2 console.log(toThree()); // => 3 Generator Functions ES6
25. 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
26. Symbol var sym1 = Symbol(); var sym2 = Symbol("foo"); var sym3 = Symbol("foo"); Symbol("foo") === Symbol("foo"); // => false ES6
27. Promise new Promise(function (resolve, reject) { resolve(10); }).then(function (value) { return value * 10; }).then(function (value) { console.log(value); // 100 }); ES6
28. 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
29. 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
30. ECMAScript 6 ͱͷ෇͖߹͍ํ https://www.flickr.com/photos/63771280@N08/18643164795/
31. ※2015೥6݄13೔࣌఺ × ×
32. ECMAScript 6 compatibility table
33. ES6͕೗Կʹૉ੖Βͯ͘͠΋ αϙʔτ͕ਐ·ͳ͍͜ͱʹ͸ ಋೖͰ͖ͳ͍ʁ ×
34. ES6 ES5 τϥϯεύΠϥΛ࢖͏ ES6ͷίʔυΛίϯύΠϧͯ͠ɺαϙʔτ͍ͯ͠ͳ͍ ϒϥ΢βͰ΋࣮ߦՄೳͳίʔυʹม׵͢Δ
35. Traceur Compiler
36. Babel
37. ݶఆ͞Εͨ؀ڥͰ࢖͏ αϙʔτ͕ൺֱతਐΜͰ͍ΔChrome΍Firefoxͷ ֦ுػೳͰ͋Ε͹ࢥ͏ଘ෼࢖͑Δ
38. AltJSͰऔΓೖΕ͍ͯ͘ TypeScript΍FlowͰ͸ES6ͷߏจαϙʔτ͕ਐΜͰ͍Δ
39. Node.js 0.12ʙ ES6ͷػೳ͕--harmonyϑϥά෇͖Ͱར༻Մೳ iojsͳΒϑϥά΋ෆཁʹͳ͍ͬͯΔ
40. ·ͱΊ
41. ϒϥ΢βαϙʔτ͕ े෼ʹͳΔͷ͸·ͩ·ͩઌͷ࿩…
42. ཧ༝Λ͚ͭͯ΍Βͳ͍ؒʹ ࣍ͳΔ࢓༷(ES7ɾES8)͕ग़ͯ͘Δ
43. ࢖͑Δػೳ͔ΒঃʑʹऔΓೖΕͯ ࠓͷ͏ͪʹ׳Ε͍ͯ͘
44. ͓ΘΓ +ShogoSensui 1000ch 1000ch