npm DL 数から見る React, Angular, Vue の比較

Monaca/Onsen UI チームの又川（@n_matagawa）です。

React, Angular, Vue が3大フレームワークとして定着してから3〜4年が経ちました[1]。最近はそれらをベースとした Next.js, Gatsby, Nuxt などの SSR (Server Side Rendering), SSG (Static Site Generation) ライブラリが安定期に入ってきたというところだと思います[2]。

肌感覚としてはどのフレームワークも用途に応じて満遍なく使われている印象ですが、ここは客観的な指標が欲しいところです。今回の記事では npm DL 数を指標として React, Angular, Vueを客観的に比較することを試みます。

npm DL 数とは

npm ではユーザが npm install <package> を実行した回数が 2015/02/27 [3] から日別に記録されています。データは 公式の API を利用することで取得できます。

GitHub スター数よりも過去の日別データが取得しやすく、また、実際の利用状況をよく反映しているのが特徴です。ただし、いくつか注意点もあります。

npm DL 数を使用する際の注意点

休日（土日や年末年始）は DL 数が大きく減る

以下は react パッケージの日別 DL 数の推移（2020/09/20〜2021/09/20 分）ですが、ご覧のようにグラフに一定の周期性が見られます。これは土日に DL 数が大きく減るためです。

reactパッケージの日別 DL 数の推移

大体、平日の 25 % 程度まで落ちます（パッケージによっては 60 % 程度までしか落ちないこともあります[4]）。

おそらく、休日は趣味でプログラミングをしている人しか npm install <package> を実行しないからでしょう。年末年始は休日が多いため DL 数がさらに減ります。これらの傾向は全パッケージに見られます。

そのため、平日の DL 数に着目するには7日移動最大値（※グラフの波の上側をなぞるイメージ）を取り、休日の DL 数に着目するには7日移動最小値（※グラフの波の下側をなぞるイメージ）を取る必要があります。もしくは月〜金のデータと土日のデータを分けるのも良いでしょう。

npm の障害や何らかの事故によって DL 数が異常に減ったり増えたりする

上のグラフの May '21 と Jun '21 の間を見ていただくと分かるように、npm DL 数は時々 0 になります。

また、1人のユーザが1日で大量に DL を行ったり、何らかのバグで npm install <package> が繰り返し行われたりすると、DL 数が跳ね上がることがあります。

このように、npm DL 数を扱う上では異常な DL 数（外れ値）に注意する必要があります。

React, Angular, Vue の比較

上記の注意点を踏まえて react, @angular/core, vue の休日の DL 数の推移を比較してみました（3フレームワークとも平日の DL 数に対する休日の DL 数の割合は 25 % ほどでした）。

（※ @angular/core は scoped package であるため、2016/10/01 以降のデータのみ取得可）

驚異的なことに、3フレームワークとも DL 数は伸び続けていました。縦軸は対数軸であるため、ユーザ数は倍々に増え続けていることになります。

注目すべき変化としては、2017 年は「React ＞ Angular ＞ Vue」だった DL 数が、2020 年には「React ＞ Angular ＝ Vue」となり、2021 年には「React ＞ Vue ＞ Angular」となっています。

React と Vue が概ね同じ差を保っているのを見ると、Vue が猛追したというより、Angular が少し伸び悩んだと言えるでしょう。

まとめ

今回の記事では npm DL 数を指標として React, Angular, Vueを客観的に比較することを試みました。結果、以下のことが分かりました。

  • React, Angular, Vue の DL 数は 2021 年現在も全て伸び続けている。
  • Angular は少し伸び悩み気味。

この結果がフレームワーク選択の一助となることを祈ります。それではまた！

参考資料

[1] State of JS 2020: Front-end Frameworks https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/
[2] State of JS 2020: Back-end Frameworks https://2020.stateofjs.com/en-US/technologies/back-end-frameworks/
[3] https://api.npmjs.org/downloads/point/2015-02-26, https://api.npmjs.org/downloads/point/2015-02-27
[4] npm-stat: onsenui https://npm-stat.com/charts.html?package=onsenui&from=2020-09-20&to=2021-09-20