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

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

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

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

E9ce07196f470caff07053e98a88fa9e?s=128

Toshihisa Tomatsu

June 06, 2019
Tweet

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
  2. About Me Toshihisa Tomatsu @toshi-toma @toshi__toma

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

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

  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
  6. Private Class Fields 1 Chrome, Node.jsͰαϙʔτ

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

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

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

  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
  11. Numeric Separators 2 Chrome 75 & BabelͰαϙʔτ

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

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

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

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

  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]
  17. Object.fromEntries 4 ChromeɺFirefoxɺSafariɺNode.jsͰαϙʔτ

  18. Object.fromEntries Object.entriesͰkeyͱvalueͷϖΞͷ഑ྻΛੜ੒ Ͱ͖ΔɻͦͷٯΛͰ͖Δͷ͕fromEntries ࢖͍Ͳ͜Ζͱͯ͠͸ɺLFZͱWBMVFʹରͯ͠GJMUFSͳͲͰԿ͔
 ͠ΒͷॲཧΛͯ͠ɺͦͷ݁ՌΛ0CKFDUʹ໭͍ͨ͠έʔεͱ͔ ES2019

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

  20. Promise.allSettled ෳ਺ͷ1SPNJTFΛ഑ྻͰ౉͢έʔεͷ৽͍͠"1* ͱʹ͔͘શ෦࣮ߦ͢Δ ͲΕ͔ࣦഊͨ͠ͱͯ͠΋͢΂ͯͷ1SPNJTFΛ࣮ߦͯ͠
 ͦͷ݁ՌΛ଴ͭ
 (Promise.allͷ৔߹͸ͲΕ͔ࣦഊͨ͠Βɺͦͷ࣌఺Ͱऴྃ) Stage 3

  21. Promise.allSettled Stage 3

  22. Promise.any 6

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

  24. top-level await 6

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

  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^
  27. ৽͍͠+BWB4DSJQU ࠓޙ࢖͑ΔΑ͏ʹͳΓͦ͏ͳ4ZOUBY΍"1*͕Θ͔ͬͨ ͲΜͲΜศརʹͳΓͦ͏ ֤1SPQPTBMͷ಺༰΍Ϟνϕʔγϣϯ͸(JU)VC্Ͱ஌Εͨ ·ͣ͸QSPQPTBMTΛݟΔͷ͕ྑͦ͞͏
 https://github.com/tc39/proposals ࠓճ͸1SPQPTBMͷഎܠΛௐ΂Εͳ͔ͬͨͷͰ
 ࣍͸ͳͥͦͷ1SPQPTBM͕ੜ·Εͨͷ͔ௐ΂Δ

  28. Thanks!

  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