はじめに
なんとなく React と Vue.js と Angular の比較メモを残したいと思った
（今年は新規プロジェクトの立ち上げが多く、会社でフロントエンドのフレームワークをどれ使ったらいいか聞かれることが多かったため）
私は React 歴半年、Vue.js 歴 1 年半、Angular 歴無しと経験が浅いため、
自分の考えは極力書かず、ネット上や周りのフロントエンドエンジニアに聞いた情報を中心に書こうと思う
※ この記事は随時更新する予定
新しくフロントエンドフレームワークの比較記事が出てきたら、それを読んでこの記事に反映するぐらいの温度感でいます
機能比較
| 機能 | React | Vue.js | Angular |
|---|---|---|---|
| ベース構文 | JS | HTML | HTML |
| データバインディング | 単方向のデータバインディング（Data ⇒ View） | 基本的には単方向のデータバインディング（Data ⇒ View）で構築するが、双方向のデータバインディング（Data ⇔ View）もいける（v-model） | 双方向のデータバインディング（Data ⇔ View） |
| ルーティング | react-router（バージョンアップの破壊的変更がキツい） | vue-router（これ一択） | @angular/router（Angular に標準で付いてる） |
| 状態管理 | Flux（最近は Redux 一択かな） | Flux（Vuex 一択） | Observable（RxJS や ngrx） |
| SSR | Next.js SSR 周りのエコシステムが弱いらしい |
Nuxt.js を使うと楽にできる | Angular Universal |
| CSS | styled-components が良い | 「style scoped」が良い グローバルスコープな CSS の各セレクタにビルド時にハッシュ値を付与して、名前を被らないようにして、ローカルスコープを実現する方法 これを Vue.js は簡単に導入できる |
|
| Native アプリのサポート | React Native | Weex | Ionic |
| PWA のサポート | create-react-app でサポート | vue-cli でサポート | ng add @angular/pwa |
| マイグレーション | - | - | Ver.6 から機能でng updateというコマンドを使えば、バージョンアップ時のマイグレーションを自動化できる |
| 言語のサポート体制 | - | - | 半年に 1 回のメジャーバージョンリリースとメジャーバージョンごとに 18 ヶ月のサポートが決まっている |
サイズ
以下のサイズが重い順
Angular(143k) -> React(43k) -> Vue.js(23k)
括弧内のサイズは環境やバージョンアップ等で変わっていくので、大体の目安と思ってください
学習曲線
React や Angular と比べると Vue.js は初学者に優しいと言われている
- JSX などの新しい構文を覚える必要がない
- HTML, CSS, JS の知識があれば書ける
モジュールバンドラー
私は、webpack, Browserify, Parcel, FuseBox を使ってきたが、webpack 一択
Parcel がちゃんと動けば最強だが、凝ったことをやり始めると結局 webpack に戻る
FuseBox は webpack より設定が少ないが、Parcel みたいに設定無しでいけないので、中途半端なイメージ
Browserify とか Gulp は今はもう使ってない
型
Flow はけっこう落ち目
TypeScript 一択になってきた
よく質問されること
コミュニティの規模やバックアップ企業についてなど
この質問の意図には、将来生き残るであろう言語を選んで使いたいという気持ちがあるのだと思うが、、
React は Facebook、Angular は Google と大企業のバックアップがあるのと比べると Vue.js は元々 Google の AngularJS のチームだった Evan 氏個人で作られたので、
たまに「どうなの？」って気になる人がいるが、今やコミュニティ規模もかなり大きくなったので、心配する必要は無いと思う
ドキュメントの充実さ
ドキュメントの充実さでいうと Vue.js の公式ドキュメントの日本語翻訳は最初はかなり助かる
ただ開発に慣れてきたら、どの言語を選んでもハマると英語を翻訳しながら進めることになると思う
