Featured image of post ES2024の新機能:JavaScriptの最新アップデート Featured image of post ES2024の新機能:JavaScriptの最新アップデート

ES2024の新機能:JavaScriptの最新アップデート

ES2024の新機能を詳解。groupBy、Promise.withResolvers、ArrayBuffer transfer、Stringメソッド、Atomics.waitAsyncの使い方と導入時期。

ECMAScript 2024(ES15)は、JavaScriptに待望の新機能をもたらします。本記事では、実践的なコード例と導入タイムラインを交えて新機能を解説します。

配列グループ化:Object.groupBy と Map.groupBy

最も要望の多かった機能の一つがついに登場しました。Object.groupByMap.groupByは、コールバック関数に基づいて配列要素をグループ化します:

const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "goat", type: "meat", quantity: 23 },
];

const byType = Object.groupBy(inventory, ({ type }) => type);
// { vegetables: [{ name: "asparagus", ... }],
//   fruit: [{ name: "bananas", ... }],
//   meat: [{ name: "goat", ... }] }

Map.groupByは非文字列キーを保持するため、オブジェクトやシンボルによるグループ化に最適です。これにより、外部ライブラリや手動のreduceパターンが不要になります。

Promise.withResolvers

Promise.withResolvers()は、プロミスとそのresolve/reject関数をプロパティとして返す静的メソッドです。従来のように変数をコンストラクタの外で宣言する必要がありません:

const { promise, resolve, reject } = Promise.withResolvers();

setTimeout(() => resolve("完了"), 1000);
await promise; // "完了"

コールバックベースのAPI変換、イベントハンドラでのプロミス管理、カスタム非同期プリミティブの実装に有用です。


ArrayBuffer.prototype.transfer

transferおよびtransferToFixedLengthメソッドにより、データをコピーせずにバッファ間で所有権を移譲できます:

const buffer = new ArrayBuffer(1024);
const view = new Uint8Array(buffer);
view[0] = 42;

const transferred = buffer.transfer();
// buffer.byteLength === 0(切り離し済み)
// transferred.byteLength === 1024

この機能はWebAssemblyランタイム、Web Worker間通信、バッファプール管理において、メモリコピーを排除しGCプレッシャーを低減します。

String: isWellFormed と toWellFormed

Unicodeのウェルフォームドネスを扱う新しいStringメソッドです。孤立サロゲートを含む不正な文字列は、セキュリティ脆弱性や表示問題の原因になります:

const str = "ab\uD800c";
str.isWellFormed(); // false
str.toWellFormed(); // "ab\ufffdc"

ユーザー生成コンテンツや国際化パイプラインを扱うシステムに不可欠です。


Atomics.waitAsync

同期版Atomics.wait(メインスレッドをブロック)の非ブロッキング版です:

const sab = new SharedArrayBuffer(4);
const int32 = new Int32Array(sab);
Atomics.store(int32, 0, 0);

const { async, value } = Atomics.waitAsync(int32, 0, 0);
// { async: true, value: Promise<"ok" | "not-equal" | "timed-out"> }

ロックフリーデータ構造、効率的なスレッド間同期、メインスレッドをブロックしないリアルタイムデータ処理を可能にします。

導入タイムライン

期間利用可能性
0-6ヶ月Chrome、Firefox Nightly、Node.js(–harmony)
6-12ヶ月主要ブラウザ安定版、Node.js LTS
12-18ヶ月ポリフィル提供、初期プロダクション採用
18-24ヶ月広範な利用、TypeScriptサポート、ESLintルール

その他の追加機能

ES2024には、RegExp.prototype.unicodeSetsフラグ(vフラグ)による拡張文字クラス操作、リサイズ可能なArrayBufferErrorcauseプロパティによるエラー原因チェーンの標準化も含まれます。

結論

ES2024は日常的な開発ニーズに応える実用的な改善をもたらします。配列グループ化はデータ変換を簡素化し、Promise.withResolversは非同期パターンを整理し、ArrayBufferの改善は新たなパフォーマンスの可能性を開きます。ポリフィルを通じて今すぐ実験を始め、ブラウザのネイティブサポートに備えましょう。