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

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

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