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

2015年9月29日に行われた第60回HTML5とか勉強会の「これからのJavaScriptの話 そしてES7へ・・・」のセッションの資料です。

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