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 % ほどでした）。
驚異的なことに、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
