--- title: ES2020の仕様には、こんなのが追加されました! tags: ECMAScript ECMAScript2020 JavaScript author: ryoya41 slide: false --- # はじめに Ecma International で定められている ES2020 について2020年6月に[リリース](https://github.com/tc39/ecma262/releases/tag/es2020)されたので改めてまとめたいと思います。 仕様については[こちら](https://www.ecma-international.org/ecma-262/11.0/)に記載されています。 # Optional Chaining Optional Chaining は、 `?` を使って、 `null` や `undefined` の要素にも安全にアクセスできる仕組みです。 ```javascript const obj = { a: 1, b: { ba: 21 bb: 22 } } console.log(obj.b?.ba) // => 21 console.log(obj.b?.bc) // => undefined console.log(obj.c?.ca) // => undefined console.log(obj.d?.da?.daa?.daaa) // => undefined ``` このように要素がない場合は、エラーになることなく、 `undefined` が返されます。 # Nullish coalescing Operator Nullish coalescing Operator は、 `??` を使って、変数が `null` の場合の値を指定することができます。 ```javascript const getValue = (val) => val || 'default' const getValue2 = (val) => val ?? 'default' console.log(getValue('')) // => 'default' console.log(getValue(0)) // => 'default' console.log(getValue2('')) // => '' console.log(getValue2(0)) // => 0 console.log(getValue2('hoge')) // => 'hoge' console.log(getValue2(null)) // => 'default' ``` このように、 `val` が `false` 判定される場合には、 `'default'` が返されます。 # Dynamic import Dynamic import は、 ```javascript:module.js export const hoge = "hoge!!" ``` ```javascript import("./module.js").then(module => { console.log(module.hoge) // => hoge!! }) setTimeout(async () => { const { hoge } = await import("./module.js") console.log(hoge) // => hoge!! }, 1000) ``` このように Dynamic import では、 `Promise` の形でモジュールを読み込むことができます。 なので、使いたい時だけモジュール非同期で `import` して使用するということも可能です。 # Promise.allSettled Promise.allSettled は、複数の `Promise` を扱うことができます。 `Promise.all` と違い、複数のうちどれか1つが `reject` されても他の `Promise` は問題なく実行されます。 ```javascript const promiseList = [ Promise.resolve("ok"), Promise.resolve("ok"), Promise.reject("ng"), Promise.resolve("ok") ] Promise.all(promiseList).then( resolve => console.log(`resolve: ${resolve}`), reject => console.log(`reject: ${reject}`) ) // => reject: ng Promise.allSettled(promiseList).then( resolveList => { console.log("resolve") for (const resolve of resolveList) { console.log(resolve) } }, reject => { console.log("reject") console.log(reject) } ) // => resolve // => { status: 'fulfilled', value: 'ok' } // => { status: 'fulfilled', value: 'ok' } // => { status: 'rejected', reason: 'ng' } // => { status: 'fulfilled', value: 'ok' } ``` # String#matchAll String#matchAll は、対象文字列について、正規表現で一致したものをイテレータで返します。 ```javascript const text = "Test String"; const regex = /t/g; for (const match of text.matchAll(regex)) { console.log(match) } // => [ 't', index: 3, input: 'Test String', groups: undefined ] // => [ 't', index: 6, input: 'Test String', groups: undefined ] ``` このように、 `regex` にマッチしたものをイテレータで回すことができるので便利です。 # globalThis globalThis は、ウェブブラウザでもNode.jsもグローバルオブジェクトを参照できるオブジェクトです。 ```html ``` ```javascript console.log(globalThis); // Global が出力されます ``` このようにウェブブラウザ・Node.jsで共通のグローバルオブジェクトを参照できます。 # BigInt BigInt は、 Number より大きな整数 2^53 以上の整数を扱えるオブジェクトです。 number を使うと ```javascript console.log(Number.MAX_SAFE_INTEGER) // => 9007199254740991 console.log(Number.MAX_SAFE_INTEGER + 1) // => 9007199254740992 console.log(Number.MAX_SAFE_INTEGER + 2) // => 9007199254740992 // (9007199254740993ではない) ``` このように誤差が生じてしまいます。 BigInt を使うことでこのような値も正しく扱うことができます。 BigInt は、数値に `n` を追加することで使用することができます。 ```javascript console.log(BigInt(Number.MAX_SAFE_INTEGER) + 2n) // => 9007199254740993 ``` # Well defined for-in order 従来の ECMAScript の使用では、 `for-in` の順序は保証されていませんでしたが、順序が固定されるようになりました。 ```javascript const data = { name: "hoge", value: 100, text: "hoge" } for (const key in data) { console.log(`${key}: ${data[key]}`) } // => name: hoge // => value: 100 // => text: hoge ``` # Module Namespace Exports Module Namespace Exports は、 `import` してきたものをそのまま `export` することができます。 ```javascript import * as utils from './utils.js' export { utils } ``` これと同じことが以下のように書くことができます。 ```javascript export * as utils from './utils.js' ``` # import.meta import.meta を使うことで、 import したモジュールのメタ情報にアクセスできます。 ```html ``` ```javascript console.log(import.meta) // => { url: "file:///home/user/module.js" } ``` # さいごに いかがだったでしょうか? いろんな便利な機能が追加されたように思います。 それぞれ駆使して、より良いソースコードをかけるようになりましょう! # 参考 https://ics.media/entry/200128/ https://shisama.hatenablog.com/entry/2019/12/01/080000#ES2020 https://www.freecodecamp.org/news/javascript-new-features-es2020/