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

いまからはじめるECMAScript 6 / Begin ECMAScript6

いまからはじめるECMAScript 6 / Begin ECMAScript6

2015年6月13日に行われたHTML5オールスターズ勉強会の「いまからはじめるECMAScript 6」のセッションの資料です。

Shogo Sensui

June 13, 2015
Tweet

More Decks by Shogo Sensui

Other Decks in Technology

Transcript

  1. ͍·͔Β͸͡ΊΔECMAScript 6
    by Shogo Sensui
    2015.06.13 HTML5Φʔϧελʔζษڧձ
    https://www.flickr.com/photos/jakeandlindsay/5524669257

    View Slide

  2. s
    Shogo Sensui
    a.k.a 1000ch

    View Slide

  3. Profile
    WebϑϩϯτΤϯυΤϯδχΞ
    iOSωΠςΟϒΤϯδχΞ
    HTML5શൠ + Node.js + iOS/Mac
    #perfmatters

    View Slide

  4. View Slide

  5. s
    ϑϩϯτΤϯυ
    ΤϯδχΞ
    ཆ੒ಡຊ

    View Slide

  6. WEB+DB PRESS
    WebϑϩϯτΤϯυ
    ࠷લઢ

    View Slide

  7. @cssradar @hiloki @t32k @1000ch @ahomu
    Frontend Weekly
    • ࠃ಺֎ͷϑϩϯτΤϯυ৘ใΛΩϡϨʔγϣϯ
    • िʹҰ౓ਫ༵೔ʹ഑৴

    View Slide

  8. @cssradar @hiloki @t32k @1000ch @ahomu
    Frontend Weekly
    • ࠃ಺֎ͷϑϩϯτΤϯυ৘ใΛΩϡϨʔγϣϯ
    • िʹҰ౓ਫ༵೔ʹ഑৴
    https://frontendweekly.tokyo

    View Slide

  9. Agenda
    JavaScript ͱ ECMAScript
    ECMAScript 6 ͷओͳ৽ػೳ
    ECMAScript 6 ͱͷ෇͖߹͍ํ
    ·ͱΊ

    View Slide

  10. JavaScript ͱ ECMAScript

    View Slide

  11. 1995೥ɺJavaScriptര஀
    Java͕ྲྀߦͬͯΔ͔Β
    JavaScriptͱ͍͏໊લʹ͠Α͏
    Brendan Eichࢯ

    View Slide

  12. ͳΜͩͱʁͬͪ͜͸JScriptͩʂ
    ͜Ε͕JavaScriptͩʂ
    ଴ͯ଴ͯɺඪ४Խ͠Α͏…

    View Slide

  13. ECMAScript
    JavaScript
    JScript ActionScript
    ඪ४Խ͞Εͨݴޠ࢓༷ʢECMAScriptʣͱ
    ͦΕΛ࣮૷͢Δ֤ݴޠʢJavaScriptͳͲʣ
    ECMAScriptͷཱͪҐஔ

    View Slide

  14. ৭ʑͳҙݟ͕JavaScriptʹ
    Өڹ͖ͯͨ͠
    etc…

    View Slide

  15. ECMAScript 2015?

    View Slide

  16. ECMAScript 6 ͷओͳ৽ػೳ
    https://www.flickr.com/photos/12355559@N03/18012486244

    View Slide

  17. let
    const
    {
    var foo = 10;
    let bar = 100;
    const baz = 1000;
    console.log(foo, bar, baz);
    // => 10, 100, 1000
    }
    console.log(foo, bar, baz);
    // => 10, undefined, undefined
    ES6

    View Slide

  18. Arrow
    Functions
    $('button').on('click', function (e) {
    console.log(this);
    // => button
    });
    $('button').on('click', (e) => {
    console.log(this);
    // => window
    });
    $('button').on('click', e => console.log(this));
    ES5
    ES6
    ES6

    View Slide

  19. import
    export
    // export.js
    export function foo() {
    console.log('foo');
    }
    export function bar() {
    console.log('bar');
    }
    // import.js
    import { foo, bar } from './export.js';
    foo();
    // => foo
    bar();
    // => bar
    ES6

    View Slide

  20. Rest
    Parameters
    let x = 10, y = 20, z = 30;
    function max(array) {
    return Math.max.apply(null, array);
    }
    max([x, y, z]);
    // => 30
    function max(...array) {
    return Math.max.apply(null, array);
    }
    max(x, y, z);
    // => 30
    ES6
    ES6

    View Slide

  21. Default
    Parameters
    function add(arg1, arg2) {
    if (arg1 === undefined) {
    arg1 = 0;
    }
    if (arg2 === undefined) {
    arg2 = 0;
    }
    return arg1 + arg2;
    }
    function add(arg1 = 0, arg2 = 0) {
    return arg1 + arg2;
    }
    ES5
    ES6

    View Slide

  22. let hundred = 100;
    let multiple = function (x, y) {
    return x * y;
    }
    console.log(`hundred is ${number}`);
    // => hundred is 100
    console.log(`hundred * 10 is ${multiple(number, 10)}`);
    // => hundred * 10 is 1000
    Template
    Strings
    ES6

    View Slide

  23. function Human (message) {
    this.message = message;
    }
    Human.prototype.hello = function () {
    console.log(this.message);
    }
    class Human {
    constructor(message) {
    this.message = message;
    }
    hello() {
    console.log(this.message);
    }
    }
    Class
    ES6
    ES5

    View Slide

  24. function* toThree() {
    yield 1;
    yield 2;
    return 3;
    }
    console.log(toThree());
    // => 1
    console.log(toThree());
    // => 2
    console.log(toThree());
    // => 3
    Generator
    Functions
    ES6

    View Slide

  25. Proxy
    var person = {
    firstName: 'Taro',
    lastName: 'Tanaka'
    };
    var interceptor = {
    set: function (target, name, value, receiver) {
    console.log(name + ' is changed.');
    target[name] = value;
    }
    get: function (target, name, receiver) {
    return name + ' is ' target[name];
    }
    };
    person = new Proxy(person, interceptor);
    ES6

    View Slide

  26. Symbol
    var sym1 = Symbol();
    var sym2 = Symbol("foo");
    var sym3 = Symbol("foo");
    Symbol("foo") === Symbol("foo");
    // => false
    ES6

    View Slide

  27. Promise
    new Promise(function (resolve, reject) {
    resolve(10);
    }).then(function (value) {
    return value * 10;
    }).then(function (value) {
    console.log(value);
    // 100
    });
    ES6

    View Slide

  28. Set
    WeakSet
    var set1 = new Set([1, 2, 2, 3, 3, 3, 4, 4, 4, 4]);
    // => [1, 2, 3, 4]
    var set2 = new Set(set1);
    var set3 = new Set(set1.entries());
    var set4 = new Set(set1.keys());
    ES6

    View Slide

  29. Map
    WeakMap
    var arrayKey = [];
    var map = new Map();
    map.set(1, 'This is a value');
    map.set(arrayKey, 'This is also value');
    map.get(1);
    // This is a value
    map.get(arrayKey);
    // This is also value
    ES6

    View Slide

  30. ECMAScript 6 ͱͷ෇͖߹͍ํ
    https://www.flickr.com/photos/63771280@N08/18643164795/

    View Slide

  31. ※2015೥6݄13೔࣌఺
    ×
    ×

    View Slide

  32. ECMAScript 6 compatibility table

    View Slide

  33. ES6͕೗Կʹૉ੖Βͯ͘͠΋
    αϙʔτ͕ਐ·ͳ͍͜ͱʹ͸
    ಋೖͰ͖ͳ͍ʁ
    ×

    View Slide

  34. ES6 ES5
    τϥϯεύΠϥΛ࢖͏
    ES6ͷίʔυΛίϯύΠϧͯ͠ɺαϙʔτ͍ͯ͠ͳ͍
    ϒϥ΢βͰ΋࣮ߦՄೳͳίʔυʹม׵͢Δ

    View Slide

  35. Traceur Compiler

    View Slide

  36. Babel

    View Slide

  37. ݶఆ͞Εͨ؀ڥͰ࢖͏
    αϙʔτ͕ൺֱతਐΜͰ͍ΔChrome΍Firefoxͷ
    ֦ுػೳͰ͋Ε͹ࢥ͏ଘ෼࢖͑Δ

    View Slide

  38. AltJSͰऔΓೖΕ͍ͯ͘
    TypeScript΍FlowͰ͸ES6ͷߏจαϙʔτ͕ਐΜͰ͍Δ

    View Slide

  39. Node.js 0.12ʙ
    ES6ͷػೳ͕--harmonyϑϥά෇͖Ͱར༻Մೳ
    iojsͳΒϑϥά΋ෆཁʹͳ͍ͬͯΔ

    View Slide

  40. ·ͱΊ

    View Slide

  41. ϒϥ΢βαϙʔτ͕
    े෼ʹͳΔͷ͸·ͩ·ͩઌͷ࿩…

    View Slide

  42. ཧ༝Λ͚ͭͯ΍Βͳ͍ؒʹ
    ࣍ͳΔ࢓༷(ES7ɾES8)͕ग़ͯ͘Δ

    View Slide

  43. ࢖͑Δػೳ͔ΒঃʑʹऔΓೖΕͯ
    ࠓͷ͏ͪʹ׳Ε͍ͯ͘

    View Slide

  44. ͓ΘΓ
    +ShogoSensui
    1000ch
    1000ch

    View Slide