開発者アンケートからJavaScriptの新メソッドと注目フレームワークを紹介。Reactの機能進化も

「新発見！フロントエンド技術の今」の連載。第19回のテーマはJavaScriptの最新トレンドです。

はじめに

State of JavaScriptは、JavaScriptエコシステムの最新動向を調査・分析し、世界中の開発者に共有するための年次レポートです。JavaScriptにおいてどのような機能が注目されていて、実際にどれくらい使われていて、今後はどのようになっていくのか、そういったトレンドを読み取るのに最適なサイトでもあります。

本連載では、これまでも「フレームワーク」（第3回）、「JavaScript」（第7回）、「ランタイム」（第8回）、「バンドラー」（第12回）、「テスト」（第13回）でこのサーベイの結果を引用してきました。そして、第17回では前年度のサーベイであるState of JavaScript 2024の結果を解説しました。 ▲State of JavaScript 2025トップ（出典：https://2025.stateofjs.com/en-US/）

最新のサーベイの結果は、2026年1月に2025年版として公開されました。全体の構成は2024年版から変わらず、エントリーしている機能も大きく変化していないのですが、それでもよく眺めるといくつかの「新顔」を発見できます。今回は、これらの「新顔」たちにフォーカスし、その概要を紹介していきます。

機能 — 構文機能（Features―Syntax Features）から

構文機能（Syntax Features）には、以下の機能が登場しました。

• Iterator Method：Iteratorオブジェクトにfilterやmapなどのヘルパーメソッドが追加
• RegExp.escape：RegExpクラスに文字列をエスケープ処理する静的メソッドの追加
• Float16Array：外部とのインタフェースのための16ビット長の浮動小数点数配列の追加

▲Syntax Features（出典：https://2025.stateofjs.com/en-US/features/#syntax_features）

いずれも、2025年にBaselineでNewly Availableとなった機能です。以降、これらについて見ていきます。

次世代の標準―Iterator Method

Iterator Methodとは、イテレータ（Iteratorオブジェクト）に新しく実装されたヘルパーメソッド群です。以下の表に挙げるメソッドが実装されました。この恩恵を一言で表現すると、Arrayオブジェクトの同名メソッドに比較してはるかに実行効率がよくなった、ということです。

メソッド	概要
Iterator.prototype.drop※	指定した数の要素をスキップし、その後の要素のみを返す
Iterator.prototype.every	すべての要素が条件を満たすかどうかを判定する
Iterator.prototype.filter	条件を満たす要素だけを抽出する
Iterator.prototype.find	条件を満たす最初の要素を返す
Iterator.prototype.flatMap	各要素をマッピングし結果をフラットなイテレータとして返す
Iterator.prototype.forEach	各要素に対して指定した処理を実行する
Iterator.prototype.map	各要素に対して処理を施す
Iterator.prototype.reduce	すべての要素を集約して単一の値にまとめる
Iterator.prototype.some	少なくとも1つの要素が条件を満たすかどうかを判定する
Iterator.prototype.take※	指定した数の要素だけを返す
Iterator.prototype.toArray	イテレータを配列に変換する

▲Iterator Methodsのヘルパーメソッド（※はArrayにはないメソッド）

かつては、これらのメソッドを利用できたのは配列（Array）のみでした（つまりArray.prototype.xxxxx）。また、そもそもメソッドをつなげるたびに「中間配列」がメモリ上に生成されていました。

const arrayResult = [1, 2, 3, 4, 5]
  .filter(x => x % 2 === 1) // ここで配列生成
  .map(x => x + 1);         // またここで配列生成

数万件規模のデータを扱う場合、この中間配列の生成はメモリを圧迫し、処理速度を低下させる大きな原因となります。また、イテレータを扱う際も、一度スプレッド演算子などで配列に展開する必要がありました。

function *iter() {
  yield 1;
  yield 2;
  yield 3;
  yield 4;
  yield 5;
};
const IterResult = [...iter()].filter(x => x % 2 === 1).map(x => x + 1);

そこで、イテレータでこれらのメソッドを直接使えるようになりました。上記の例は、以下のように置き換えられます。

const iterResult2 = iter().filter(x => x % 2 === 1).map(x => x + 1);

この最大のメリットは、「どれだけデータ量が増えても、必要なメモリはほぼ一定」という点です。

