ES2023 新機能完全解説：findLast・Immutable メソッド活用ガイド

Contents

1 1️⃣ ES2023 の採択とサポート状況
2 2️⃣ 後方検索メソッド findLast / findLastIndex
3 3️⃣ Immutable 系配列操作メソッド
- 3.1 3.1 実装例
- 3.2 3.2 React / Redux での活用
4 4️⃣ その他の注目機能
5 5️⃣ 移行・ビルド戦略
- 5.1 5.1 Babel 設定例（polyfill 自動挿入）
- 5.2 5.2 TypeScript 設定例
6 6️⃣ まとめ
- 6.1 参考リンク

スポンサードリンク

1️⃣ ES2023 の採択とサポート状況

環境	バージョン	主な新機能の実装状態*
Chrome	115 (2024‑02)	完全実装
Edge	115 (2024‑02)	完全実装
Firefox	117 (2024‑04)	完全実装（`findLast*` 系は 99 %）
Safari	16.5 (2024‑03)	`Array.prototype.findLast`・`findLastIndex` は未実装、Immutable 系メソッドは実装済み
Node.js	20.x (2023‑10以降)	完全実装

*本表は 主要 API（この記事で取り上げる機能） の実装有無を示す。
出典: [caniuse.com – ECMAScript 2023 features][1]、[MDN compatibility tables][2]

ポイント
Chrome・Edge・Firefox は 2024 年初頭に最新安定版がリリースされ、ES2023 のコア機能はほぼすべて実装済みです。Safari は一部遅れていますが、Immutable 系メソッド（toSorted など）は既に利用可能です。

実務上のリスク
現在主要ブラウザでのカバー率は ≈ 92 %（caniuse の Global usage データ）となり、企業向け Web アプリでも導入障壁は低いと評価できます[^3]。

2️⃣ 後方検索メソッド `findLast` / `findLastIndex`

2.1 構文と基本的な使い方

// 配列全体を後方から走査し、条件に合致した最初の要素／インデックスを返す
const users = [
  { id: 1, active: false },
  { id: 2, active: true },
  { id: 3, active: true }
];

const lastActive   = users.findLast(u =&gt; u.active);      // → {id:3,…}
const lastIdx      = users.findLastIndex(u =&gt; u.active); // → 2

// 配列全体を後方から走査し、条件に合致した最初の要素／インデックスを返す

const users = [

{ id: 1, active: false },

{ id: 2, active: true },

{ id: 3, active: true }

];

const lastActive = users.findLast(u => u.active); // → {id:3,…}

const lastIdx = users.findLastIndex(u => u.active); // → 2

副作用がない：reverse() を組み合わせた従来手法とは異なり、元配列は変更されません。
可読性向上：検索ロジックを一行で表現でき、意図が明確になります。

2.2 実務での置き換え例

従来コード	ES2023 推奨コード
`arr.slice().reverse().find(cb)`	`arr.findLast(cb)`
`arr.slice().reverse().findIndex(cb)`	`arr.findLastIndex(cb)`

効果：検索ロジックが多いテーブルデータや UI の選択状態管理で、コード量が 約 20 % 短縮されるケースが報告されています[^4]。

2.3 TypedArray への拡張

const buf = new Uint16Array([10, 20, 30, 40]);

console.log(buf.findLast(v =&gt; v &gt; 25));      // → 40
console.log(buf.findLastIndex(v =&gt; v % 20 === 0)); // → 3

const buf = new Uint16Array([10, 20, 30, 40]);

console.log(buf.findLast(v => v > 25)); // → 40

console.log(buf.findLastIndex(v => v % 20 === 0)); // → 3

パフォーマンス：V8 のベンチマーク（2024‑01）では、Uint8Array.prototype.findLast が reverse().find() に比べ 約 30 % 高速 であることが確認されています[^5]。
注意点：TypedArray はバッファ参照を保持するため、大規模データで頻繁に生成すると GC 負荷が増加します。必要に応じて結果の再利用やプール化を検討してください。

3️⃣ Immutable 系配列操作メソッド

メソッド	主な役割	変更前後の例
`toSorted`	ソート結果だけ返す	`arr.toSorted(cb)`
`toReversed`	逆順だけ返す	`arr.toReversed()`
`toSpliced`	splice の非破壊版	`arr.toSpliced(start, deleteCount, …items)`
`with`	指定インデックスの要素を置換	`arr.with(idx, value)`

3.1 実装例

const list = [3, 1, 4, 2];

// ソート（元配列は変化しない）
const sorted = list.toSorted((a, b) =&gt; a - b);
console.log(sorted); // [1,2,3,4]
console.log(list);   // [3,1,4,2]

// 置換
const replaced = list.with(2, 99);
console.log(replaced); // [3,1,99,2]

const list = [3, 1, 4, 2];

// ソート（元配列は変化しない）

const sorted = list.toSorted((a, b) => a - b);

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

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

// 置換

const replaced = list.with(2, 99);

console.log(replaced); // [3,1,99,2]

3.2 React / Redux での活用

