これからのJavaScriptの話 そしてES7へ・・・ / JavaScript in Future

Transcript

1. ͜Ε͔ΒͷJavaScriptͷ࿩ ͦͯ͠ES7΁ɾɾɾ ୈ60ճ HTML5ͱ͔ษڧձ by 1000ch

2. 1000ch

3. Profile CyberAgent, Inc. Software Engineer HTML΋ͱ͍Webٕज़શൠ iOS + Mac

4. ECMAScriptͱJavaScript

5. JavaScriptര஀ 1995೥ Brendan Eichࢯ͕։ൃ Netscape Navigatorʹ౥ࡌ ͜ͷલੜ஀20प೥Λܴ͑ͨ

6. Brendan Eich Java͕ྲྀߦͬͯΔ͔Β JavaScriptʹ͠Α͏

7. ECMAScript ཚཱ͢ΔJS࣮૷ͷ౷Ұʹ޲͚ͯ ECMAͷTC39ͱ͍͏νʔϜͰࡦఆ ECMA-262ͱ͍͏จॻͰ؅ཧ

8. ECMAScript ActionScript JScript JavaScript

9. ࡢࠓͷJavaScript…

10. Node.jsͷ୆಄ αʔόʔαΠυϓϩάϥϜͱͯ͠ ϑϩϯτΤϯυͷϏϧυ؀ڥͱͯ͠ JSܦݧऀ͕औͬ෇͖қ͘ಈ࡞΋ߴ଎

11. WebͷϦονԽ ϒϥ΢βͰग़དྷΔ͜ͱ૿͑͗͢ ඞવతʹJSͰ΍Δ͜ͱ͕૿͑Δ

12. ʊਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹJavaScriptϑΟʔόʔɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^Y^Y^Yʉ

13. WebΞϓϦͷߴ౓Խ΍ ࣮ߦ؀ڥͷଟذԽʹ൐͍ ߋͳΔਐԽΛٻΊΒΕ͍ͯΔ

14. ES5

15. ES5 ES6 ES7

16. ES5 ES6 ES7 2009೥12݄ࡦఆ

17. ES5 ECMAScript 5th edition 2011೥6݄ʹΞοϓσʔτͰ5.1ʹ “use strict”΍Array.prototypeͷ֦ு

18. ES2015

19. ES5 ES6 ES7 2009೥12݄ࡦఆ

20. ES5 ES6 ES7 2015೥6݄ࡦఆ 2009೥12݄ࡦఆ

21. ES2015 ECMAScript 6th edition 2009೥ҎདྷͷେܕΞοϓσʔτ ௕Β͘๬·Ε͖ͯͨػೳ௥Ճ

22. ES2015 Syntax

23. let + const { let string = 'Lorem Ipsum'; }

    console.log(string); // => string is not defined const PI = 3.14; PI = 3.1415; // => PI has already been declared

24. class class Cat { constructor(name) { this.name = name; }

    meow() { console.log('meow'); } } new Cat('1000ch').meow(); // => meow

25. Arrow Function let double = function(number) { return number *

    2; }; double = (number) => { return number * 2; }; double = number => number * 2;

26. Default Parameters const process = (params = {}) => {

    console.log(params); }; process({ edition: 6 }); // => { edition: 6 } process(); // => {}

27. Array Rest + Spread const process = (...params) => {

    console.log(params); }; process(1); // => [1] process(1, 2, 3); // => [1, 2, 3]
 let array = [100, 1000, 1000]; let spread = [1, 10, ...array]; console.log(spread); // [1, 10, 100, 1000, 1000]

28. import + export // export.js export const PI = 3.14;

    export let foo = 'bar'; export default class Baz { constructor() { // ... } }; // import.js import Baz, { PI, foo } from './export';

29. Destruction const ARRAY = [1, 10, 100]; let [one, ten]

    = ARRAY; console.log(one, ten); // => 1, 10 const OBJECT = { foo: 1, bar: 10, baz: 100 }; let {foo, baz} = OBJECT; console.log(foo, baz); // => 1, 100

30. Template Strings let width = 3; let height = 4;

    let message = `area is ${width * height}`; console.log(message); // => area is 12

31. ES2015 Globals

32. Promise fetch('...').then(function (response) { return response.json(); }).then(function (json) { console.log(json);

    }).catch(function (error) { console.log(error); });

33. Proxy + Reflect let proxied = new Proxy({}, { get:

    function(target, name) { return Reflect.get(target, name); }, set: function(target, name, value, receiver) { console.log(`${name} setter is called`); Reflect.set(target, name, value, receiver); } }); proxied.foo = 100; // => foo setter is called console.log(proxied.foo); // => 100

34. Set + WeakSet let array = []; let object =

    []; let set = new Set(); set.add('string value'); set.add(object); console.log(set.has(array)); // => false console.log(set.has(object)); // => true

35. Map + WeakMap let array = []; let object =

    []; let map = new Map(); map.set(array, 'value for array'); map.set(object, 'value for object'); console.log(map.get(array)); // => value for array console.log(map.get(object)); // => value for object

36. Symbols let key1 = Symbol('foo'); let object = {}; object[key]

    = 'value for key1'; console.log(object['foo']); // => undefined console.log(object[key1]); // => value for key1 console.log(Object.keys(object)); // => []

37. ES2016

38. ES5 ES6 ES7 2015೥6݄ࡦఆ 2009೥12݄ࡦఆ

39. ES5 ES6 ES7 2015೥6݄ࡦఆ 2009೥12݄ࡦఆ 2016೥ࡦఆ?

40. ECMAScript 7th edition ES2016 Highly Experimental !!!

41. ES2016 Proposals

42. Exponentiation let squared = 2 ** 2; // same as:

    2 * 2 let cubed = 2 ** 3; // same as: 2 * 2 * 2 let a = 2; a **= 2; // same as: a = a * a; let b = 3; b **= 3; // same as: b = b * b * b;

43. SIMD (Stage var s1 = SIMD.Float32x4(1, 2, 3, 4); var

    s2 = SIMD.Float32x4(1, 2, 3, 4); var s3 = SIMD.Float32x4(2, 4, 6, 8); console.log(s1 === s2); // => true console.log(SIMD.Float32x4.add(s1, s2) === s3); // => true

44. Async Functions (Stage 2 fetch('...').then(function (response) { return response.json(); }).then(function

    (json) { console.log(json); }).catch(function (error) { console.log(error); }); try { let response = await fetch('...'); let json = await response.json(); console.log(json); } catch (error) { console.log(error); }

45. Object Rest + Spread (Stage 2 let { x, y,

    ...z } = { x: 1, y: 2, a: 3, b: 4 }; x; // 1 y; // 2 z; // { a: 3, b: 4 } let n = { x, y, ...z }; n; // { x: 1, y: 2, a: 3, b: 4 }

46. Decorators (Stage 1 function enumerable(value) { return function (target, key,

    descriptor) { descriptor.enumerable = value; return descriptor; } } class Foo { @enumerable(false) bar() { } @enumerable(true) baz() { } }

47. Compatibility…

48. ECMAScript Compatibility Table

49. WebKit Web Platform Status ECMAScript 6 support in Mozilla Chrome

    Platform Status Microsoft Edge Platform status

50. Babel

51. Traceur Compiler

52. ͓ΘΓ + +ShogoSensui " # 1000ch 1000ch