← ブログ一覧
2026-03-05 Frontend

JavaScriptの最新機能まとめ

ES2025が正式にリリースされ、JavaScriptはまたひとまわり便利になりました。今回は実際の開発で「あ、これ使える！」と感じる機能を中心に、コード例を交えながらまとめていきます。

Iterator Helpers — 配列っぽく、でも省メモリに

これまでジェネレーター関数やイテレーターを扱うには、一度 Array.from() などで配列に変換してから map や filter をかける必要がありました。ES2025 の Iterator Helpers により、イテレーター自身に .map() / .filter() / .take() / .drop() / .toArray() などのメソッドが直接生えてきます。

中間配列を生成しないので、大量データを扱う処理でメモリ効率が大きく改善されるのが嬉しいポイントです。

function* numbers() {
  yield* [1, 2, 3, 4, 5, 6];
}

const result = numbers()
  .map(x => x * 2)
  .filter(x => x > 6)
  .toArray();

console.log(result); // [8, 10, 12]

ジェネレーターを使った無限リストからの先頭N件取得なども、.take(n).toArray() の一発で書けるようになります。パイプライン的な処理スタイルが好きな人にはたまらない機能です。

Set の集合演算メソッド — lodash いらずに

これまで集合演算（和集合・積集合・差集合など）をやろうとすると、lodash などのライブラリに頼るか、自前でゴリゴリ書くしかありませんでした。ES2025 からは Set オブジェクト自体にこれらのメソッドが追加されています。

  • union(other) — 和集合
  • intersection(other) — 積集合
  • difference(other) — 差集合
  • symmetricDifference(other) — 対称差
  • isSubsetOf(other) / isSupersetOf(other) — 部分集合の判定
  • isDisjointFrom(other) — 互いに素かどうか
const frontend = new Set(["HTML", "CSS", "JavaScript"]);
const backend  = new Set(["JavaScript", "Python", "Go"]);

console.log(frontend.union(backend));
// Set {"HTML", "CSS", "JavaScript", "Python", "Go"}

console.log(frontend.intersection(backend));
// Set {"JavaScript"}

console.log(frontend.difference(backend));
// Set {"HTML", "CSS"}

タグの絞り込みや権限チェックなど、実務でも地味に使いどころが多い機能です。ライブラリの依存が減るのも地味に嬉しい。

Promise.try — 同期・非同期を統一して扱う

関数が同期処理を返すのか非同期処理を返すのか、呼び出し側が意識しないといけない場面ってありますよね。Promise.try() はそんな悩みを解消してくれる新メソッドです。渡した関数の戻り値が同期でも非同期でも、必ず Promise として扱われます。

function maybeAsync(flag) {
  if (flag) {
    return fetch("/api/data").then(r => r.json());
  }
  return { message: "sync result" };
}

Promise.try(() => maybeAsync(false))
  .then(data => console.log(data))
  .catch(err => console.error(err));

これにより、ユーティリティ関数やライブラリ側で「同期かもしれないし非同期かもしれない」処理を書くとき、わざわざ new Promise(resolve => resolve(fn())) のようなラップをしなくてよくなります。エラーハンドリングも .catch に一本化できるのでコードがシンプルになります。

Import Attributes と RegExp の強化

Import Attributes（JSON Modules）

ES2025 では import ... with { type: "json" } という構文で、JSON ファイルを直接 ES モジュールとしてインポートできるようになりました。これまでは fs.readFileSync で読んだり、別途パースしたりと手間がかかっていた部分が、シンプルな1行で書けます。

import config from "./config.json" with { type: "json" };

console.log(config.apiEndpoint); // JSONの中身を直接参照

ブラウザでも Node.js でも動作するので、設定ファイルや翻訳データの読み込みに便利です。

RegExp.escape

ユーザー入力を正規表現パターンに含めるとき、特殊文字をエスケープし忘れてバグになる…という経験、ありませんか？ RegExp.escape() はその問題を一発で解決してくれます。

const userInput = "(割引10%+税)";
const safe = RegExp.escape(userInput);
// => "\\(割引10%\\+税\\)"

const regex = new RegExp(safe, "g");
document.body.innerHTML.replace(regex, "<mark>$&</mark>");

セキュリティ的にも安全で、動的に正規表現を組み立てる場面で活躍します。

ES2025 の機能は Chrome・Firefox・Node.js の最新版で概ね利用可能です。古い環境へのサポートが必要な場合は Babel + core-js でのトランスパイルを検討しましょう。次の ES2026 では Pipeline Operator（|>）や Record/Tuple などのさらに大きな変更が控えています。JavaScript からますます目が離せませんね。