ES2020 確定した機能セット

原文(投稿日：2020/04/04)へのリンク

TC39委員会は先頃、JavaScript言語への最終的な機能セットを含むECMAScript 2020 (一般にES2020として知られている) 候補を承認した。ES2020の候補は、今年6月にECMA総会によるレビューと承認を受ける予定である。新機能のほとんどはすでにブラウザに実装されており、Babel JavaScriptパーサで変換できる。

ES2020仕様で導入されるのは次のとおりである。Stringsに追加されたmatchAllメソッド、グローバル正規表現によって生成されたすべての一致オブジェクトのイテレータを生成する。import()、動的指定子を使用してモジュールを非同期でインポートする構文。BigInt、任意精度の整数を操作するため。Promise.allSettled、短絡しない新しいPromiseコンビネータ。globalThis、グローバルのthis値にアクセスするための普遍的な方法。モジュール内で使用するためのexport * as ns from 'module'構文。for-in、列挙順序の標準化の向上。import.meta、モジュールに関するコンテキスト情報を含む可能性のある、モジュールで使用可能な、ホストが設定されたオブジェクト。「nullish」値（nullまたはundefined）の処理を改善する2つの新しい構文機能: nullish coalescing、値選択演算子。optional chaining、アクセス/呼び出しする値がnullの場合に短絡するプロパティアクセスおよび関数呼び出し演算子。

Dynamic importsは、バンドルアプリケーションのコード分割フェーズによって生成されたモジュールを動的にロードするために使用できる。Dynamic importsは、IE11を除くほとんどのブラウザでサポートされている。import()を使用すると、開発者は、動的に構築されたモジュール (moduleSpecifier = dir + 'my-math.mjs') を非同期で（promiseが返され）いつでも（たとえば、コード内のどこか vs モジュールの最上位のみで）インポートできる:

const dir = './lib/';
const moduleSpecifier = dir + 'my-math.mjs';

async function loadConstant() {
  const myMath = await import(moduleSpecifier);
  const result = myMath.LIGHTSPEED;
  assert.equal(result, 299792458);
  return result;
}

import.metaは、現在のモジュールに関するホスト固有のメタデータを保持するオブジェクトである。今最も興味深いプロパティはurlである。これは、現在のモジュールファイルのURLを含む文字列である。そのURLがあれば、開発者は関連モジュールをインポートしたり、現在のモジュールに応じて条件付きで操作を実行したりできる。次の例の提案は、現在のモジュールに関連した hamster.jpg ファイルをフェッチする:

(async () => {
  const response = await fetch(new URL("../hamsters.jpg", import.meta.url));
  const blob = await response.blob();

  const size = import.meta.scriptElement.dataset.size || 300;

  const image = new Image();
  image.src = URL.createObjectURL(blob);
  image.width = image.height = size;

  document.body.appendChild(image);
})();

このモジュールが読み込まれると、その場所に関係なく、兄弟ファイル hamsters.jpg が読み込まれ、画像が表示される。画像のサイズは、インポートに使用されるスクリプト要素を使用して構成できる。

<script type="module" src="path/to/hamster-displayer.mjs" data-size="500"></script>

globalThisキーワードを使用すると、開発者はグローバルオブジェクトにアクセスするポータブルECMAScriptコードを記述できるため、ブラウザ、ワーカ、Node.js環境それぞれでwindow、self、globalを使用する必要がなくなり、他のエッジケースに対処できる。

新しいエクスポート構文 (export * as ns from "mod) は、別のモジュールの名前空間のエキゾチックオブジェクトを別のモジュールのエクスポート名としてエクスポートする新しいexport from形式を追加し、既存のexport from形式からのユースケースと同様のユースケースを満たす。

Promise.allSettled()は、既存のECMAScript、ES2015のPromise.all()とPromise.race()を完了し、結果に関係なくすべてのpromiseが解決された場合（満たされた場合も拒否された場合も）を処理するため、次のようなコードを記述できる:

Promise.allSettled([
  fetch("https://api.github.com/users/pawelgrzybek").then(data => data.json()),
  fetch("https://api.github.com/users/danjordan").then(data => data.json())
])
  .then(result => console.log(`All profile settled`));

標準のPromise.all(),では、最初のpromiseを拒否するとpromise全体が拒否され、2番目のpromiseを実行できない場合がある。Promise.allSettledは、部分的な結果が価値があるようなケースをカバーするのに役立つ（一方は拒否され、他方は実行される）。

Optional chaining (a?.b)およびnullish coalescing (a ?? b) がBabel (Babel 7.0以降) 、Edge、Chrome、Firefoxの自動更新内蔵ブラウザ、また、TypeScript 3.7以降でサポートされている。アクセス/呼び出しの値がnullishの場合、どちらの機能でも短絡を有効にすることができる。たとえば、let x = foo?.bar.baz();を簡潔に置き換えるなら:

let x = foo === null || foo === undefined ? undefined : foo.bar.baz();

BigIntを使用すると、開発者は非常に大きな数を正確に処理できる。BigIntは、整数リテラルの最後にnを追加して — 10n —、または関数BigInt()を呼び出すことによって作成される。2 ** 53 + 1は誤って9007199254740992と評価されるが（数値は奇数なので、数字2で終了できない）、次の2n ** 53n +1nは9007199254740993nと正しく評価される。これらの種類の制限は、TwitterのJSON APIがTweet IDをリテラル数ではなく文字列として返す理由の1つである。BigIntは、ほとんどの最新ブラウザ（Firefox 68以降、Chrome 67以降を含む）でサポートされており、他のブラウザーも回避できる。

String.matchAllは、Safariを除くすべての自動更新内蔵ブラウザでサポートされている。matchAll()メソッドは、キャプチャグループを含む、正規表現に対して文字列と一致するすべての結果のイテレータを返す:

const text = "From 2019.01.29 to 2019.01.30";
const regexp = /(?<year>\d{4}).(?<month>\d{2}).(?<day>\d{2})/gu;
const results = Array.from(text.matchAll(regexp));

// results:
// [
//   [
//     '2019.01.29',
//     '2019',
//     '01',
//     '29',
//     index: 5,
//     input: 'From 2019.01.29 to 2019.01.30',
//     groups: { year: '2019', month: '01', day: '29' }
//   ],
//   [ (...) ]
// ]

TC39は、JavaScript開発者、実装者、学者などのグループであり、コミュニティと協力してJavaScript (正式にはECMAScript) 仕様を維持および発展させる。TC39には、主要なブラウザベンダがすべて含まれている。ECMAScript機能の各提案は、次の成熟度ステージを通過する。ステージ0: Strawman。ステージ1: Proposal。ステージ2: Draft。ステージ3: Candidate。ステージ4: Finished。提案がステージ4に達し、安全に使用できる機能は、標準に含まれる。

ECMAScript 2020は、ECMAScript言語仕様の第11版である。1997年に初版が発行されて以来、ECMAScriptは世界で最も広く使用されている汎用プログラミング言語の1つに成長した。