3.0.0: ECMAScript 2021対応

[azu]

3.0.0

JavaScript Primerのウェブ版がECMAScript 2021に対応しました 🎉

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

• ウェブサイト: https://jsprimer.net/
• 対応のサマリIssue: ES2021の対応 · Issue #1220 · asciidwango/js-primer
• 昨年のES2020のリリースノート: Release 2.0.0: ECMAScript 2020対応

JavaScript Primerについて

JavaScript Primerは、これからJavaScriptを学びたい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる書籍です。
ECMAScriptの仕様は毎年アップデートされるため、JavaScript Primerも毎年それに対応できるように継続してアップデートしています。

GitHubで更新情報を購読したい人は、asciidwango/js-primerリポジトリを"Watch"してください。
"Custom"からリリースのみを購読も可能です。

更新通知をメールで受け取り方は、次のフォームからメールアドレスを登録してください。

• http://eepurl.com/gZOIgb

書籍への支援について

継続的にアップデートするために、書籍への支援はいつでも歓迎しています。
JavaScript PrimerはECMAScriptのアップデートに追従したり、現実の使い方を反映するために、継続してアップデートしています。

GitHub Sponsorsで著者を支援できます。

• Sponsor @azu on GitHub Sponsors

また、書籍版へのレビューを書くことも支援に繋がります。

• JavaScript Primer 迷わないための入門書 | azu, Suguru Inatomi |本 | 通販 | Amazon

GitHubのDiscussions（掲示板）の他の人の質問に答えたり、JSPrimerを読んだ感想を書くことも支援になります。

• Discussions · asciidwango/js-primer

Discussionsのガイドラインは次のスレッドにまとめられています。

• 👋 ようこそ JavaScript Primer へ ! · Discussion #1304 · asciidwango/js-primer

書籍に対してIssueを立てたり、Pull Requestを送ったりして直接的に支援もできます。
IssueやPull Requestについては、次のページを参照してください。

• 文章の間違いに気づいたら · JavaScript Primer #jsprimer

ECMAScript 2021

The 121st General Assembly held as a virtual meeting on 22 June 2021 approved the following documents:

ECMA-262 12th edition – ECMAScript® 2021 language specification
-- https://www.ecma-international.org/news/ecma-international-approves-new-standards-4/

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

• ECMAScript · JavaScript Primer #jsprimer

3.0.0の変更点

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

String#replaceAll

• 対象ページ: https://jsprimer.net/basic/string/#replace-delete
• Issue: String.prototype.replaceAll #1310
• PR: feat(string): String#replaceAllを追加 #1314

ES2021では、String#replaceAllメソッドというマッチした文字列を全て置換するメソッドが追加されました。
String#replaceメソッドでは、最初に一致したものだけが置換されますが、String#replaceAllメソッドでは一致したものがすべて置換されます。

今までもString#replaceメソッドと正規表現のg（global）フラグを使うことで、繰り返し置換が可能でした。
しかし、正規表現では?や.などは特殊な意味を持つため、エスケープが必要となります。
String#replaceAllメソッドでは、ただの文字列として渡したものを繰り返し置換ができるため、エスケープが不要な点が主な違いです。

const str = "???";
// replaceメソッドの場合は、正規表現の特殊文字はエスケープが必要となる
console.log(str.replace(/\?/g, "!")); // => "!!!"
// replaceAllメソッドでは、文字列として渡した検索文字列を全て置換する
console.log(str.replaceAll("?", "!")); // => "!!!"

詳細

• Proposal: https://github.com/tc39/proposal-string-replaceall
• MDN: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll
• 別の書籍での解説: https://exploringjs.com/impatient-js/ch_regexps.html#replace-replaceAll

Numeric Separators

• 対象ページ:
  • データ型とリテラル: https://jsprimer.net/basic/data-type/
  • 演算子: https://jsprimer.net/basic/operator/#bit-operator
• Issue: Numeric Separators #1311
• PR: feat: Numeric Separatorsの対応、ビット演算子の書き直し #1312
• 変更点
  • ES2021でサポートされたNumeric Separatorsを追加
  • ビット演算子を書き直し、ビット演算の解説の追加、図の追加など
  • チートシートにNumeric Separatorsを追加

ES2021では、Numeric Separatorsという_を数値リテラルの区切り文字として利用できる構文が追加されました。

数値リテラルでは数値が大きくなるほど、桁数の見間違いなどが発生しやすくなります。

const largeNumber = 1000000000000;

Numeric Separatorsでは、数値リテラルの区切り文字として_が追加できます。
数値リテラルを評価する際には、_は単純に無視されるため意味の違いはありません。

const largeNumber = 1_000_000_000_000;

JavaScript Primer 3.0では、このNumeric Separatorsの解説をデータ型とリテラルに追加しています。

また、ビット演算では数値リテラルの桁数が多くなりやすいです。
そのため、演算子のビット演算のセクションをNumeric Separatorsを使って書き直し、図などを入れています。

📝 演算子の章は肥大化しやすいので、今後のバージョンで整理するかもしれません。
ビット演算はユースケースでは利用していないため、ページとして分ける可能性もありそうです。

チートシートのES2021の対応

• 対象ページ:
  • 付録: JavaScriptチートシート: https://jsprimer.net/cheetsheet/

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

• Numeric Separators

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

次のES2021の変更は、現時点のJavaScript Primerでは含まれていません。
JavaScriptのリファレンスを作ることは本書の目的ではないため、
実際にユースケースで利用する可能性が少ないものに関しては取り入れていません。

• Promise.any と AggregateError
  • コメント: ECMAScript 2021の対応 #1220 (comment)
• WeakRefs
  • コメント: ECMAScript 2021の対応 #1220 (comment)
• Logical assignment operators
  • &&=、||=、??= のような論理演算子と代入演算子の組み合わせ
  • コメント: ECMAScript 2021の対応 #1220 (comment)
  • 仮PR: feat(opreator): Logical assignment operatorsの追加 #1334

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

その他の修正

• いろいろなtypoの修正
• usecase/nodecli: コマンドライン引数のデフォルト値を ?? でセットする #1264
• usecase/todoapp: Todo App の HTML に DOCTYPE がないことの見た目の影響 #1263

---

This discussion was created from the release 3.0.0: ECMAScript 2021対応.