Skip to content

Commit 17328ed

Browse files
authored
feat: ECMAScript 2020に対応 (#1252)
* feat: ECMAScript 2020に対応 * chore: 2.0.0のCHANGELOG作成 * fix * fix * fix * fix * fix
1 parent 1a4b9b4 commit 17328ed

File tree

3 files changed

+156
-2
lines changed

3 files changed

+156
-2
lines changed

CHANGELOG.md

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
# 2.0.0
2+
3+
[JavaScript Primer](https://jsprimer.net/) 2.0.0ではECMAScript 2020に対応しています。
4+
5+
- サマリIssue: [ECMAScript 2020の対応 · Issue #1145 · asciidwango/js-primer](https://github.com/asciidwango/js-primer/issues/1145)
6+
7+
## for-in mechanics
8+
9+
- 対象ページ: [配列](https://jsprimer.net/basic/array/)
10+
- Issue: https://github.com/asciidwango/js-primer/issues/1180
11+
- PR: https://github.com/asciidwango/js-primer/issues/1180
12+
13+
`for...in`文がプロパティを列挙する順番はES2019までは実装依存だった。
14+
これがES2020では仕様として列挙する順番が規程されたので、異なる列挙をするブラウザは基本的になくなる。(現時点ではすでにどのブラウザも同じ順番)
15+
背景としては、`Reflect.ownKeys`(ES2015)が入った際に大体の実装が同じ列挙順に統一されていた。
16+
そのため実装依存だった順序の仕様を定義するように修正された。
17+
18+
**詳細**
19+
20+
- https://github.com/tc39/proposal-for-in-order
21+
- https://github.com/tc39/proposal-for-in-order/blob/master/exploration/README.md
22+
- https://github.com/tc39/ecma262/pull/1791 仕様の修正
23+
- https://github.com/tc39/test262/pull/2432 テストの実装
24+
25+
## `export * as ns from "mod";`
26+
27+
- 対象ページ [ECMAScriptモジュール](https://jsprimer.net/basic/module/)
28+
- Issue: <https://github.com/asciidwango/js-primer/issues/1177>
29+
- PR: <https://github.com/asciidwango/js-primer/pull/1203>
30+
31+
ES2020では、`export * as ns from "mod"; `という再エクスポートの構文が追加された。
32+
33+
- https://github.com/tc39/proposal-export-ns-from
34+
- [Normative: Add `export * as ns from "mod”` to Export production and Module Semantic by spectranaut · Pull Request #1174 · tc39/ecma262](https://github.com/tc39/ecma262/pull/1174)
35+
36+
ES2015での見落とし的な構文で、基本的には既存の構文では、次のように書く必要があった。
37+
38+
39+
```js
40+
import * as ns from "./module.js";
41+
export { ns };
42+
```
43+
44+
これを次のように1行で書けるように追加された構文。
45+
46+
```js
47+
export * as ns from "./module.js";
48+
```
49+
50+
## `String.prototype.matchAll`
51+
52+
- 対象ページ: [文字列](https://jsprimer.net/basic/string/)
53+
- Issue: <https://github.com/asciidwango/js-primer/issues/1182>
54+
- PR: <https://github.com/asciidwango/js-primer/pull/1250>
55+
56+
ES2020では `String.prototype.matchAll` という正規表現の`g`フラグを使った繰り返しマッチに対応したメソッドが追加された。
57+
今までは`RegExp.prototype.exec`メソッドで繰り返しマッチすを表現していたが、`String.prototype.matchAll`メソッドというIteratorを返すメソッドに置き換えることができる。
58+
59+
**変更点**
60+
61+
- マッチした文字列の取得を書き直し
62+
- `Sttring#match``String#matchAll` をベースに変更
63+
- `RegExp#exec``String#matchAll` が利用できる場合に使う状況がないため、コラムに変更
64+
- `RegExp#exec` は 基本的には利用することはなくなったメソッドであるため
65+
- 既存のコードを読むと出てくる可能性はあるので、コラムとして残している(結構なトリッキーなコードでもある)
66+
- 基本は `Sttring#match``String#matchAll` の対比で話を進めた
67+
68+
## globalThis
69+
70+
- 対象ページ: [関数とthis](https://jsprimer.net/basic/function-this/)
71+
- Issue: <https://github.com/asciidwango/js-primer/issues/1181>
72+
- PR: <https://github.com/asciidwango/js-primer/pull/1187>
73+
74+
実行環境で`window``global`などグローバルオブジェクトの参照方法がバラバラだった。
75+
これをまとめた概念として`globalThis`がES2020で追加された。
76+
77+
## BigInt
78+
79+
- 対象ページ: [データ型とリテラル](https://jsprimer.net/basic/data-type/)
80+
- Issue: <https://github.com/asciidwango/js-primer/issues/445>
81+
- PR: <https://github.com/asciidwango/js-primer/pull/1184>
82+
83+
新しいデータ型として`BigInt`が追加された。
84+
85+
- BigIntとは巨大な整数を表現するための新しいリテラル
86+
- `1n` のように `n` というsuffixをつけるリテラル
87+
- 数値リテラルでは`2^53-1`よりも大きな値は精度が足りずに正確に表現できない
88+
- BigInt自体は7番目の新しいプリミティブ型として定義されている
89+
- そのため、typeofに"bigint"が追加されている
90+
- 浮動小数点表現に`n`をつけた場合は構文エラーとなる
91+
- BigIntの `0n` も falsy に追加 #445
92+
93+
## Nullish coalescing演算子(`??`)とOptional chaining(`?.`
94+
95+
- 対象ページ:
96+
- [演算子](https://jsprimer.net/basic/operator/)
97+
- [関数と宣言](https://jsprimer.net/basic/function-declaration/)
98+
- [オブジェクト](https://jsprimer.net/basic/object/)
99+
- Issue:
100+
- [ES2020: Nullish coalescing Operator · Issue #1178 · asciidwango/js-primer](https://github.com/asciidwango/js-primer/issues/1178)
101+
- [ES2020: Optional chaining · Issue #1179 · asciidwango/js-primer](https://github.com/asciidwango/js-primer/issues/1179)
102+
- PR: <https://github.com/asciidwango/js-primer/pull/1205>
103+
104+
105+
Nullish coalescing演算子(`??`)は、左辺の値がnulishであるならば、右辺の評価結果を返す。
106+
nulishとは、評価結果がnullまたはundefinedとなる値のこと。
107+
108+
Optional chaining演算子(`?.`)は、左辺のオペランドがnullish(nullまたはundefined)の場合は、それ以上評価せずにundefinedを返す。
109+
一方で、プロパティが存在する場合は、そのプロパティの評価結果を返す。
110+
111+
どちらもNullishを扱うため、まとめて対応。
112+
113+
どちらの演算子も利用できる場所が広いため、かなり幅広いページを書き換えている。
114+
115+
**変更点**
116+
117+
- **falsy**の説明を演算子の章に移動
118+
- falsyの対応としてnullishを演算子の章で解説するため
119+
- Optional chaining演算子の(`?.`)の解説を"オブジェクト"の章に追加
120+
- Nullish coalescing演算子(`??`)とOptional chaining(`?.`)の組み合わせを説明
121+
- Nullish coalescing演算子(`??`)の解説を"演算子"の章に追加
122+
- 一部のコードを `||``??` に置き換え
123+
- 例としては問題ないけど、`??` 推奨気味に変更
124+
125+
## チートシートのES2020の対応
126+
127+
- 対象ページ: [付録: JavaScriptチートシート](https://jsprimer.net/cheetsheet/)
128+
- Issue: https://github.com/asciidwango/js-primer/issues/1204
129+
- PR: https://github.com/asciidwango/js-primer/pull/1247
130+
131+
チートシートにES2020で増えた構文を追加。
132+
133+
- Nullish coalescing演算子(`??`)
134+
- Optional chaining(`?.`
135+
- BigInt(`42n`)
136+
- `export * as ns from "./x.js"`
137+
138+
## 含まれなかったES2020の変更点
139+
140+
次のES2020の変更は、現時点のJavaScript Primerでは含まれていません。
141+
142+
- `Promise.allSettled`
143+
- `import()`
144+
- `import.meta`
145+
146+
詳細は[ECMAScript 2020の対応 · Issue #1145 · asciidwango/js-primer](https://github.com/asciidwango/js-primer/issues/1145)を参照してください。
147+
148+
# 1.0.0
149+
150+
出版に合わせた初回のリリース。
151+
152+
- [Release 1.0.0 · asciidwango/js-primer](https://github.com/asciidwango/js-primer/releases/tag/1.0.0)

book.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"github-issue-feedback"
2020
],
2121
"variables": {
22-
"esversion": "2019",
22+
"esversion": "2020",
2323
"nodeversion": "12.13.0",
2424
"npmversion": "6.12.0",
2525
"triplebackticks": "```",

source/intro/README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,10 @@ ECMAScript 2015と呼ばれる仕様の大きな更新が行われた際に、Ja
6969

7070
この書籍は、新しくなったECMAScript 2015以降を前提にして一から書かれています。
7171
今からJavaScriptを学ぶなら、新しくなったECMAScript 2015を前提としたほうがよりスッキリと学べるためです。
72+
この書籍は、ECMAScript 2015から現時点の最新バージョンであるECMAScript {{book.esversion}}に対応しています。
7273

73-
また現在のウェブブラウザは、ECMAScript 2015をサポートしています。そのため、この書籍では一から学ぶ上で知る必要がない古い書き方は紹介していないことがあります。
74+
また、現在のウェブブラウザは、ECMAScript 2015をサポートしています。
75+
そのため、この書籍では一から学ぶ上で知る必要がない古い書き方は紹介していないことがあります。
7476
しかし、既存のコードを読む際には古い書き方への理解も必要になるので、頻出するケースについては紹介しています。
7577

7678
一方で、近い未来に入るであろうJavaScriptの新しい機能については触れていません。

0 commit comments

Comments
 (0)