Nevermind

ES2022 新機能の概要：Top-Level Await、.at() など

4 分

はじめに

TC39 委員会の年次リリースプロセスにより、JavaScript 言語は毎年進化を続けています。ECMAScript 2022（ES2022）には、開発者体験とコードの可読性を高めるための新機能が数多く追加されました。なかでも特に注目すべき機能を見ていきましょう。

1. トップレベル await

これは ES2022 で最も期待されていた機能の一つです。従来、await キーワードは async 関数の内部でしか使用できませんでした。そのため、モジュールのトップレベルスコープで非同期処理を扱うのは不便で、通常は IIFE（即時実行関数式）で非同期コードを包む必要がありました。

以前 👎:

// data.js
import { fetchData } from './api.js';

let data;
(async () => {
  data = await fetchData();
  // ... 只能在这里使用 data
})();

export { data }; // 导出时 data 还是 undefined

現在（ES2022）👍:

// data.js
import { fetchData } from './api.js';

const data = await fetchData();

export { data }; // 模块会等待 await 完成后再被其他模块评估

トップレベル await は、モジュールの動的読み込みや依存関係の初期化といった場面を大幅に簡素化し、非同期コードをより直感的に書けるようにします。

2. 配列／文字列のインデックスメソッド .at()

JavaScript で配列の最後の要素を取得するには、通常 arr[arr.length - 1] と書く必要があり、冗長で間違いも起こりやすいものでした。ES2022 では .at() メソッドが導入され、前方と後方のインデックスを統一的に扱えるようになりました。

.at() メソッドは整数を受け取ります。正の数なら対応するインデックスの要素を返し、負の数なら末尾から数えます。

以前 👎:

const arr = [1, 2, 3, 4, 5];
const lastElement = arr[arr.length - 1]; // 5
const secondToLast = arr[arr.length - 2]; // 4

現在（ES2022）👍:

const arr = [1, 2, 3, 4, 5];
const lastElement = arr.at(-1); // 5
const secondToLast = arr.at(-2); // 4

// 同样适用于字符串
const str = 'hello';
console.log(str.at(-1)); // 'o'

3. Object.hasOwn(obj, prop)

オブジェクトが継承されたものではなく独自のプロパティを持つか確認する際は、通常 Object.prototype.hasOwnProperty.call(obj, prop) を使用します。この書き方は非常に煩雑で、Object.create(null) で作られたオブジェクトなど、一部のケースでは問題が起こることもあります。

Object.hasOwn() は、より短く信頼性の高い静的メソッドを提供します。

以前 👎:

const obj = { a: 1 };
console.log(Object.prototype.hasOwnProperty.call(obj, 'a')); // true
console.log(Object.prototype.hasOwnProperty.call(obj, 'toString')); // false

現在（ES2022）👍:

const obj = { a: 1 };
console.log(Object.hasOwn(obj, 'a')); // true
console.log(Object.hasOwn(obj, 'toString')); // false

4. その他の注目すべき機能

  • Error Cause: Error コンストラクタが、エラーの「原因」を指定するための第 2 引数を受け取れるようになり、より明確なエラーチェーンを構築しやすくなりました。
    try {
  // ...
} catch (err) {
  throw new Error('New error message', { cause: err });
}
  • RegExp Match Indices（/d フラグ）: /d フラグを使用すると、正規表現の一致結果に各キャプチャグループの開始インデックスと終了インデックスも含まれます。

結論

ES2022 の新機能は革新的な大変化ではありませんが、JavaScript の細部を磨き、開発者が長年抱えてきた多くの問題を解決し、コードをより簡潔で堅牢なものにします。

JavaScript ES2022 ECMAScript Frontend