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

執筆者:

関連記事

Chrome75に実装された「Web Share API Level 2」を使ってみた

(2019/06現在、個人的な感想としては実戦投入はまだ早い印象でした) Webアプリにシェア機能を付けたい時があります。OSネイティブAPIを呼べないWebアプリではsharer.jsやremote …

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

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

ionic3(SPA)のServiceWorkerライブラリをsw-toolboxからWorkboxに切り替える

昨今は閲覧速度向上やオフラインでも使える利便性が求められ、Webアプリ開発とPWAはセットで考えられるようになってきましたね。 PWAは「ServiceWorker API」を使ってキャッシュする資源 …

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

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

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

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

 

shingo.nakanishi
 

東京在勤、1977年生まれ、IT職歴2n年、生涯現役技術者を目指しています。健康第一。