Skip to content

2.0.0: ECMAScript 2020対応

Compare
Choose a tag to compare
@azu azu released this 01 Sep 04:37
· 448 commits to master since this release

2.0.0

JavaScript Primerのウェブ版をECMAScript 2020に対応しました 🎉

JavaScript Primerのウェブサイトから閲覧できます。

ECMAScript 2020

The 119th General Assembly held as a virtual meeting on June 16, 2020, approved the following documents:
ECMA-262 11th edition - ECMAScript® 2020 Language Specification
ECMA-402 7th edition - ECMAScript® 2020 Internationalization API Specification

ECMAScript 2020は2020年06月にEcma Internationalによって正式に承認された仕様です。
ECMAScriptの仕様策定のプロセスについては次のページを参照してください。

2.0.0の変更点

2.0.0では次の項目についてそれぞれ書籍の内容を変更、追加しています。

for-in mechanics

for...in文がプロパティを列挙する順番はES2019までは実装依存だった。
これがES2020では仕様として列挙する順番が規程されたので、異なる列挙をするブラウザは基本的になくなる。(現時点ではすでにどのブラウザも同じ順番)
背景としては、Reflect.ownKeys(ES2015)が入った際に大体の実装が同じ列挙順に統一されていた。
そのため実装依存だった順序の仕様を定義するように修正された。

詳細

export * as ns from "mod";

ES2020では、export * as ns from "mod"; という再エクスポートの構文が追加された。

ES2015での見落とし的な構文で、ES2015では次のように書く必要があった。

import * as ns from "./module.js";
export { ns };

これを次のように1行で書けるように追加された構文。

export * as ns from "./module.js";

String.prototype.matchAll

ES2020では String.prototype.matchAll という正規表現のgフラグを使った繰り返しマッチに対応したメソッドが追加された。
今まではRegExp.prototype.execメソッドで繰り返しマッチを表現していたが、String.prototype.matchAllメソッドというIteratorを返すメソッドに置き換えることができる。

変更点

  • マッチした文字列の取得を書き直し
    • Sttring#matchString#matchAll をベースに変更
  • RegExp#execString#matchAll が利用できる場合に使う状況がないため、コラムに変更
    • RegExp#exec は 基本的には利用することはなくなったメソッドであるため
    • 既存のコードを読むと出てくる可能性はあるので、コラムとして残している(結構なトリッキーなコードでもある)
  • 基本は Sttring#matchString#matchAll の対比で話を進めた

globalThis

実行環境でwindowglobalなどグローバルオブジェクトの参照方法がバラバラだった。
これをまとめた概念としてglobalThisがES2020で追加された。

BigInt

新しいデータ型としてBigIntが追加された。

  • BigIntとは巨大な整数を表現するための新しいリテラル
  • 1n のように n というsuffixをつけるリテラル
  • 数値リテラルでは2^53-1よりも大きな値は精度が足りずに正確に表現できない
  • BigInt自体は7番目の新しいプリミティブ型として定義されている
  • そのため、typeofに"bigint"が追加されている
  • 浮動小数点表現にnをつけた場合は構文エラーとなる
  • BigIntの 0n も falsy に追加 #445

Nullish coalescing演算子(??)とOptional chaining演算子(?.

Nullish coalescing演算子(??)は、左辺の値がnulishであるならば、右辺の評価結果を返す。
nulishとは、評価結果がnullまたはundefinedとなる値のこと。

Optional chaining演算子(?.)は、左辺のオペランドがnullish(nullまたはundefined)の場合は、それ以上評価せずにundefinedを返す。
一方で、プロパティが存在する場合は、そのプロパティの評価結果を返す。

どちらもNullishを扱うため、まとめて対応。

どちらの演算子も利用できる場所が広いため、かなり幅広いページを書き換えている。

変更点

  • falsyの説明を演算子の章に移動
    • falsyの対応としてnullishを演算子の章で解説するため
  • Optional chaining演算子の(?.)の解説を"オブジェクト"の章に追加
  • Nullish coalescing演算子(??)とOptional chaining(?.)の組み合わせを説明
  • Nullish coalescing演算子(??)の解説を"演算子"の章に追加
  • 一部のコードを ||?? に置き換え
    • 例としては問題ないけど、?? 推奨気味に変更

チートシートのES2020の対応

チートシートにES2020で増えた構文を追加。

  • Nullish coalescing演算子(??)
  • Optional chaining(?.
  • BigInt(42n)
  • export * as ns from "./x.js"

含まれなかったES2020の変更点

次のES2020の変更は、現時点のJavaScript Primerでは含まれていません。

  • Promise.allSettled
  • import()
  • import.meta

詳細はECMAScript 2020の対応 · Issue #1145 · asciidwango/js-primerを参照してください。