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 full-size slide

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

    View full-size slide

  3. Thank you Wantedly !!

    View full-size slide

  4. PR::We are hiring !!

    View full-size slide

  5. PR::We are hiring !!

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

  9. Introducing ES2016

    View full-size slide

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

    View full-size slide

  11. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Array.prototype.includes ϝιου

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. γϯϓϧʹॻ͚Δ!

    View full-size slide

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

    View full-size slide

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

    View full-size slide