ES2022の新機能まとめを読んだ

JavaScriptの次の仕様ES2022の新機能まとめ - ICS MEDIA

読んだ。

Array, String, TypedArrayのat()

配列や文字列の要素にat()でアクセスできる。

今までarray[2]みたいな方法でアクセスしてたのがarray.at(2)とかできるようになるらしい。

記事にもある通りメリットは負数が使えること。今までarray[-1]が使えると思ってたら使えなかった経験をしているので、-1で最後の要素にアクセスできるのは嬉しい。

……と思ったら、挙動がアレらしい。

【追記あり】ES2022 Array#at がちょっとおかしい #fix_ecmascript_at - Qiita

なるほどね。

Top-Level Await

トップレベルでaysncがなくてもawaitが使えるようになるやつ。

console上とかで手っ取り早くfetchできるという使い方が便利そう。

また、Top-Level AwaitはES Moduleとしてしか利用できません。scriptタグで利用する場合は、<script type="module">とES Module方式で利用しなければなりません。CDNから<script>タグを貼り付ける･･･といった場面では利用できません。ES Moduleの使い方は記事『ブラウザで覚えるES Modules入門』を参照ください。Node.jsの場合は、拡張子を.mjsとしてES Moduleであることを指定します。

なるほど。

このTop-Level Awaitは、本領として動的モジュール読み込みのimport()と組み合わせると効果を発揮します。

const { hoge } = await import("../hoge")ができるようになる。すごい。

プライベートのインスタンスフィールド、メソッド

クラス構文の変数やメソッドに#をつけることでプライベートになり、外部からアクセスしようとするとエラーになる。

従来では、プライベートフィールドを設けることができなかったので、接頭語に「_」（アンダースコア）を使い、命名規則でプライベートフィールドであることを示していたエンジニアも多いと思います。

なんかこれ見たことある気がしたけど、プライベートなことを示したかったのか。

クラスのstaticフィールド

従来でも、クラスの外部で動的にフィールドを追加すると、静的フィールドのように扱う事ができました。

知らなかった……。

クラス構文でstaticフィールドが使えるよというやつ。

これはTypeScriptでは既にできていたやつだったので実際にclassの中にstaticな変数やメソッドを書いた経験があったけど、ECMAScriptではまだだったのか。

また#をつけることでプライベートかつstaticなフィールドを作ることもできる。

クラスの静的イニシャライザーブロック

「静的変数に値を格納したいが、クラス宣言のタイミングでないと初期値を入れられない」といった場面で利用できます。

これは全然知らなかった。staticな値をクラスの評価中に決められるらしい。たしかにstaticフィールドに動的に値を定義したいときはこうしないと無理なのか。

Object.hasOwn()

オブジェクトにプロパティが存在するかどうかを確認できる。

JavaScriptはhasOwnPropertyプロパティ名が保護されていないので（書き換えることができるので）、安全のためにはObject.prototype.hasOwnProperty.call()を使う必要がありました。

これも知りませんでした。知らないこと多すぎ。

Error.cause

エラーの発生源を格納できるようになるやつ。

Errorコンストラクターの第荷引数に{ cause: error }みたいな感じで格納する。

詳しい内容は記事の画像を見るのがわかりやすかった。

2022年6月現在は、Firefoxだとコンソールパネルでエラーのcauseを自動的に展開してくれます。ChromeやSafariでは一階層目しかエラーがでてこないで、自前でcauseプロパティーを追跡する必要があります。

RegExp Match Indices (/d フラグ)

このオプションを指定すると、ひっかかった部分文字列の先頭と末尾のインデックスについての追加情報が得られます。

ほほお。

これも記事見たらわかりやすかったけど、正規表現をもとに細かい情報を必要とする処理を書いていくときに必要になりそう。

まとめ

今回紹介したES2022の新機能のうち、クラスの進化が興味深く感じました。Angularは別として、ReactやVueではクラスとは異なる方向性（関数コンポーネントや、Composition API）で利用されています。クラスが求められていた時代から遅れてES2022にクラス仕様が固まったのは、興味深い進化と言えそうです。

たしかにクラスは最近あまり求められていないというか、関数で書いていく方向に感じる(Reactとか書いているからだろうか)

個人的にはErrorのcauseとArray.at()が気になるところです。