Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introducing ECMAScript 2016

ikkou
June 21, 2016

Introducing ECMAScript 2016

ikkou

June 21, 2016
Tweet

More Decks by ikkou

Other Decks in Technology

Transcript

  1. Introducing ES2016

    View Slide

  2. Meguro.es #4 @Wantedly
    2016/06/21

    View Slide

  3. Thank you Wantedly !!

    View Slide

  4. PR::We are hiring !!

    View Slide

  5. PR::We are hiring !!

    View Slide

  6. whoami
    • @ikkou
    • Crea+ve Technology Group Manager
    • Love Front-end, especially Web VR
    • g1983ers
    • Meguro.es, Organizer
    • VR Tech Tokyo, Organizer

    View Slide

  7. Meguro.es is Awesome JavaScript Community
    • 2016/04/19 Meguro.es #3 @Drecom
    • 2016/02/10 Meguro.es #2 @Drecom
    • 2015/12/08 Meguro.es #1 @Drecom

    View Slide

  8. PR::VR Tech Tokyo
    • VR Tech Tokyo is Awesome VR Developer Community.
    • 2016/07/27 VR Tech Tokyo #2 • 2016/05/26 VR Tech Tokyo #1

    View Slide

  9. Introducing ES2016

    View Slide

  10. ES2016͜ͱECMAScript 2016͕
    6݄17೔ʹϦϦʔε͞Ε·ͨ͠!

    View Slide

  11. View Slide

  12. ES2016? ES7?
    Please stop referring to proposed JavaScript features as ES7
    So I’m not the first to remind everyone and won’t be the last, but
    now that feature list for ES2016 aka ES7 is out, and doesn’t
    actually include any of the features most people talk about, it’s
    officially Cme to just stop using ES7 to mean “any proposed feature
    that may or may not even make it”.1
    — Jay Phelps
    1 Array.prototype.includes()͕ES2016ʹೖΓ·ͨ͠Ͷ - Qiita

    View Slide

  13. ES7ݴ͏ͳ໰୊
    ECMAScriptͷ৽͍͠࢓༷ࡦఆϓϩηεͷෆཧղ΍աڈͷܦҢ͔Β
    "ES7 Decorator" ΍ "ES7 Async/Await" ͱ͍͏ݴ༿͕࢖ΘΕ͕ͪͱ
    ͍͏໰୊͕͋ͬͨɻ͍Α͍ΑES7ͷػೳηοτ͕֬ఆͯ͠໌Β͔
    ͳޡ༻ͱݴ͑ΔϨϕϧʹͳ͖ͬͯͨͷͰɺ͕͢͞ʹ΋͏࢖͏΂͖
    Ͱͳ͍ɻ2
    — @teppeis
    2 ref. ES2016ͷ௥Ճػೳ͕ܾఆɺ͋Δ͍͸ES7ݴ͏ͳ໰୊

    View Slide

  14. ͱ͍͏Θ͚ͰES7ͱ͍͏ݺশ͸࢖Θͣ
    ES2016ͱ͍͏ݺশΛ࢖͍·͠ΐ͏

    View Slide

  15. ES2016Ͱ௥Ճ͞Εͨػೳ
    • Array.prototype.includes
    • exponen3a3on (**) operator
    ES2015Ͱ͸υόͬͱͨ͘͞Μͷػೳ͕௥Ճ͞Ε·͕ͨ͠ɺ
    ES2016Ͱ௥Ճ͞Εͨػೳ͸্هͷ2͚ͭͩͰ͢ɻ
    ೖΔͱࢥΘΕ͍ͯͨAsync/Await͸ೖΓ·ͤΜͰͨ͠ɻ

    View Slide

  16. ϒϥ΢βରԠͷঢ়گ
    ECMAScript Next compa2bility tableΛࢀর
    • Array.prototype.includes
    • Chrome, Firefox, Edge 14+, Safari 9+
    • exponenAaAon (**) operator
    • Chrome 52+, Edge 14+

    View Slide

  17. Array.prototype.includes ϝιου

    View Slide

  18. ಛఆͷཁૉ͕഑ྻʹؚ·Ε͍ͯΔ͔
    Ͳ͏͔Λtrue·ͨ͸falseͰฦ͢

    View Slide

  19. indexOf()ϝιου࣌୅
    var ary = [ 1, 2, NaN ]
    ary.indexOf( 2 ) != -1 // true
    ary.indexOf( NaN ) != -1 // false

    View Slide

  20. includes()ϝιου࣌୅
    var ary = [ 1, 2, NaN ]
    ary.includes(2); // true
    ary.includes('2'); // false
    ary.includes(3); // false
    ary.includes(1, 1); // false
    ary.includes(2, -1); // false
    ary.includes(NaN); // true

    View Slide

  21. includesͱindexOf͸NaNͷѻ͍͕ҟͳΔ
    var ary = [ 1, 2, NaN ]
    ary.indexOf( NaN ) != -1 // false
    ary.includes(NaN); // true

    View Slide

  22. ͪͳΈʹ
    Meguro.es #1Ͱ@Layzieࢯ͕tc39/ecma262஌ͬͯ·͔͢?ͱ͍
    ͏ൃදΛͨ͠ࡍʹɺ͜ͷArray.prototype.includes()ϝιο
    υʹݴٴ͍ͯ͠·ͨ͠ɻ1
    ͦͯ͜͠ͷ࣌ʹυϥϑτʹೖͬͨͱ͍͏Θ͚ͰɺMeguro.esͱ
    ECMAScript͸ԕ͔ΒͣԿΒ͔ͷؔ܎ੑ͕ඍϨଘ……ɻ
    1 Array.prototype.includes()͕ES2016ʹೖΓ·ͨ͠Ͷ - Qiita

    View Slide

  23. exponen&a&on (**) operator

    View Slide

  24. Math.pow()ΑΓ΋γϯϓϧʹ
    ΂͖৐ܭࢉΛॻ͚ΔΦϖϨʔλʔ

    View Slide

  25. Math.pow࣌୅
    // 2ͷ10৐
    > Math.pow(2, 10);
    > 1024
    // 10ͷ10৐
    > Math.pow(10, 10);
    > 10000000000

    View Slide

  26. Exponentiation Operator࣌୅
    // 2ͷ10৐
    > 2 ** 10
    > 1024
    // 10ͷ10৐
    > 10 ** 10
    > 10000000000
    // equal a = a * a;
    > let a = 2;
    > a **= 10;
    > 1024

    View Slide

  27. γϯϓϧʹॻ͚Δ!

    View Slide

  28. ͚ͩͲ·ͩରԠϒϥ΢β͕
    গͳ͍ͷͰBabel౳ඞਢ!

    View Slide

  29. ·ͱΊ
    • ECMAScript 2016͕6݄17೔ʹϦϦʔε͞Ε·ͨ͠
    • ͜Ε·ͰͷES5ͷΑ͏ʹES7ɺͱ͸ݴΘͳ͍Ͱ͍ͩ͘͞
    • ES2016Ͱ͸Լهͷ2ͭͷػೳ͕௥Ճ͞Ε·ͨ͠
    • Array.prototype.includes ϝιου
    • exponen8a8on (**) operator

    View Slide