2025年にJavaScript開発者なら必ず知っておくべき機能

 (waspdev.com)
31 ポイント 投稿者 GN⁺ 2025-04-16 | 4件のコメント | WhatsAppで共有
  • JavaScriptは2025年になっても進化を続けており、あまり知られていないものの非常に便利な機能がある
  • 新しい Iterator ヘルパーメソッド は、大規模なデータ変換時により メモリ効率よく 動作する
  • 配列の末尾からアクセスできる at()、シンプルに使える Promise.withResolvers()、ディープコピー用の structuredClone() など
  • Set に対する集合演算 や テンプレート文字列のタグ関数、WeakMap/WeakSet の使い方 は、今でも多くの開発者が見落としている

Iterator Helper メソッド

  • 従来の arr.filter().map() のようにチェーンすると、各段階で新しい配列が生成されて非効率
  • arr.values().drop(10).take(10).map(...).toArray() のように イテレータベースのチェーン へ改善できる
  • 主なメソッド:
    • drop(): 最初の n 個を省略
    • take(): 最初の n 個だけ取得
    • filter(), map(), flatMap(): 配列メソッドと同様に動作
    • reduce(), some(), every(), find(): 条件テストと累積計算をサポート
    • toArray(): 最終的な配列に変換
  • Safari は 2025年3月31日からサポート開始、まだすべてのブラウザが対応しているわけではない

Array at()

  • arr.at(n) は arr[n] と似ているが、負のインデックスで後ろからアクセス可能
  • 例: [10, 20, 30].at(-1) → 30
  • arr[arr.length - 1] のような面倒な書き方をせずに最後の要素へアクセスできる

Promise.withResolvers()

  • 従来の方法: new Promise((resolve, reject) => { ... }) で外側に resolve / reject を保存
  • これからは: const { promise, resolve, reject } = Promise.withResolvers() で 簡潔かつ直感的に利用可能

String.replace() コールバック活用

  • replace() と replaceAll() の第2引数には、文字列だけでなくコールバック関数も渡せる
  • 例: "X, X, X".replaceAll("X", (match, i) => match + i) → "X0, X3, X6"
  • 1回でさまざまな置換が可能 → パフォーマンスとメモリの面で効率的

変数の入れ替え（Swap）

  • 従来の方法: temp 変数を使用
  • 簡潔な方法: [a, b] = [b, a] による 配列分割代入での変数入れ替え

structuredClone()

  • JSON.stringify() + JSON.parse() の代わりに、より正確で効率的なディープコピーをサポート
  • 利点:
    • NaN, undefined, bigint などもサポート
    • 循環参照 も安全にコピー
    • 大きなオブジェクトに対して メモリ効率と速度効率が高い

Tagged Template Literals

  • テンプレート文字列を特定の関数でパースできる
  • HTML エスケープ処理などの 動的な文字列後処理に有用
  • 例:
    escapeHtml タグ関数で <br> ${'<br>'} → <br> <br>

WeakMap / WeakSet

  • 通常の Map, Set と似ているが:
    • キーにはオブジェクトのみ許可（プリミティブ値は不可）
    • GC の対象になると自動的に削除される
  • 循環参照の可能性がある場合や、副作用なくオブジェクトのメタデータを保存 したいときに適している

Set の集合演算サポート

JavaScript の Set オブジェクトに対して、さまざまな論理演算が新たに追加された:

  • difference(): 差集合 (A - B)
  • intersection(): 積集合 (A ∩ B)
  • union(): 和集合 (A ∪ B)
  • symmetricDifference(): 対称差集合 (A △ B)
  • isDisjointFrom(): 共通要素がないかどうか
  • isSubsetOf(): 部分集合かどうか
  • isSupersetOf(): 上位集合かどうか

関連記事

4件のコメント

 
wfedev 2025-04-23

リテラルをパースすると変数まで文字列として出てくる問題が解決されたようですね。共有ありがとうございます。
 
pompapa 2025-04-17

例: "X, X, X".replaceAll("X", (match, i) => match + i) → "X0, X1, X2"

例が間違っています。i には一致した位置が入ります。
したがって、結果は "X0, X3, X6" です。
 
xguru 2025-04-17

ああ、そうですね。AIが例を誤って作ってしまったようです。修正しておきました。鋭いご指摘ありがとうございます！
 
click 2025-04-16

values は Java の Stream API のような感じなので比較してみたところ、配列サイズが小さい場合は values を使わずに filter したほうが速いですね。イテレータベースなので、チェイニングが多くなるほど values を一度通す方式のほうが速くなる効果もありそうです。ベンチマークは https://jsperf.app/dixutu を参照してください。