状態管理がシンプルに：setState(prev => ({ items: prev.items.toSorted() })) のように、ミュータブルな操作を排除できるためバグが減少します。
ビルドサイズへの影響：Polyfill が必要になる場合でも、core‑js の es2023.array モジュールは 約 4 KB（gzip） しか増えません[^6]。

4️⃣ その他の注目機能

機能	主な変更点	実務でのメリット
`Promise.allSettled`	結果オブジェクトが必ず `value` または `reason` を保持	エラーハンドリングが型安全に。
`String.prototype.replaceAll`	正規表現リテラルでも自動的に `g` フラグが付与	例外処理不要でコードが安定。
`Error.cause`（提案段階）	エラーの根本原因を保持できる	デバッグ情報が体系化。

実務例：外部 API を同時呼び出す際、失敗しても他タスクは継続したいケースで Promise.allSettled が有効です。

const fetches = [fetch(a), fetch(b), fetch(c)];
Promise.allSettled(fetches).then(results =&gt; {
  results.forEach(r =&gt; r.status === 'fulfilled'
    ? console.log('OK', r.value)
    : console.warn('NG', r.reason));
});

const fetches = [fetch(a), fetch(b), fetch(c)];

Promise.allSettled(fetches).then(results => {

results.forEach(r => r.status === 'fulfilled'

? console.log('OK', r.value)

: console.warn('NG', r.reason));

});

5️⃣ 移行・ビルド戦略

5.1 Babel 設定例（polyfill 自動挿入）

// .babelrc.json
{
  &quot;presets&quot;: [
    [&quot;@babel/preset-env&quot;, {
      &quot;targets&quot;: &quot;&gt;0.5%, not dead, not ie 11&quot;,
      &quot;bugfixes&quot;: true,
      &quot;shippedProposals&quot;: true,
      &quot;useBuiltIns&quot;: &quot;usage&quot;,
      &quot;corejs&quot;: { &quot;version&quot;: 3, &quot;proposals&quot;: true }
    }]
  ]
}

// .babelrc.json

{

"presets": [

["@babel/preset-env", {

"targets": ">0.5%, not dead, not ie 11",

"bugfixes": true,

"shippedProposals": true,

"useBuiltIns": "usage",

"corejs": { "version": 3, "proposals": true }

}]

]

}

5.2 TypeScript 設定例

// tsconfig.json
{
  &quot;compilerOptions&quot;: {
    &quot;target&quot;: &quot;ES2022&quot;,               // downlevel は不要（ES2023 の構文は使用しない）
    &quot;module&quot;: &quot;ESNext&quot;,
    &quot;lib&quot;: [&quot;DOM&quot;, &quot;ES2023&quot;],
    &quot;downlevelIteration&quot;: true,
    &quot;useDefineForClassFields&quot;: false
  }
}

// tsconfig.json

{

"compilerOptions": {

"target": "ES2022", // downlevel は不要（ES2023 の構文は使用しない）

"module": "ESNext",

"lib": ["DOM", "ES2023"],

"downlevelIteration": true,

"useDefineForClassFields": false

}

ポイント：target を ES2022 に保つことで、findLast* 系は polyfill（core‑js）で補完されます。
導入判定基準（社内 CI で自動チェック）

判定項目	合格ライン
ブラウザサポート率（caniuse の Global usage）	≥ 90 %
ビルドサイズ増加（core‑js 使用分）	< 5 %
CI テストの全パス通過	100 %

上記をすべて満たせば 即時導入 を推奨します。Safari の未実装機能は、必要に応じて feature flag（例：if (typeof Array.prototype.findLast === 'function') …）でフォールバックしてください。

6️⃣ まとめ

ES2023 は 2023‑06‑22 に正式承認され、主要ブラウザと Node.js の ≈ 92 % が実装済み。
Array.prototype.findLast / findLastIndex は後方検索を副作用なしで提供し、コードの可読性・安全性が向上します。
TypedArray にも同様のメソッドが追加され、数値データ処理で 30 % 程度 の速度改善が期待できます（V8 ベンチマーク参照）。
Immutable 系メソッド toSorted・toReversed・toSpliced・with により、状態管理コードがシンプルに。ビルドサイズへの影響は最小です。
Promise.allSettled と String.prototype.replaceAll の仕様統一でエラーハンドリングと文字列操作の信頼性が向上。
Babel／TypeScript の設定例を活用すれば、古いブラウザでも安全に ES2023 機能を利用でき、導入リスクは低く抑えられます。

次のステップ：自プロジェクトの対象ブラウザリストと CI 結果を照らし合わせ、上記判定基準を満たすか確認したうえで、段階的に機能を置き換えていくことを推奨します。

参考リンク

[^1]: caniuse.com – ECMAScript 2023 features, https://caniuse.com/ecmascript-2023
[^2]: MDN Web Docs – Compatibility tables for ES2023, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects#compatibility
[^3]: caniuse.com Global usage data (2024‑04), https://caniuse.com/usage-table
[^4]: 「Modern JavaScript in Practice」(O'Reilly, 2023) – コード量削減事例
[^5]: V8 Blog – “New array methods in ES2023”, 2024‑01, https://v8.dev/blog/es2023-array-methods
[^6]: core-js release notes 3.30 – Module size breakdown, https://github.com/zloirock/core-js/releases/tag/v3.30.0