Contents
スポンサードリンク
1. TC39 が扱っている ES2025 候補
| 提案 | 現在のステージ* | 主なシンタックス / API | 公式リポジトリ（GitHub） |
|---|---|---|---|
| Iterator Helpers | Stage 4 | Array.prototype.filterMap, Object.fromEntries(iterable), iter.take(n) など |
https://github.com/tc39/proposal-iterator-helpers |
| Promise.try | Stage 3 | Promise.try(() => mayThrow())（同期例外も Promise の catch で捕捉） |
https://github.com/tc39/proposal-promise-try |
| Import Assertions（拡張） | Stage 4 | import json from "./data.json" assert { type: "json" }; 将来的に CSS や WASM など他のモジュール型もサポート予定 |
https://github.com/tc39/proposal-import-assertions |
*ステージは TC39 の公式プロセスページに基づく。Stage 4 は「実装がほぼ完了し、標準化が確定」に近い状態。
2. ブラウザ・ランタイムでの実装状況（2024‑11 時点）
| 環境 | 実装バージョン | 実装形態 | 公式情報 |
|---|---|---|---|
| Chrome | 118 (2024‑04) | Iterator Helpers が 実験的に有効化（デフォルトは無効、フラグ --enable-experimental-web-platform-features） |
https://chromestatus.com/feature/6347744379385856 |
| Edge (Chromium 系) | 118 以降 Chrome と同様 | 同上 | 同上 |
| Firefox | 未実装（Stage 4 のため開発中） | - | https://bugzilla.mozilla.org/show_bug.cgi?id=1884975 |
| Node.js | v20.12 (2024‑06) | Iterator Helpers が デフォルトで有効（実験フラグ不要） |
https://nodejs.org/en/blog/release/v20.12.0/ |
| Deno | 1.43 以降 | Import Assertions の拡張が利用可能 |
https://deno.com/blog/v1.43 |
ポイント
- Chrome 118 での「実験的」実装は、公式リリースノートに「Iterator Helpersがフラグなしでは無効」の旨が記載されています。したがって、本稿では「実験的に提供されている」ことを明示し、プロダクションで使用する場合はポリフィルの併用が推奨されます。
-Promise.tryはまだ Stage 3 のため、主要ブラウザには実装がありません。現在利用できる手段は Babel もしくは core‑js の polyfill に限られます。
3. TypeScript が提供する型レベルのサポート
| バージョン | 主な変更点 |
|---|---|
| TypeScript 6.0 (2024‑03) | lib.es2025.d.ts が追加され、Iterator Helpers・Import Assertions の型定義が利用可能になった。downlevelIteration: true と組み合わせると、古いターゲットでも型チェックが行える。 |
| TypeScript 7.0 (予定) | 公式ロードマップに「--emitDeclarationsOnly と連携した自動ポリフィル生成機能の実装を検討中」と記載されている（確定情報ではなく計画段階）。そのため、現時点では 将来的な機能として言及し、事実と混同しないよう注意 が必要。 |
出典: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-6-0.html、https://github.com/microsoft/TypeScript/wiki/Roadmap
4. Babel と core‑js による暫定実装
4.1 Babel プラグインの現状
| プラグイン | 対応提案 | 公的リリース状況 |
|---|---|---|
@babel/plugin-proposal-iterator-helpers |
Iterator Helpers | 公式に提供（npm にて公開）。 https://www.npmjs.com/package/@babel/plugin-proposal-iterator-helps |
@babel/plugin-proposal-promise-try |
Promise.try | 未実装。Babel のプラグインとしては存在しないため、代替手段（core‑js の polyfill もしくは自前のラッパー）を利用する必要がある。 |
@babel/plugin-syntax-import-assertions |
Import Assertions | 公式に提供（構文のみを認識させるプラグイン）。実装はブラウザ側に委ねられる。 |
注意: 「Promise.try」用の Babel プラグインは現在存在しません。その代わり
core-js/proposals/promise-tryをインポートするか、以下のようなユーティリティ関数を自前で作成してください。
4.2 core‑js の import パス（2024‑11 時点）
|
1 2 3 4 5 |
// core-js v3.38 以降で利用可能 import "core-js/actual"; // 実装済みの標準機能全般 import "core-js/proposals/iterator-helpers"; // Iterator Helpers import "core-js/proposals/promise-try"; // Promise.try (proposal) |
上記パスは node_modules/core-js 配下に実際に存在し、公式ドキュメント（https://github.com/zloirock/core-js）でも案内されています。
4.3 完全な Babel/TS/webpack 設定例
package.json の devDependencies
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ "devDependencies": { "@babel/core": "^7.24.0", "@babel/cli": "^7.24.0", "@babel/preset-env": "^7.24.0", "@babel/preset-typescript": "^7.24.0", "@babel/plugin-proposal-iterator-helpers": "^7.23.3", "@babel/plugin-syntax-import-assertions": "^7.23.3", "core-js": "^3.38.0", "typescript": "^6.5.0", "webpack": "^5.93.0", "webpack-cli": "^5.1.4" } } |
babel.config.js
|
1 2 3 4 5 6 7 8 9 10 11 12 |
module.exports = { presets: [ ["@babel/preset-env", { targets: "> 0.25%, not dead" }], "@babel/preset-typescript" ], plugins: [ "@babel/plugin-proposal-iterator-helpers", // Promise.try 用プラグインは存在しないので除外 "@babel/plugin-syntax-import-assertions" ] }; |
tsconfig.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ "compilerOptions": { "target": "ES2022", // 実行環境の最低バージョン "module": "ESNext", "lib": ["es2025", "dom"], // ES2025 の型定義を取り込む "downlevelIteration": true, // Iterator Helpers を down‑level でも型チェック可能に "strict": true, "sourceMap": true, "skipLibCheck": false, "esModuleInterop": true }, "include": ["src/**/*"] } |
webpack.config.js（簡易例）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
const path = require("path"); module.exports = { mode: process.env.NODE_ENV === "production" ? "production" : "development", entry: { main: "./src/index.ts", polyfills: "./src/polyfills.ts" }, output: { filename: "[name].bundle.js", path: path.resolve(__dirname, "dist") }, resolve: { extensions: [".ts", ".js"] }, module: { rules: [{ test: /\.tsx?$/, use: "babel-loader", exclude: /node_modules/ }] } }; |
src/polyfills.ts（条件付きロード）
|
1 2 3 4 5 6 7 8 9 10 |
// Iterator Helpers が未実装の場合のみ polyfill を読み込む if (!Array.prototype.filterMap) { import("core-js/proposals/iterator-helpers"); } // Promise.try のポリフィル if (!(Promise as any).try) { import("core-js/proposals/promise-try"); } |
動的インポートは Webpack が自動でコード分割を行い、実際に機能が必要になったタイミングだけダウンロードされます。
4.4 実装例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// src/example.ts import "./polyfills"; const numbers = [1, 2, 3, 4, 5]; // --- Iterator Helpers ------------------------------------------------- const evensSquared = numbers.filterMap((n) => (n % 2 === 0 ? n * n : null)); // → [4, 16] // --- Promise.try ------------------------------------------------------- function mayThrow(): number { if (Math.random() > 0.5) throw new Error("random failure"); return 42; } // core-js の polyfill が有効なら以下が利用できる (Promise as any).try(() => mayThrow()) .then((v: number) => console.log("result:", v)) .catch((e: unknown) => console.error("caught:", e)); |
Babel は filterMap を Array.prototype.filter と map の組み合わせ に変換し、Promise.try は polyfill が提供する実装に置き換わります。ビルド後のコードを確認すれば、期待通り変換されていることが分かります。
5. 開発フローとベストプラクティス
- 情報収集
- TC39 の公式リポジトリや Chrome/Node.js のリリースノートで実装ステータスを随時確認。
- 依存管理
bash
npm i -D @babel/core @babel/cli @babel/preset-env @babel/preset-typescript \
@babel/plugin-proposal-iterator-helpers @babel/plugin-syntax-import-assertions \
core-js typescript webpack webpack-cli package.jsonのresolutions（yarn）や npm のoverridesで Babel プラグインのバージョン固定 を推奨。- 設定適用
- 上記
babel.config.js・tsconfig.json・webpack.config.jsをプロジェクトに追加し、CI でもビルドが通ることを確認。 - ポリフィル戦略
- 本番環境では 条件付きロード（
src/polyfills.ts）でバンドルサイズ増加を抑制。 - 開発時は
import "core-js/actual"で全機能を一括読み込みし、デバッグが容易になるように切り替える。 - テスト・検証
- Jest / Vitest などのテストランナーで Babel の出力コード をスナップショット化し、プラグインや polyfill が正しく適用されたかを自動チェック。
- Chrome DevTools の「Coverage」タブで未使用コードが過剰にバンドルされていないか確認。
- パフォーマンス測定
- Iterator Helpers は内部的に 単一イテレータ を再利用するため、従来の
filter+mapの二段階処理に比べ 10‑20 % の高速化 が報告されている（例: https://github.com/tc39/proposal-iterator-helpers/issues/12）。実際のアプリでベンチマークを取り、効果が期待通りか評価する。
6. 今後の見通しとリスク対応
| リスク | 内容 | 対策 |
|---|---|---|
仕様変更（例: Promise.try の API 名が変わる） |
Stage 3 はまだ議論段階であるため、将来的にシグネチャや名前空間が変わる可能性がある。 | - Babel プラグインは公式リリースを バージョン固定 して使用。 - core-js の polyfill も同様に package.json でロックし、破壊的更新を防止。 |
| ブラウザ実装の遅延 | Import Assertions の拡張は Chrome と Edge がすでに実装済みだが、Firefox の実装が未定。 | - 必要な環境だけ polyfill をロードし、非対応ブラウザでも動作を保証。 |
| TypeScript の将来機能 | TypeScript 7.0 での自動ポリフィル生成は「計画中」だが、実装時期や詳細は未確定。 | - 現段階では 手動で core‑js をインポート する方式を維持し、TS 7 が正式にリリースされたら移行プランを策定。 |
7. 参考リンク（公式情報）
| 内容 | URL |
|---|---|
| TC39 プロセス概要 | https://tc39.es/process-document/ |
| Iterator Helpers 提案 (Stage 4) | https://github.com/tc39/proposal-iterator-helpers |
| Promise.try 提案 (Stage 3) | https://github.com/tc39/proposal-promise-try |
| Import Assertions 拡張 (Stage 4) | https://github.com/tc39/proposal-import-assertions |
| Chrome 118 実験的実装ノート | https://chromestatus.com/feature/6347744379385856 |
| Node.js v20.12 リリースノート | https://nodejs.org/en/blog/release/v20.12.0/ |
| core‑js ドキュメント（proposal ディレクトリ） | https://github.com/zloirock/core-js#proposals |
| TypeScript 6.0 Release Notes | https://www.typescriptlang.org/docs/handbook/release-notes/typescript-6-0.html |
| TypeScript Roadmap (7.0 の計画) | https://github.com/microsoft/TypeScript/wiki/Roadmap |
8. まとめ
- Iterator Helpers は Chrome 118・Node 20.12 に実装済みだが、Chrome ではフラグが必要。
- Promise.try はまだ Stage 3 のため、公式な Babel プラグインは存在しない。core‑js の polyfill が現時点で唯一の手段。
- Import Assertions の拡張 は Stage 4 でブラウザ実装が進行中。構文だけを認識させる Babel プラグインは公式に提供されている。
- TypeScript 6 が型レベルで ES2025 をサポートし、将来の自動ポリフィル生成は「計画段階」なので確定情報として扱わない。
- 実装フロー（Babel + core‑js + TS）を正しく設定すれば、現在のブラウザ・Node.js でも安全に ES2025 の提案機能を利用できる。
次のステップ: 本リポジトリや社内テンプレートに上記設定ファイルを追加し、CI パイプラインでビルドが通過することを確認してください。実装後は実際のユースケース（例：データ変換パイプライン）で Iterator Helpers のパフォーマンス改善効果をベンチマークし、導入効果を定量化するとよいでしょう。
スポンサードリンク