処理高速化や利便性向上に期待。「State of JavaScript」最新版で見るJS開発者注目の新メソッド

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

• keyboard_arrow_down はじめに
• keyboard_arrow_down 機能（Features）
• keyboard_arrow_down ライブラリ（Libraries）
• keyboard_arrow_down おわりに

「State of JavaScript」とは、JavaScriptエコシステムの最新動向を調査・分析し、世界中の開発者に共有するための年次レポートです。本連載では、これまでも「フレームワーク」（第3回）、「JavaScript」（第7回）、「ランタイム」（第8回）、「バンドラー」（第12回）、「テスト」（第13回）でこのサーベイの結果を引用してきました。

最新のサーベイの結果は、2025年1月に2024年版として公開されました。全体の構成は2023年版から大きく変わりませんが、今回は、「Features」（機能）にSet、Objectなどの新しいサブカテゴリがいくつか追加されました。また、既存のカテゴリにおいても大きく傾向は変わらないものの、新しいメソッドが調査対象に追加されています。今回は、特にこれらの「新顔」たちにフォーカスしてどのような機能が注目されていて、実際にどれくらい使われていて、今後はどのようになっていくのか、そういったトレンドを読み取っていきます。

State of JSのメインサーベイは、言語機能についてリサーチする「Features」です。誰もが関心のあるテーマということで、リサーチの内容も微に入り細に入り、という結果になっています。この中から、2024年版で新しく調査対象となったカテゴリや、各カテゴリに新登場したものを中心に眺めてみます。

配列機能（Array Features）

▲Features—Array Features（画像出典：https://2024.stateofjs.com/en-US/features/#array_features）

まずは、「配列機能」（Array Features）カテゴリです。このカテゴリで2024年版で新しく登場したのは「array.fromAsync()」。反復可能オブジェクト（※）あるいは非同期反復可能オブジェクトから配列を生成するためのメソッドです。

※　配列や文字列のようにイテレータとしての機能を持った（＝foreachでループできる）オブジェクトを指します。

従来、反復可能オブジェクトから配列を生成するメソッドには、Array.fromがありました。Array.fromAsyncメソッドは、このメソッドの非同期反復可能オブジェクト対応版ともいえますが、動作は異なります。

というのも、Array.fromAsyncメソッドでは、受け取った反復可能オブジェクトが同期／非同期にかかわらず必ずPromiseを返します（図の上部）。そのため、値を取り出すにはthenメソッドなどを使う必要があります。

非同期反復可能オブジェクトの場合、Array.fromメソッドでは、そのままPromiseからなる配列が返されるので、個々のPromiseについての処理を個別に実施する必要があり、処理は多少煩雑です。これに対してArray.fromAsyncメソッドでは、全てのPromiseの結果をまとめたPromiseとして返されるので、そのままthenメソッドなどで結果を取り出せます（図の下部）。

Array.fromAsyncメソッドは、複数のfetch処理の結果をまとめて配列化したいときなどに威力を発揮すると思われ、今後利用が伸びていくのではないでしょうか。「Features—Reading List」でも4位となっており、高い注目度が窺われます。

非同期機能（Async Features）

▲Features—Async Features（画像出典：https://2024.stateofjs.com/en-US/features/#async_features）

「Async Features」（非同期機能）は、非同期処理に関連するメソッド群をまとめたカテゴリです。

2024年版では、「Promise.try()」が新たな調査項目として追加となりました。2025年1月にベースライン化され、ES2025に含まれる予定の新機能でもあります。

こちらは同期コールバック関数のエラー処理を簡単にするメソッドです。与えられたコールバック関数が同期／非同期にかかわらずPromiseを返すことで、Promiseのthenメソッドやcatchメソッドなどを用いた、統一されたエラー処理が可能になります。

「Async Features」のその他の動きとしては、「Promise.allSettled()」が若干ですが利用数を伸ばし、「Top-level await」が急落するという結果になっています。

「Promise.allSettled()」は、Promise.allメソッドと同様に複数の同期処理を実行します。ただし、Promise.allメソッドが、実行に失敗した処理があれば未完了の処理があっても全体の処理を停止するのに対して、Promise.allSettledメソッドは全ての処理が終了するまで待機するという違いがあります。非同期処理には、成功／失敗にかかわらず全体の終了を待ちたいというケースもあるので、そのようなときに有用なメソッドとして利用が伸びているのだと思われます。

「Top-level await」の急落は、少々不思議に感じたのが正直なところです。Top-level awaitの利用がモジュールに限定されることによる使いにくさか、フレームワークの利用が当たり前になってTop-level awaitそのものを書く機会が減っているか、そのように理由を想像しましたが、いずれも確証を持てるものではありません。

セット機能（Set Features）

▲Features—Set Features（画像出典：https://2024.stateofjs.com/en-US/features/#set_features）

