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

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

4. None

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