One IT Thing

IT業界を楽しむ為の学習系雑記

html5

Angular、React、VueのDL数をnpmtrends.comで調べる

投稿日:2019年6月21日 更新日:

対象読者

  • これからフロントエンドの勉強をしようと考えている方。

3つの内どれを選ぶべきか

勿論使わない選択肢もあります。これらが台頭する前に開発されたWebもまだ多いですから、プロジェクトに途中参画したらJQueryとBootstrapでした、ってことも多いと思います。でも昨今開発が始まった開発現場では大体この3つの内どれかが使われている可能性が高いです。

3つの内既に採用されているものがあればそれを使えばいいですが、これから勉強しようとされている方が1からフロントエンドを作る際、どれを身に付けるべきか迷いますね。出来るだけ将来があるプロダクトを選びたいところですが世の中的にはどうなのでしょうか。

npmtrends.comでnpm installされている数を比較してみます。

npmtrends.comについて

プロダクトを入力してエンターすると半年間のDL数グラフが見れます。次々入力していくことで比較ができます。

ダウンロード数はnpmサイトのダウンロード数から、パッケージ詳細はnpms.ioから持ってきているそうです。傾向が分かるのでこれから伸びるか落ちるか予想が付くのがいいですね。

The npm package download data comes from npm’s download counts api and package details come from npms.io.

人気の比較。この三つしかNPMモジュールって無いのかと思うくらい比較されてます。「angular」で入力すると昔のangular.jsになってしまうので@angular/coreで比較します。

比較結果

  1. React(オレンジ)4,793,238
  2. Angular(青)1,126,856
  3. Vue(緑)961,812

4倍のスコアでReactが1位。AngularはかろうじてVueの追従をかわし続けてます。

githubでの活動。Angularはアップデートがreactの4倍多いみたいです。リリースサイクルも速いです。

stars 🌟forks 🍽issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@angular/core49077132622893Jun 17, 2019Sep 19, 2014
react13112424154720Jun 16, 2019May 25, 2013
vue14143820368298Jun 14, 2019Jul 29, 2013

3つとも開発スピードは衰えていないので数字だけじゃ何が正解か分からないですね。どこかのコミュニティが「もう開発止めたー!」って言ってくれればそっと切るんですが。暫くそうはならなそうで三つ巴が続きそうです。

それぞれの長所

React:普及度が高い、開発スタイルが確立されてる
Angular:モジュールの網羅性が高い、革新的
Vue:学習が容易、シンプル

で、どれを採用するべきか

結局人に寄ると思いますが、私の場合は3つとも基礎を勉強しつつ以下の基準でAngularが一番好きになりました。

  • 初見でキモさを感じなかった:Angular(Angular1はキモかったけど)、Vue
  • Webからスマホアプリへ学習転移出来る:Angular → Ionic
  • 先進的な仕様を取り入れ続けてる:Angular
  • 基本Typescript:Angular

ただキモさは慣れてきますし、Vueも最近は楽しくてランディングページなどの局所で取り入れています。React使ってるプロジェクトから「ちょっと助けに来て」と言われたらお荷物にならない程度の知識は付けておくようにもしています。

3つとも軽めにキャッチアップしつつ、関連したプロジェクトの採用F/Wを時折重点的に。自分でプロダクトを採用出来る際はAngularを選ぶ、といった感じです。

何を選ぶか以前に根底になるJS力を付けておけば、何を選んだ時にも対応出来ますよ。

-html5
-, ,

執筆者:

関連記事

IndexedDBにblob保存されたPDFファイルを外部アプリに頼らずにJavascriptで表示(後編)

目次1 はじめに2 ビューワ機能を提供してくれるnpmモジュールを選別する3 実装開始3.1 ng2-pdfjs-viewerを使えるようにする3.2 PDFビューワコンポーネントを作る3.3 Hom …

Angular、React、Vueプロジェクトを新規作成した時に生成されるリソース規模比較

アンチウィルスのディスクフルスキャンが日に日に遅くなっていく・・・ 一年後には丸一日掛かっても終わらなくなり、仕事終わりにかけて行ったフルスキャンが翌日まだ頑張っている。 この原因、ちょこちょこ作って …

UserAgent判定JSライブラリ「UAParser.js」と「Platform.js」の比較

(私はUAParser.jsを使っています) ネットを探すとUA文字列を解析してブラウザ判定をするコードが一杯出てきます。 でもUA解析プログラムを自前で作ってシステムに組み込むとなると、新しいブラウ …

キャッシュされているはずのServiceWorker資源にオフラインアクセス出来ない(Workbox + ionicons)

そのHTTPリクエストしたファイル資源、ひょっとしてURLパラメータついてたりしませんか? 目次1 事象2 原因3 対処 事象 ionic3(SPA)でWorkboxを使ったServiceWorker …

IndexedDBにblob保存されたPDFファイルを外部アプリに頼らずにJavascriptで表示(前編)

目次1 はじめに2 検証環境3 Ionicプロジェクト作成4 PDFダウンロード、IndexedDB保存を実装5 実行してみる はじめに PDFをHTTPダウンロードするとHDDに保存されるか、外部ビ …


shingo nakanishi。東京で消耗中の職歴20年越え中年ITエンジニアです。「生涯現役プログラマを楽しむ」ことができる働き方探しをライフワークにしています。

19歳(1996年)から書き始めた個人日記が5,000日を超え、残りの人生は発信をして行きたいと思い、令和元日からこのサイトを開始しました。勉強と試行錯誤をしながら、自分が経験したIT関連情報を投稿しています。