2024年版からは、Featuresカテゴリに新たに「Set Features」（セット機能）が加わりました。セット（Set）とはコレクションの一つであり、値の集合を保持する機能を持ちます。

コレクションの中では比較的新しく、ES2015（ES6）で導入されました。セット内の値はユニークである（重複しない）ことが保証されています。ただし、順序の概念がないので、インデックスによる値へのアクセスはできません。

Setでは、基本的な操作として以下が用意されていました。

• ・コンストラクタによる生成
• ・add／delete／clearメソッドによる値の追加、削除、全削除
• ・size／hasメソッドによる要素数取得、存在確認
• ・for〜of文による全要素の取得

Setの名の通り、セットとは集合に相当するコレクションですが、ES2015におけるSetの導入当初はなぜか集合演算のためのメソッドがなく、この目的のためには自分で演算機能を実装する必要がありました。これが、2024年6月にベースライン化されたメソッドにより、ネイティブに集合演算を実施することができるようになりました。

2024年版で調査対象になったのは、これらの集合演算メソッドです。あいにく、調査結果ではNone（使ったことがない）が76％とまだまだ知名度は低いものの、ネイティブにサポートされることによる性能向上が期待されることから、これから使われていく可能性の高い機能といえます。

利用できるようになった集合演算メソッドは、以下のとおりです。いずれも、数学的な集合演算に相当する機能です。

• ・Set.union：和集合を生成して返す
• ・Set.intersection：共通部分を生成して返す
• ・Set.difference：差集合を生成して返す
• ・Set.isSubsetOf：部分集合であるかを返す
• ・Set.isSupersetOf：上位集合であるかを返す
• ・Set.symmetricDifference：対称差を生成して返す
• ・Set.isDisjointFrom：素集合となるかを返す

図は、Set.unionメソッドによる和集合を求める場合の例です。

オブジェクト機能（Object Features）

▲Features—Object Features（画像出典：https://2024.stateofjs.com/en-US/features/#object_features）

2024年版からは、Featuresカテゴリに新たに「Object Features」（オブジェクト機能）が加わりました。

オブジェクト（Object）とは、簡単に言えば名前（キー）と値の組からなるデータ型のことです。オブジェクトは階層構造をとることができ、値には他のオブジェクトや配列も入れられることから、複雑なデータ構造を表現することに向いています。

データの記法として有名なJSON（JavaScript Object Notification）は、オブジェクト記法をもとに標準化したものです。日常的な開発に非常に便利というか、欠かせないデータ型がオブジェクト（Object）です。

2024年版で調査対象になったのは、2024年にベースライン化された「Object.groupBy()」です。このメソッドを利用することで、SQL（Structured Query Language）のGROUP BY句のように、特定のキーでオブジェクトをグループ化できるようになります。C#やJavaなどの言語では早い段階でサポートされていたので、JavaScriptでも使えるようになることが望まれていました。

調査結果ではNone（使ったことがない）が67％とまだまだ知名度は低いのですが、メソッド単体で見て「使ったことがある」が早くも33％に達するので、これから使われていくことが間違いない機能といえます。

言語機能外にも、ライブラリ領域でビルドツールに動きがありました。

ビルドツールは、第12回で取り上げたテーマで、バンドラーとも呼ばれます。「Build Tools Ratios Over Time」を見ると、新顔として「Rspack」と「Rolldown」が登場しています。

Rspackは、2024年8月に正式版となったwebpack互換のバンドラーです。

特徴は、Rustというプログラミング言語で記述されており、バンドル処理がwebpackに比べて5〜10倍と高速なことです。Node.jsで動作するwebpackに対して、ネイティブコードを生成するRustでは処理能力に大きな差が出るのは当然で、これがRspackの大きなアドバンテージといえます。多くのwebpackプラグインが動作する見込みで、webpackの資産がある場合には有効な選択肢です。

Rolldownは、2024年3月にオープンソース化されたバンドラーです。

Rspack同様にRustで記述されていることによる高速な動作が特徴です。その名前から連想されるように、既存のバンドラーであるRollupとAPIレベルでの互換性を持ちます。RollupはViteにおけるプロダクションビルドに使用されていますが、将来的にはこのRolldownへ置き換わることがアナウンスされています。

Viteは、Rollupに加えてesbuildも使用しており、開発時とリリース時で異なるバンドラーを用いることの差異に対しての懸念がありました。Rolldownへの一本化は、速度や安全性といった面での大きなメリットとなることが期待されます。

今回は、JavaScriptエコシステムのサーベイであるState of JSの2024年版を、特に新機能に絞って紹介しました。自分の知らない間に便利な機能が登場していることもあり、なかなか新鮮に感じられたのではないでしょうか。

サーベイには、他にHTML、CSSなどをターゲットにしたものもありますから、その2025年版登場の折には、改めて紹介する予定です。