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

by Toshihisa Tomatsu

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

About Me Toshihisa Tomatsu @toshi-toma @toshi__toma

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

঺հ͞Ε͍ͯͨϓϩϙʔβϧ 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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

ࢀߟ 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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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]

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Promise.allSettled Stage 3

Slide 22

Slide 22 text

Promise.any 6

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

top-level await 6

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Thanks!

Slide 29

Slide 29 text

ࢀߟϦϯΫ 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