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

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

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

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

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

Toshihisa Tomatsu

June 06, 2019
Tweet

More Decks by Toshihisa Tomatsu

Other Decks in Programming

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

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

    View full-size slide

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

    View full-size slide

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

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    ͦͷ݁ՌΛ଴ͭ

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

    View full-size slide

  21. Promise.allSettled
    Stage 3

    View full-size slide

  22. Promise.any
    6

    View full-size slide

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

    View full-size slide

  24. top-level await
    6

    View full-size slide

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

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

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

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

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

    View full-size slide

  28. ࢀߟϦϯΫ
    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 full-size slide