これは、イテレータの遅延評価（Lazy Evaluation）という性質によるものです。「必要になったら次の要素を取りに行く」仕組みのため、メソッドを連結してもデータの流れがパイプライン化され、無駄なメモリ消費を徹底的に抑えられます。大量のデータ処理や、無限ストリームの操作において、この効率性は決定的な差となります。

正規表現の安全性を高める救世主―RegExp.escape

RegExp.escapeは、任意の文字列を「正規表現のパターン」として安全に扱えるよう、メタ文字を自動でエスケープする静的メソッドです。外部からの入力値（ユーザー名やドメイン名など）を動的に正規表現へ組み込む際、これまでは意図しないマッチングやバグの原因となっていました。以下の例であれば、ドメイン文字列に含まれるドット（.）がメタ文字と解釈されてしまうわけです。

const domain = "levtech.jp";
const re = new RegExp(`https?://${domain}(?=/)`, "g")
　　→https?://levtech.jp(?=/)　となりlevtech-jpなどもマッチしてしまう

このようなときにescapeメソッドを使うと、メタ文字がエスケープされたリテラルパターンとできるので、ドットの有無に関係ないマッチ結果を期待できます。

const domain = RegExp.escape("levtech.jp");
const re = new RegExp(`https?://${domain}(?=/)`, "g")
　　→https?://¥x6cevtech¥.jp(?=/)　となり先頭文字やメタ文字がエスケープされる

これらを含めた、リテラルパターンへの主な変換の内容は以下のとおりです。

• 正規表現のメタ文字（^、$、\、.、*、+、?、(、)、[、]、{、}、|および区切り文字の/）は、\を前置してエスケープされる。単純にメタ文字を無効化するため
• 文字列の最初の文字が、数字（0～9）または英文字（a～z、A～Z）である場合、\xを使用して16進数にエスケープされる。直前のパターンに影響されないようにするため
• 他の区切り記号（,、-、=、<、>、#、&、!、%、:、;、@、~、'、`、"など）は、\xを使用して16進数にエスケープされる。これらの記号は\ではエスケープできないため
• 空白文字は\x20としてエスケープされる。その他の非ASCIIの改行およびホワイトスペース文字は、UTF-16コードを表す\uXXXXに置き換えられる
• その他、Unicode関連のエスケープ処理など

次世代グラフィックス・AIへの架け橋―Float16Array

Float16Arrayは、16ビット（半精度）浮動小数点数を扱うための新しい型付き配列（TypedArray）です。JavaScriptにはこれまで、Uint8ArrayやFloat64Arrayといったバイナリ操作用の型が存在していましたが、そこに「軽量な浮動小数点」を扱うための選択肢が加わりました。

主な用途は、高い計算精度よりも「メモリ効率」と「スピード」が重視される最先端の領域です。

• 深層学習（AI）：Stable Diffusionなどのモデルにおいて、パラメーターの軽量化と高速化に寄与
• 次世代グラフィックス：WebGPUやWebGLを用いた描画処理の効率化
• リソース節約：Float32と比較してメモリ使用量を半分に抑えられるため、大量の数値を扱うブラウザ環境で威力を発揮する

日常的なWeb開発で直接触れる機会は少ないかもしれませんが、ブラウザ上でAIや高度な3D表現を実現する上では欠かせない、インフラ的な進化と言えます。

ライブラリ―バックエンドフレームワーク（Library―Back-end Frameworks）

ライブラリ（Library）カテゴリのバックエンドフレームワーク（Back-end Frameworks）に、いくつかの新顔が登場しました。いずれも、まだまだ利用者は少ないものの、満足度の高いフレームワークとしてHono、Nitro、ElysiaJSが注目されています。

▲Back-end Frameworks（出典：https://2025.stateofjs.com/en-US/libraries/back-end-frameworks/）

いずれも、BunやDenoといった新しいランタイムをはじめ、多彩なランタイムに広く対応しているのが特徴です。

Web標準に準拠した「速くて、どこでも動く」軽量旗手―Hono

Honoとは、JavaScript/TypeScriptで書かれた軽量なWebフレームワークです。特にCloudflare WorkersやBun、Deno、Node.jsなどさまざまなJavaScriptランタイム環境で動作することを特徴としています。シンプルなAPI設計と優れたパフォーマンスで、REST APIやサーバーレスアプリケーションの開発に向いています。

▲Hono - Web framework built on Web Standards（出典：https://hono.dev/）

Nuxtの心臓部から生まれた「次世代サーバーツールキット」―Nitro

