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
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 /VNFSJD
    4FQBSBUPST #JH*OU 0CKFDUGSPN&OUSJFT 4USJOHNBUDI"MM *OUM "1*T HMPCBM5IJT "SSBZTPSU UPQMFWFM
    BXBJU 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