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

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

Transcript

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

   View Slide

2. 1000ch
   

   View Slide

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

   View Slide

4. ECMAScriptͱJavaScript
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. ECMAScript
   ActionScript
   JScript
   JavaScript
   

   View Slide

9. ࡢࠓͷJavaScript…
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. ES5
    

    View Slide

15. ES5 ES6 ES7
    

    View Slide

16. ES5 ES6 ES7
    2009೥12݄ࡦఆ
    

    View Slide

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

    View Slide

18. ES2015
    

    View Slide

19. ES5 ES6 ES7
    2009೥12݄ࡦఆ
    

    View Slide

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

    View Slide

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

    View Slide

22. ES2015
    Syntax
    

    View Slide

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
    

    View Slide

24. class
    class Cat {
    constructor(name) {
    this.name = name;
    }
    meow() {
    console.log('meow');
    }
    }
    new Cat('1000ch').meow();
    // => meow
    

    View Slide

25. Arrow Function
    let double = function(number) {
    return number * 2;
    };
    double = (number) => {
    return number * 2;
    };
    double = number => number * 2;
    

    View Slide

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

    View Slide

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]
    

    View Slide

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';
    

    View Slide

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
    

    View Slide

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

    View Slide

31. ES2015
    Globals
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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));
    // => []
    

    View Slide

37. ES2016
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

41. ES2016
    Proposals
    

    View Slide

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;
    

    View Slide

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
    

    View Slide

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);
    }
    

    View Slide

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 }
    

    View Slide

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() { }
    }
    

    View Slide

47. Compatibility…
    

    View Slide

48. ECMAScript Compatibility Table
    

    View Slide

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

    View Slide

50. Babel
    

    View Slide

51. Traceur Compiler
    

    View Slide

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

    View Slide