Introducing ECMAScript 2016

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