Google I/O ’19から見る新しいJavaScript

Meguro.es # 21の資料です。
https://meguroes.connpass.com/event/125499/

資料ではtop-level awaitがStage2になっていますがStage3になりました。

Transcript

1. Google I/O’19͔ΒݟΔ
   ৽͍͠+BWB4DSJQU
   M e g u r o . e s # 2 1
   2 0 1 9 / 0 6 / 0 6
   @ t o s h i - t o m a
   

   View Slide

2. About Me
   Toshihisa Tomatsu
   @toshi-toma
   @toshi__toma
   

   View Slide

3. “What’s new in JavaScript (Google I/O ’19)”
   

   View Slide

4. What’s new in JavaScript
   ৽͍͠ϓϩϙʔβϧͷػೳΛ͍͔ͭ͘঺հ
   JavaScript͸ͲΜͲΜਐԽ͍ͯ͠Δͧʂ
   V8ʹΑΔJavaScriptͷ࠷దԽ
   ࠃࡍԽରԠ΍ඇಉظॲཧʹ͓͚Δػೳ͕͍͔ͭ͘
   

   View Slide

5. ঺հ͞Ε͍ͯͨϓϩϙʔβϧ
   Array#{flat, flatMap}
   Private Class Fields
   Numeric Separators
   ؾʹͳͬͨ಺༰Λ͍͔ͭ͘঺հ
   BigInt
   Object.fromEntries
   String#matchAll
   Intl.*APIs
   globalThis
   Array#sort
   top-level await WeakRef Promise.{allSettled, any}
   ৽͍͠Syntax΍ඇಉظॲཧ
   ʹؔ͢ΔAPI, ࠃࡍԽରԠ etc
   

   View Slide

6. Private Class Fields
   1
   Chrome, Node.jsͰαϙʔτ
   

   View Slide

7. Private Class Fields
   γϟʔϓ
   Λ͚ͭΔͱ$MBTTͷ1SJWBUFϑΟʔϧυ
   ͜Ε·Ͱ͸ΞϯμʔείΞ @
   Ͱ1SJWBUFΛදݱ͍ͯͨ͠
   ͨͩ͠ɺγεςϜతͳڧ੍ྗ͸ͳ͍
   Stage 3
   

   View Slide

8. Class Fields
   https://github.com/tc39/proposal-class-fields
   

   View Slide

9. Private Class Fields
   https://github.com/tc39/proposal-class-fields#private-fields
   

   View Slide

10. ࢀߟ
    Private Class Field ͷಋೖʹ൐͏ JS ͷߏจ֦ு
    https://blog.jxck.io/entries/2019-03-14/private-class-
    field.html
    ES Class FieldsͷϓϥΠϕʔτϑΟʔϧυ͕ϋογϡͳมଶه๏ͳͷ͸ԿͰͳ
    Μͩͥʁ
    https://gist.github.com/teppeis/
    06c2b7e97c7d67684c3d3c94159893f3
    

    View Slide

11. Numeric Separators
    2
    Chrome 75 & BabelͰαϙʔτ
    

    View Slide

12. Numeric Separators
    ඇৗʹେ͖ͳ਺ࣈͷϦςϥϧ͸ਓؒͷ໨ʹ͸ݫ͍͠
    ಡΈ΍͢͞Λ޲্ͤ͞ΔͨΊʹ @
    ΞϯμʔείΞ۠੾ΓͰදݱ
    10000000000000100000000000000230400000000000000
    Stage 3
    

    View Slide

13. Numeric Separators
    https://github.com/tc39/proposal-numeric-separator
    

    View Slide

14. Array#{flat, flatMap}
    3
    ChromeɺFirefoxɺSafariɺNode.jsͰαϙʔτ
    

    View Slide

15. Array. prototype.flat
    flat()͸σϑΥϧτͰ1֊૚͚ͩల։ͯ͘͠ΕΔ
    ೚ҙͷ਺ࣈΛ౉͢͜ͱͰͦͷਂ͞·Ͱ࠶ؼతʹల։͢Δɻ
    ES2019
    

    View Slide

16. Array. prototype.flatMap
    ഑ྻΛNBQʹͯ͠தؒॲཧΛͯ͠ɺ͔ͦ͜ΒGMBUʹ͢Δ
    ύλʔϯ͸ҰൠతʹΑ͘ߦΘΕΔ
    [1, 2, 3].map(x => [x, x]).flat(); // [1, 1, 2, 2, 3, 3]
    ES2019
    [1, 2, 3].flatMap(x => [x, x]); // [1, 1, 2, 2, 3, 3]
    

    View Slide

