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

0d605a3350dd7e91b8136aecffd5ceeb?s=47 Shogo Sensui
September 29, 2015

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

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

0d605a3350dd7e91b8136aecffd5ceeb?s=128

Shogo Sensui

September 29, 2015
Tweet

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