ECMAScript 2022の対応

[azu]

ECMAScript 2022対応のmeta issueです。

proposals/finished-proposals.md at master · tc39/proposals

やりかた

• 検討リストから対応するべきかを決める
• 対応するものは別途Issue化する
• 対応する
• すべて対応したら book.js を更新

スケジュール

• 1月: 検討する
• 2月 ~ 5月: 実装
• 6月: ES2022の正式リリースと合わせて公開
  • 大体6月後半に News - Ecma International でリリースされる
  • スナップショット(仕様が固まったかどうか)はReleases · tc39/ecma262を見るとわかる

検討リスト

チェックが入ってるものは対応が必要。
入ってないものは、強いユースケースがあったら追加で対応するけど、基本はしない。

• Class Fields
  • tc39/proposal-private-methods: Private methods and getter/setters for ES6 classes
  • tc39/proposal-class-fields: Orthogonally-informed combination of public and private fields proposals
  • tc39/proposal-static-class-features: The static parts of new class features, in a separate proposal
  • Ergonomic brand checks for Private Fields
  • class static initialization blocks
• Error Cause
• RegExp Match Indices
• Top-level await proposal
• Object.hasOwn
• .at()
• Node.jsのESM対応 Node.js ESMの対応 #1355
• #をprototypeの意味で使わないようにする ES2022: prototypeを表すのに # を使うべきかどうか #1368

対応リスト

実際に対応するリスト

• ES2022: Class Fields #1364
• ES2022: Top-level await proposal #1365
• ES2022: Object.hasOwn #1366
• ES2022: StringとArrayの .at() #1367

過去

• ECMAScript 2021の対応 #1220
• ECMAScript 2020の対応 #1145

[azu]

Class Fields

これは対応する必要がある

• Class Fields
• Private Fields
  • Ergonomic brand checks for Private Fields
  • privateはないって書いてた気がするので、これを書き換える
• Static Fields
• Static Blocks(これは微妙?)
  • https://v8.dev/features/class-static-initializer-blocks private を外だしする技に使える
  • ちょっとハック的な使い方が多そう

関連

• Todoのユースケースなどで _ prefixを使ってた部分はPrivate Fieldsに変更する

やる順番

• TodoのユースケースをES2022に対応する
• ユースケースでの使い方を見ながら、クラスの章を対応する

[azu]

RegExp Match Indices

• dフラグと言う概念が増えてる
• indexとlastIindexはほぼこれでカバーできる

const [start, end] = [
    match.index+1,
    match.index+match[0].length-1,
]; 

みたいなイディオムはもういらなくなってる。
ちょっとどうするかは迷いどころ。
パフォーマンスのためopt-inになってるので、なんかaddtionalな立ち位置とした方が良いのかも

[azu]

Top-level await proposal

対応がいる。

• https://jsprimer.net/basic/async/#await-expression の await の説明
• https://jsprimer.net/use-case/ajaxapp/promise/#rewrite-to-async-function でasyncで囲んでるところをTop-Levelにする?
  • あえてTop-Levelにする意味はなさそうだけど

あんまりユースケースでは使ってないので、詳しくは触れないかも。
CDNとかDynamic Importと合わせた場合 と コンソールが一番のユースケースな気はする。

[azu]

Error Cause

https://jsprimer.net/basic/error-try-catch/ にはエラーの継承的な話はない。
try-catchで引き継ぐようなケースも書かれてない。

https://jsprimer.net/basic/error-try-catch/#console.error でスタックトレース的には若干関係がある。
https://jsprimer.net/use-case/ajaxapp/promise/ でエラーの意味づけをするのには使える。

今のところ説明するべきかと言うとちょっと微妙。
もう少し複雑なエラーのケースがないとなんか実感しにくい感じがする

[azu]

Object.hasOwn

これは Object#hasOwnProperty を完全に置き換えるものなので、説明する。

• https://jsprimer.net/basic/prototype-object/#diff-in-operator-and-hasOwnProperty は Object.hasOwn を使うのを基本にする
• 補足として Object#hasOwnProperty と言うものがあった + [Object.create(null)[(https://jsprimer.net/basic/prototype-object/#not-inherit-object)では hasOwnProperty が使えないという欠点があったので、 Object.hasOwn という話を加える

Refs: isNaN https://jsprimer.net/basic/implicit-coercion/#nan-is-number-type

[azu]

.at()

追加する。

• https://jsprimer.net/basic/array/#create-and-access でインデックスだけではなく .at() についても追加する (length -1 のケースはatだと -1 とかける)
• https://jsprimer.net/basic/string/#get-char Stringでもインデックスに加えて .at() について触れる
• https://jsprimer.net/basic/class/#extends-built-in で firstとlastという題材も扱ってるので .at() を使うようにする

基本的に length - 1 は .at() に置き換える。

DOM APIについては、標準化失敗した気がするし、触れなくて良い気がする。

https://github.com/tc39/proposal-relative-indexing-method#dom-justifications
https://developer.mozilla.org/ja/docs/Web/API/NodeList/item

[azu]

進め方

それぞれのIssueごとに、

• 書籍で関連する箇所を一覧する(Proposalの表現置き換えできそう、ここで言及した方が良さそう = 既存の変更箇所)
• そのProposalの主なユースケースを調べる(ユースケースを調べて、これは紹介した方がいいとする箇所 = 新規の追加箇所)
• 関連する箇所をどう置き換えるかを検討する(既存の変更と新規の追加を総合的に見る)
  • 基本的な考え方は https://jsprimer.net/intro/ この書籍の目的と目的外に従う
• 書き換える、追加する
• レビューする、マージする

という流れです。
おそらく対応するProposalはIssueを作ってあるので、興味ある人いたらコメントしてください。

• ES2022: Class Fields #1364
• ES2022: Top-level await proposal #1365
• ES2022: Object.hasOwn #1366
• ES2022: StringとArrayの .at() #1367
• Node.js ESMの対応 #1355

これも対応した方が良さそうとかあったら同じくコメントください。
レビューしたい！という人がいたら、このコメントに絵文字リアクションしてください。
(PR作るときにmentionします)

過去の事例も参考になります。

• ES2021の対応 · Issue #1220 · asciidwango/js-primer
• ECMAScript 2020の対応 · Issue #1145 · asciidwango/js-primer

[azu]

New JavaScript features • JavaScript for impatient programmers (ES2022 edition)

[azu]

• Release ES2022 Candidate March 2022 · tc39/ecma262

RCがきた

[azu]

#1418 で対応は一応完了。
あとは、 Node ESMのをどうするかぐらいか