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
-, ,

執筆者:

関連記事

Javascriptでコンパスを作ってAndroid、iPhoneが向いている方角を特定

普段は意識しなくても、AndroidもiPhoneも自然データをデジタルに変換するセンサーの塊です。 加速度センサー重力センサージャイロセンサー地磁気センサー気圧センサー照度センサー温度センサー位置セ …

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

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

hidden.inとSoftEtherで無料のビデオ会議環境を構築する

自粛が続いて会えない人も多くなり、人との交流が恋しくなりますね。 仕事ではミーティングをオンライン化するニーズが増え、以下メジャーなパブリックサービスを使っている人も増えていると思います。 Skype …

IndexedDBにストアしたオブジェクトのキー値を部分的に更新する

目次1 はじめに2 課題3 より良い方法4 まとめ5 補足 はじめに IndexedDBは「key : value」でレコードを保存するキーバリューストアです。 バリューには「単値」または「Javas …

Android+ChromeでlocalhostアクセスしてPCサーバへPort Forward(Fwdアプリ使用)

昨今はプライバシーの侵害防止、セキュリティ観点から、HTTPS環境下でないと使えないHTML5 APIが増えました。 反してAndroid7でオレオレ証明書に関する仕様が変わり、Android6だった …

 

shingo.nakanishi
 

東京在勤、職歴20年越え中年ITエンジニアです。まだ開発現場で頑張っています。

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

私と同じく、今後IT業界で生計を立てて行きたいと考えている方や、技術共有したいけどフリーランスで孤独、といった方と一緒に成長、知識共有して行けたら楽しいな、と思っています。