JavaScript ES2024 新機能解説完全ガイド【2025年最新版】

2025年6月12日

# JavaScript ES2024 新機能解説完全ガイド【2025年最新版】

JavaScriptは、Web開発における主要な言語として常に進化を続けています。ES2024（ECMAScript 2024）は、開発者の生産性向上とより安全で効率的なコード記述を目的とした、重要な新機能を提供します。この記事では、ES2024で導入された主要な新機能を分かりやすく解説し、具体的なコード例を通してその使い方を理解していきます。

この記事を読むことで、ES2024の新機能を活用し、よりモダンで効率的なJavaScriptコードを書けるようになります。最新のJavaScriptのトレンドを把握し、開発スキルを向上させたい開発者にとって必読のガイドとなるでしょう。

## 目次

1. **はじめに**
2. **`Array.prototype.toReversed()`**
3. **`Array.prototype.toSorted()`**
4. **`Array.prototype.toSpliced()`**
5. **`Array.prototype.with()`**
6. **Promise の改善: `Promise.withResolvers()`**
7. **その他注目機能
8. **まとめ**

## 2. `Array.prototype.toReversed()`

`toReversed()`は、オリジナルの配列を変更せずに、新しい配列として反転した配列を返します。これは、`reverse()`メソッドが元の配列を直接変更してしまう問題を回避するのに役立ちます。

📜 JAVASCRIPT

const arr = [1, 2, 3, 4, 5];
const reversedArr = arr.toReversed();

console.log(arr); // [1, 2, 3, 3, 2, 1]
console.log(reversedArr); // [5, 4, 3, 2, 1]

この例では、`toReversed()`を使用することで、元の配列`arr`は変更されず、反転された新しい配列`reversedArr`が作成されます。

## 3. `Array.prototype.toSorted()`

`toSorted()`は、オリジナルの配列を変更せずに、新しい配列としてソートされた配列を返します。`sort()`メソッドと同様に、比較関数を使用できますが、元の配列は変更されません。

📜 JAVASCRIPT

const arr = [3, 1, 4, 1, 5, 9, 2, 6];
const sortedArr = arr.toSorted((a, b) => a - b);

console.log(arr); // [3, 1, 4, 1, 5, 9, 2, 2]
console.log(sortedArr); // [1, 1, 2, 2, 3, 4, 5, 9]

この例では、数値の昇順でソートされた新しい配列`sortedArr`が作成され、元の配列`arr`は変更されていません。

## 4. `Array.prototype.toSpliced()`

`toSpliced()`は、オリジナルの配列を変更せずに、新しい配列としてスプライスされた配列を返します。`splice()`メソッドと同様に、要素の削除、挿入、置換を行うことができます。

📜 JAVASCRIPT

const arr = [1, 2, 3, 4, 5];
const splicedArr = arr.toSpliced(1, 2, 6, 7);

console.log(arr); // [1, 2, 3, 4, 3, 4, 5]
console.log(splicedArr); // [1, 6, 7, 4, 5]

この例では、インデックス1から2つの要素を削除し、6と7を挿入した新しい配列`splicedArr`が作成され、元の配列`arr`は変更されていません。

: 配列操作の図解

## 5. `Array.prototype.with()`

`with()`メソッドは、指定されたインデックスに値を挿入し、新しい配列を返します。元の配列は変更されません。

📜 JAVASCRIPT

const arr = [1, 2, 3];
const newArr = arr.with(1, 4);

console.log(arr); // [1, 2, 3]
console.log(newArr); // [1, 4, 3]

この例では、インデックス1に4を挿入した新しい配列`newArr`が作成され、元の配列`arr`は変更されていません。

## 6. Promise の改善: `Promise.withResolvers()`

`Promise.withResolvers()`は、Promiseの解決関数と拒否関数をプログラム的に制御するための新しい方法を提供します。これにより、より複雑な非同期処理をより柔軟に処理できます。

📜 JAVASCRIPT

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

setTimeout(() => {
  resolve('Resolved!');
}, 1000);

resolve.then(value => console.log(value)); // 1秒後に "Resolved!" がコンソールに出力される

この例では、`Promise.withResolvers()`を使用して、解決関数と拒否関数を定義し、setTimeoutを使用して解決を遅延させています。

## 7. その他注目機能

ES2024には、上記以外にもいくつかの注目機能があります。

* **Error Cause:** エラーの原因となったPromiseを追跡できるようになりました。
* **RegExp.v flag:** Unicode プロパティの先読みを許可します。
* **Symbol.rejectWith:** Promise の拒否動作をカスタマイズする機能。

## まとめ

ES2024は、JavaScript開発者の生産性を向上させ、より安全で効率的なコード記述を可能にする重要な新機能を提供します。`toReversed()`, `toSorted()`, `toSpliced()`, `with()` などの配列操作メソッドは、元の配列を変更せずに新しい配列を作成する際に非常に便利です。`Promise.withResolvers()` は、Promiseの制御をより細かく行うために役立ちます。

: ES2024新機能のまとめ

**実践へのアクションプラン:**

* 新しいプロジェクトでは、ES2024の新機能を積極的に活用しましょう。
* 既存のプロジェクトでは、段階的に新機能への移行を検討しましょう。
* 関連するドキュメントやチュートリアルを参照し、理解を深めましょう。

**関連リソース:**

* ECMAScript 2024: [https://www.ecma-international.org/ecma262/](https://www.ecma-international.org/ecma262/)
* MDN Web Docs: [https://developer.mozilla.org/](https://developer.mozilla.org/)

: JavaScript開発ロードマップ

JavaScriptは常に進化しており、ES2024は、その進化の一部です。この記事で紹介した新機能を活用することで、よりモダンで効率的なJavaScriptコードを書き、開発スキルを向上させることができます。常に最新の情報を収集し、新しい技術を積極的に取り入れることが、JavaScript開発者として成長するための鍵となります。