Nitroは、人気フレームワーク「Nuxt」の裏側を支えるエンジンとして誕生した、極めてポータビリティの高いフレームワークです。Node.js、Deno、Cloudflare Workers、Vercel Edge Functionsなど、さまざまなJavaScriptランタイム環境で動作します。APIルーティングやミドルウェアの仕組み、静的ファイル配信、サーバーレスデプロイの最適化といった機能を備えており、特にパフォーマンスやポータビリティに優れています。

▲Nitro - Next Generation Server Toolkit（出典：https://nitro.build/）

シンプルな設定で複数のターゲットへのデプロイを可能にしているので、開発者が環境ごとの違いを意識せずにアプリケーションを構築できる点も特徴です。これにより、モダンなWebアプリケーションの開発における柔軟性と効率の向上が期待できます。

型安全とパフォーマンスを極めた「人間工学」フレームワーク―ElysiaJS

ElysiaJSは、TypeScriptで開発された軽量かつ高速なWebフレームワークです（「エリシア」と読みます）。公式サイトに訪れた方は、パステルカラーで統一されたポップな雰囲気に圧倒されるかもしれません。ミドルウェアやプラグインなどの拡張性に優れ、型安全なAPI設計をサポートしている点が特徴です。

▲Elysia - Ergonomic Framework for Humans | ElysiaJS（出典：https://elysiajs.com/）

Node.jsやBunなどのさまざまなJavaScriptランタイム環境で動作しますが、特にBunランタイム環境で真価を発揮し、高速かつ「型」に強いフレームワークです。シンプルな記述で効率よくAPIやWebサービスを作成できるため、近年注目を集めています。

State of React 2025から見る注目機能

State of JavaScriptに関連して、State of React 2025も2月に公開されました。このサーベイからも、新しく登場した機能をいくつかピックアップして紹介します。

注目したいのは、時間経過で追う新API（New APIs Over Time）です。いずれも興味関心が高いのですが、2025年版では以下の機能が登場し、特に関心が高いことを示しています。

▲State of React 2025—New APIs Over Time（出典：https://2025.stateofreact.com/en-US/features/#new_apis_ratios）

手動最適化からの解放―React Compiler

React Compilerは、2025年10月リリースのReact 19.2に追加された、Reactのコードをより効率的に最適化するためのコンパイラです。これまで開発者が頭を悩ませてきたuseMemoやuseCallbackによる手動のキャッシュ管理が、コンパイラによる自動最適化に置き換わります。コードがシンプルになるだけでなく、人間が書き漏らしていた最適化ポイントまで網羅されるため、レンダリング速度の向上と不要な再計算の削減が期待できます。

賢く「隠す」新世代の表示制御―＜Activity＞

＜Activity＞もReact 19.2から追加された新機能で、ユーザーの操作や状態の変化をより直感的に管理します。＜Activity＞を利用することで、例えば、タブ切り替えで背後に隠れたコンテンツを「アンマウント（破棄）せずに一時停止」させるといった管理が容易になります。ページ遷移やフォームの状態保持がより柔軟になるだけでなく、ユーザーが「さっきの画面に戻る」際のレスポンスが改善します。

ネイティブアプリのような滑らかな遷移―＜ViewTransition＞

＜ViewTransition＞は、ページやコンテンツの遷移時にスムーズなアニメーションを実現するための機能です。React 19.2においてもReact's Canaryのみで利用できる実験的な機能ですが、早期の正式サポートが期待されています。＜ViewTransition＞は、以下のようにコンポーネントで囲んだ部分に、属性で指定されるアニメーションが適用されます。

<ViewTransition enter="auto" exit="auto" default="none">
  <Video video=… />
</ViewTransition>

＜ViewTransition＞により、ユーザーのアクションによる画面変化が自然になり、アプリケーション全体の操作体験が向上することが期待できます。開発者は、アニメーションのための複雑なコードを記述することなく、一貫性のある遷移効果を簡単に導入できる点が魅力です。

おわりに

今回は、JavaScriptエコシステムのサーベイであるState of JavaScriptの2025年版を、特に機能面に絞って紹介しました。自分の愛用する機能が意外な評価だったり、初めて目にするような機能があったりと、なかなか新鮮なサーベイではなかったでしょうか。

あわせて、関連するサーベイであるState of React 2025からも、関心の高い新機能を紹介しました。サーベイの2026年版登場の折には、改めて紹介する予定です。