Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
jsprimer.net がECMAScript 2022(ES2022)に対応しました。
ES2022への対応して、次の内容が更新されています。
また、ウェブ版の仕組みとしてユースケースの章などのHTMLを使ったアプリケーションもウェブ上でそのまま変更しながら確認できるエディタを組み込んでいます。
Top-Level
await
ES2021までは、
await
式はAsync Functionの直下でのみしか利用できませんでした。ES2022には、これに加えてModuleの直下では、Async Functionで囲まなくても
await
式が利用できます。これにより、
await
式を使うためだけにAsync Functionを使った即時実行関数は不要となります。Object.hasOwn
ES2022では
Object.hasOwn
静的メソッドが追加されました。Object.hasOwn
静的メソッドは、対象のオブジェクトが指定したプロパティを持っているかを確認できるメソッドです。この
Object.hasOwn
静的メソッドは、Object.prototype.hasOwnProperty
メソッドを置き換える目的で導入されています。hasOwnProperty
メソッドは、Object.create(null)
で作成したような"prototypeを継承していないオブジェクト"からは直接呼び出せないという欠点があります。Object.hasOwn
静的メソッドは、インスタンスオブジェクトではなく静的メソッドであるため、対象のオブジェクトに関係なく利用できます。Array.prototype.at
配列の末尾の要素へアクセスするには、
array[array.length - 1]
というlength
プロパティを使う必要がありました。array
を2回書く必要があるなど、末尾の要素へのアクセスは少し手間が必要になっていました。この問題を解決するためES2022では、相対的なインデックスの値を指定して配列の要素へアクセスできる
Array.prototype.at
メソッドが追加されました。Arrayの
at
メソッドは、配列[インデックス]
とよく似ていますが、引数には相対的なインデックスの値を引数として渡せます。.at(0)
なら配列の先頭の要素へ、.at(-1)
なら配列の末尾の要素へアクセスできます。String.prototype.at
配列と同じく文字列にも相対的なインデックスの値を指定して文字へアクセスできる
String.prototype.at
が追加されました。Public/Privateクラスフィールド
ES2022ではクラスにクラスフィールド構文が追加されました。
クラスフィールドは、PublicクラスフィールドとPrivateクラスフィールドの2種類があります。
Publicクラスフィールドは、次のようにクラスのインスタンスに対するプロパティを宣言的に定義できる構文です。
一方のPrivateクラスフィールドは、フィールド名の前に
#
をつけることで、クラスの外からはアクセスできないプライベートなプロパティを定義できる構文です。今までは、クラスのインスタンスにプロパティを定義するにはクラスの
constructor
メソッド内で値を代入する必要がありました。クラスフィールドでは、インスタンスへのプロパティの定義をより宣言的に行えます。その他
そのほかにもES2022ではRegular expression match indices、スタックトレースを継承するError cause、 static blocksなどが追加されています。
ウェブエディタの改善
jsprimer.net のウェブ版では、JavaScriptのコードをそのままブラウザで実行できるコンソール機能が実装されています。
今までは、JavaScript実行のみしか扱えませんでしたが、そのため表示を扱うユースケースであるTodoアプリなどはローカルサーバを使って確認する必要がありました。
今回、jsprimerにHTMLの表示も伴うコードにも対応したエディタを組み込みました。
CodeSandboxが提供しているComponent toolkit for creating live-running code editing experiences | Sandpackを使いエディタを組み込んでいます。
エディタの右下のボタンから、CodeSandboxで開いてコードを共有も可能です。
resolve #1337