17. Object.fromEntries
    4
    ChromeɺFirefoxɺSafariɺNode.jsͰαϙʔτ
    

    View Slide

18. Object.fromEntries
    Object.entriesͰkeyͱvalueͷϖΞͷ഑ྻΛੜ੒
    Ͱ͖ΔɻͦͷٯΛͰ͖Δͷ͕fromEntries
    ࢖͍Ͳ͜Ζͱͯ͠͸ɺLFZͱWBMVFʹରͯ͠GJMUFSͳͲͰԿ͔

    ͠ΒͷॲཧΛͯ͠ɺͦͷ݁ՌΛ0CKFDUʹ໭͍ͨ͠έʔεͱ͔
    ES2019
    

    View Slide

19. Promise.allSettled
    5
    Chrome76ͱFirefox NightlyͰαϙʔτ
    

    View Slide

20. Promise.allSettled
    ෳ਺ͷ1SPNJTFΛ഑ྻͰ౉͢έʔεͷ৽͍͠"1*
    ͱʹ͔͘શ෦࣮ߦ͢Δ
    ͲΕ͔ࣦഊͨ͠ͱͯ͠΋͢΂ͯͷ1SPNJTFΛ࣮ߦͯ͠

    ͦͷ݁ՌΛ଴ͭ

    (Promise.allͷ৔߹͸ͲΕ͔ࣦഊͨ͠Βɺͦͷ࣌఺Ͱऴྃ)
    Stage 3
    

    View Slide

21. Promise.allSettled
    Stage 3
    

    View Slide

22. Promise.any
    6
    

    View Slide

23. Promise.any
    ෳ਺ͷ1SPNJTFΛ഑ྻͰ౉͢έʔεͷ৽͍͠"1*
    Promise͕ͲΕ͔1ͭͰ΋resolve͞ΕͨΒͦͷ࣌఺Ͱऴྃ
    (Promise.race͸reject΋ؚΉ)
    Stage 1
    ͲΕͰ΋͍͍͔ΒҰͭͰ΋੒ޭͨ͠Β
    

    View Slide

24. top-level await
    6
    

    View Slide

25. top-level await
    ͍·ͩͱɺBTZODؔ਺Ͱϥοϓͯ͋͛ͯ͠ݺͼग़͢ඞཁ͕͋Δ
    τοϓϨϕϧͰBXBJU͕ॻ͚Δ
    ChromeͷDevToolsͷίϯιʔϧͰ͸ར༻Մೳ
    Stage2
    

    View Slide

26. "SSBZ\GMBU GMBU.BQ^
    1SJWBUF$MBTT'JFMET
    /VNFSJD4FQBSBUPST
    #JH*OU
    0CKFDUGSPN&OUSJFT
    4USJOHNBUDI"MM
    *OUM"1*T
    HMPCBM5IJT
    "SSBZTPSU
    UPQMFWFMBXBJU
    8FBL3FG
    1SPNJTF\BMM4FUUMFE BOZ^
    

    View Slide

27. ৽͍͠+BWB4DSJQU
    ࠓޙ࢖͑ΔΑ͏ʹͳΓͦ͏ͳ4ZOUBY΍"1*͕Θ͔ͬͨ
    ͲΜͲΜศརʹͳΓͦ͏
    ֤1SPQPTBMͷ಺༰΍Ϟνϕʔγϣϯ͸(JU)VC্Ͱ஌Εͨ
    ·ͣ͸QSPQPTBMTΛݟΔͷ͕ྑͦ͞͏

    https://github.com/tc39/proposals
    ࠓճ͸1SPQPTBMͷഎܠΛௐ΂Εͳ͔ͬͨͷͰ

    ࣍͸ͳͥͦͷ1SPQPTBM͕ੜ·Εͨͷ͔ௐ΂Δ
    

    View Slide

28. Thanks!
    

    View Slide

29. ࢀߟϦϯΫ
    https://youtu.be/c0oy0vQKEZE
    https://jsprimer.net/basic/ecmascript/
    https://github.com/tc39/proposal-class-fields
    https://github.com/tc39/proposal-numeric-separator
    https://tc39.github.io/proposal-flatMap/
    https://tc39.github.io/proposal-object-from-entries/
    https://github.com/tc39/proposal-promise-allSettled
    https://github.com/tc39/proposal-promise-any
    https://github.com/tc39/proposal-top-level-await
    

    View Slide