The 2023 State of JavaScript のピックアップ

はじめに

こんにちは。
Soziの米田です。

The 2023 State of JavaScript が公開されました。
https://2023.stateofjs.com/en-US/

JavaScript界隈、主にJS自体の新し目の機能だったり、ライブラリ、ツールについて、認知度など調査結果をまとめたものです。
移り変わりの激しいフロントエンドですが、このような調査があることはとてもありがたく思っています。

さて、今回はライブラリを中心に、いくつかピックアップしてみました。

調査に答えている人は欧米に大きく偏っているため、あくまで「ざっくり」とトレンドをつかむ、程度に利用しましょう。

機能

https://2023.stateofjs.com/en-US/features/

機能についてはさらっと流します。

Nullish CoalescingやDynamic Import、Private Fields等、今となっては当たり前になった機能が並びます。
Internet Explorerがサポート終了となり、このあたりの機能はほとんど何も気にせず使えるようになりました。

今年の新しい機能はなくともそれほど困らないが、あるとちょっと便利、という感じのものが多いですね。

例えば、array.toReversed()について、よりImmutableなプログラミングが好まれる中で、少し楽になりました。
しかし、初心者の方からすれば、これはこれで、どちらを使えばいいのか、ややこしいんじゃないかなーと感じます。

const arr = [1, 2, 3];

// 今まで （arr自体は変更したくないため、sliceで複製してから、reverseする）
const reversedArr1 = arr.slice().reverse();
console.log(arr); // [1, 2, 3]
console.log(reversedArr1); // [3, 2, 1]

// これからはこうも書ける
const reversedArr2 = arr.toReversed();
console.log(arr); // [1, 2, 3]
console.log(reversedArr2); // [3, 2, 1]

ライブラリ

https://2023.stateofjs.com/en-US/libraries/

JSはそのライブラリの多さが強みの一つですので、トレンドをしっかり押さえていきましょう。
（State of CSSが別枠になってから、CSS系のライブラリは除外されています。）

フロントエンドフレームワーク/メタフレームワーク

かなり密接に関係している領域ですので、まとめてしまいます。
（メタフレームワークは昨年はレンダリングフレームワークと呼ばれていました。役割が広くなり、呼び方を変えたようですね。）

Front-end Frameworks Ratios Over Time

フロントエンドフレームワークとしては引き続きReactが強い状態を維持しています。
Reactを前提としたライブラリも多く、そのエコシステムが他をなかなか寄せ付けません。
ReactとNext.jsを用いてフロントエンド開発を行うことが、引き続き定番でしょう。

Meta-Frameworks ratios over time

一方で、Astroについても、昨年同様に多くの票を集め始めており、今後の人気度に注目です。

The 2023 State of JavaScript Front-end Frameworks Other Frameworks

The 2022 State of JavaScript Front-end Frameworks Other Tools

テスト

JestやStorybookについては使うのが当たり前、という状況にはなっています。
また、PlaywrightとVitestがものすごい勢いで票を獲得しています。

弊社でも、ESMサポートやパフォーマンスを重視して、JestではなくVitestを採用するケースが増えています。
Viteを使っていなくとも、Vitestのパフォーマンスなどのメリットは得られますし、Jestと近い使い勝手で、移行もしやすい印象です。

Testing tools ratios over time

モバイル・デスクトップ

モバイル・デスクトップアプリをJSで作るとしたら、という前提ではありますが、引き続き、ElectronやReact Nativeが票を集めました。
Tauriなど新し目の選択肢もあるものの、大きなトレンドの変化は見えていません。

ビルドツール

TypeScriptが広く使われる中、JSへのトランスパイルやバンドルなど、ビルドツールは不可欠となっています。

昔ながらのWebpackをはじめとして、ESM向けのNo bundleなツールとしてRollupやVite、TypeScriptトランスパイルがとにかく速いSWC, esbuild等の利用が増加しています。
そして、TypeScript仕様が複雑化する中、正しく型を推論できるのが本家tscだけなので、tscは今後も使い続けることになるでしょう。

それぞれ色があり、内部的に別のライブラリを使っていたり、なかなか分かりづらい様相ですね。
ライブラリバンドルの有無、ESMかどうか、ランタイムがなにか、などで適切なものを選ぶ必要があります。

弊社では、社内パッケージのビルドにおいて、その設定の簡単さからtsupを利用し始めています。

モノレポツール

最近は、複数のパッケージを一つのRepositoryにまとめてしまう、モノレポの利用が増えてきました。
パッケージ横断的な機能開発において、より協調して開発を進められ、開発規模がそれほど大きくない場合にメリットが享受しやすいかと思います。

さて、pnpmによるworkspaceが新たに最も票を獲得しました。
弊社でも、pnpm workspaceを活用しています。

pnpm自体のパフォーマンスや、依存パッケージ管理の厳密さ、ワークスペースにおける効率的なエイリアスの仕組みなど、モノレポツールとしてはストレスが少ないと感じます。
なにより、Node.js LTSの最新20.15.0では、corepack経由で容易にそのまま使えるのが最高です。

その他のツール

こちらはあまり代わり映えしないのですが、重要なポイントとしてランタイムだけピックアップします。

Node.jsやブラウザがトップなのは当然として、その次点でBunが上がっています。
以前は、Service WorkersやDenoが君臨していたところですので、それだけ、Bunの使い勝手の良さとパフォーマンスが受け入れられているのだと思います。

Node.jsと互換性が高く、いままでのコードがほとんどそのまま利用できる。そして、複雑怪奇なTSトランスパイルを無視でき、パフォーマンスも高い。
昨年、Ver 1.0.0を公開し、これから徐々に本番利用の実績も増えてくるでしょう。

あとがき

以上、The 2023 State of JavaScript のピックアップでした。
新しいWebフロント開発がある場合など、技術選定において参考にしていただければと思います。

https://2023.stateofjs.com/en-US/