$30 off During Our Annual Pro Sale. View Details »

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

Shogo Sensui
September 29, 2015

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

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

Shogo Sensui

September 29, 2015
Tweet

More Decks by Shogo Sensui

Other Decks in Technology

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