フロントエンドのトレンドについて調べてみた
はじめに
2023年11月現在のフロントエンドのトレンド調査のため、State of JavaScript の情報を参考に調査を行った。
回答者の国別分布を上位5位までを見ると米国が11.9％、ドイツが5.2％、フランスが3.7％、イギリス（UK）が3.6％、そしてインドが3.2％。
言語別の回答者は、英語が69.6％、フランス語が3.4％、ドイツ語が3.1％、スペイン語が3％などとなっており、日本語での回答者は0.4％でした。
世界中の JavaScript 技術者へのアンケートを集計したものであるため、世界的なトレンドを把握するには有益なデータであることは間違いない。
そのため、こちらのサイトのデータを参考に調査を行うことを判断をした。
ただし、日本の回答率は少ないため日本のトレンドとズレが生じる可能性はある。
また、2022年のデータを参考にする関係で比較的最近に登場したものは調査対象外とした。
参考資料
判断基準
横軸が 否定的/肯定的な意見、縦軸が 使ったことがある/ない を表しているため、なるべく以下の状態であるライブラリを採用するかたちが望ましいと考えた。
- 右上にある
- 人気がある (グラフが緑色)
- 否定的な意見が少ないまたは増えていない
調査内容
以下の4項目のデータに対して、判断基準をもとに調査を行った。
- フロントエンドフレームワーク
- レンダリングフレームワーク
- テスト
- ビルドツール
また、各項目のランキングの満足度のグラフを 肯定的な意見 (満足度が高ければ肯定的な意見の人が多い)、利用率のグラフを 使ったことがある (利用率が多ければ使ったことがある人が多い)と仮定した。
フロントエンドフレームワーク
満足度で見るとTOP5は以下の通り。
- Solid
- Svelte (スベルト)
- Qwik
- React
- Vue.js
利用率で見るとTOP5は以下の通り。
- React
- Angular
- Vue.js
- Svelte
- Preact
上記で上がったライブラリの状態を見ていく。
Solid
右下に存在する。右肩上がりではあるもののこれからといったところ。
Svelte
右下に存在する。少しずつ右肩上がりだがまだまだこれからといったところ。
Qwik
グラフには見つけられなかった。
React
右上に存在する。2019年頃から少し否定的な意見が増加したようだが、2021年頃に回復して使ったことがある人も増加してきている。
Vue.js
右下に存在する。2020年頃までは好調だったようだがそれ以降は否定的な意見が増加し、使ったことがある人も減少している。
Angular
左下に存在する。減ってきてはいるものの使ったことがある人は多い。
右上に存在するのは React のみだった。次に一番右上に近い存在は Vue.js という結果だった。
React と Vue.js の2強とみてよさそうである。
npm trends
2023年の状況を把握するため、React と Vue.js のnpm トレンドでダウンロード数を見てみる。
2023年10月1日時点で、React が約2,100万、Vue.js が約380万で React が圧倒的なダウンロード数であり、今現在でも人気が高いフレームワークということがわかった。
ただ、React は1年以上アップデートされていないというのが気になった。
GitHub スター数
スター数だと Vue.js がやや多いといった結果だった。
※ Vue.js は Vue2, 3 の合計
| 順位 | 名前 | スター数 | URL |
|---|---|---|---|
| 1 | React | 215k | https://github.com/facebook/react |
| 2 | Vue.js 2 | 206k | https://github.com/vuejs/vue |
| 3 | Vue.js 3 | 41.2k | https://github.com/vuejs/core |
レンダリングフレームワーク
満足度で見るとTOP5は以下の通り。
- Astro
- SvelteKit
- Next.js
- Docusaurus (ドキュザウルス)
- Remix
利用率で見るとTOP5は以下の通り。
- Next.js
- Gatsby
- Nuxt
- SvelteKit
- Astro
上記で上がったライブラリの状態を見ていく。
Astro
右下に存在する。右肩上がりではあるもののまだまだこれからといったところ。
SvelteKit
右下に存在する。右肩上がりではあるもののまだまだこれからといったところ。
Next.js
右下に存在する。あと少しで右上に届きそう。否定的な意見も増加せずに、使ったことがある人が順調に増加している。
Docusaurus
ドキュメント特化のフレームワークだと思うので対象外とした。
Remix
右下に存在する。否定的な意見が増加して、使ったことがある人があまり増加していない。
Gatsby
左下に存在する。かなり否定的な意見が増加して使ったことがある人も伸びていない。
Nuxt
右下に存在する。少し否定的な意見が増加して、使ったことがある人は減少している。
右上に存在するライブラリはなし。一番右上に近い存在は Next.js という結果だった。
Next.js の1強とみてよさそうである。
npm trends
2023年の状況を把握するため、Next.js のnpm トレンドでダウンロード数を見てみる。
Nuxt を比較対象とした。
2023年10月1日時点で、Next.js が約490万、Nuxt が約52万で Next.js が圧倒的なダウンロード数であり、今現在でも人気が高いフレームワークということがわかった。
頻繁にアップデートされている。
GitHub スター数
スター数は Next.js が圧倒的に多いといった結果だった。
| 順位 | 名前 | スター数 | URL |
|---|---|---|---|
| 1 | Next.js | 114k | https://github.com/vercel/next.js |
| 2 | Nuxt | 48.3k | https://github.com/nuxt/nuxt |
テスト
満足度で見るとTOP5は以下の通り。
- Vitest (ヴィーテスト)
- Testing Library
- Playwright
- Jest
- Storybook
利用率で見るとTOP5は以下の通り。
- Jest
- Storybook
- Mocha
- Cypress
- Testing Library
上記で上がったライブラリの状態を見ていく。
Vitest
右下に存在する。右肩上がりではあるもののまだまだこれからといったところ。
Testing Library
右下に存在する。2021年以降否定的な意見が増加して、使ったことがある人は伸びていない。
Playwright
右下に存在する。右肩上がりではあるもののまだまだこれからといったところ。
Jest
右上に存在する。2021年以降に少しずつ否定的な意見が増加して、使ったことがある人は少し現象した。
Storybook
右下に存在する。2021年にあと少しで右上に届きではあったが、それ以降に否定的な意見が増加して、使ったことがある人は現象している。
Mocha
右下に存在する。人気低下中。2019年頃からどんどん人気低下中。
Cypress
右下に存在する。2021年から否定的な意見が増加して、使ったことがある人は増加していない。
右上に存在する Jest のみ。一番右上に近い存在は Storybook と Cypress という結果だった。
Jest の1強とみてよさそうである。
npm trends
2023年の状況を把握するため、Jest のnpm トレンドでダウンロード数を見てみる。
Storybook と Cypress を比較対象とした。
2023年10月1日時点で、Jest が約2,100万、Cypress が約510万、Storybook が約230万で Jest が圧倒的なダウンロード数であり、今現在でも人気が高いフレームワークということがわかった。
頻繁にアップデートされている。
GitHub スター数
npm trends の結果と逆転した。
スター数は Storybook が一番多いといった結果だった。
| 順位 | 名前 | スター数 | URL |
|---|---|---|---|
| 1 | Storybook | 80.8k | https://github.com/storybookjs/storybook |
| 2 | Cypress | 45.2k | https://github.com/cypress-io/cypress |
| 3 | Jest | 42.9k | https://github.com/jestjs/jest |
ビルドツール
満足度で見るとTOP5は以下の通り。
- Vite
- esbuild
- SWC
- tsc CLI
- Turbopack
利用率で見るとTOP5は以下の通り。
- webpack
- Gulp
- Vite
- tsc CLI
- Rollup
上記で上がったライブラリの状態を見ていく。
Vite
右下に存在する。あと少しで右上に届きそう。否定的な意見も増加せずに、使ったことがある人が順調に増加している。
esbuild
右下に存在する。2021年以降否定的な意見が増加して、使ったことがある人はあまり増加していない。
SWC
右下に存在する。2021年以降使ったことがある人が伸び悩んでいる。
tsc CLI
右下に存在する。人気低下中。2021年から一気に人気を落とした。
Turbopack
グラフには見つけられなかった。
webpack
右上に存在する。2020年から否定的な意見が大幅に増加して、使ったことがある人は増加していない。
Gulp
左下に行きそうなあたりに存在する。人気低下中。
Rollup
右下に存在する。2021年以降否定的な意見が増加して、使ったことがある人は増加していない。
右上に存在するのは webpack のみ。次いで一番右上に使い存在が Vite という結果だった。
webpack と Vite の2強とみてよさそう。
npm trends
2023年の状況を把握するため、webpack と Vite のnpm トレンドでダウンロード数を見てみる。
2023年10月1日時点で、webpack が約2,400万、Vite が約760万で webpack が圧倒的なダウンロード数であり、今現在でも人気が高いフレームワークということがわかった。
頻繁にアップデートされている。
GitHub スター数
スター数は webpack と Vite とも同じくらいという結果だった。
| 順位 | 名前 | スター数 | URL |
|---|---|---|---|
| 1 | webpack | 63.6k | https://github.com/webpack/webpack |
| 2 | Vite | 60.9k | https://github.com/vitejs/vite |
まとめ
はじめに定義した判断基準で定義した通りにライブラリを選定するのであれば、各ライブラリの選定は以下のようになる。
| 対象 | 候補 |
|---|---|
| フロントエンドフレームワーク | React |
| レンダリングフレームワーク | Next.js |
| テスト | Jest |
| ビルドツール | webpack |
ここに State of JavaScript のランク付け考慮すると。
フロントエンドフレームワークと レンダリングフレームワークについては変わらず。
テストは Jest or Cypress or Storybook のどれを使っても良さそう。
ビルドツールは Vite となる。
State of JavaScript のランク付け考慮後は以下の通り。
| 対象 | 候補 |
|---|---|
| フロントエンドフレームワーク | React |
| レンダリングフレームワーク | Next.js |
| テスト | Jest or Cypress or Storybook |
| ビルドツール | Vite |
Discussion