【JavaScript】３大フレームワーク Angular, React, Vue.jsを比べてみよう (2018年4月)
JavaScriptフレームワークを比較してみよう (2018年4月)
トレンドの移り変わりが激しいWebフロントエンド。2017-2018年現在、JSフレームワークで最も有力な3強がAngular/React/Vue.jsの３つと言われています。他に日本で比較的聞くのはRiot.js、Ember.js、Hyperappなどがありますね。
ちょいとFW選定の技術調査でいろいろ調べたりしたので、このエントリでは初学者なりに比較を整理してまとめてみたいと思います。
なお最後にも書いてありますが、実際に使ったりして得られた知見もあれば、入門レベルだと確かめようがないので本やネットの情報や意見の中で多いものの受け売り的になっているところもあります。フレームワークって結局どれがいいのという話は混乱したり場合によっては荒れがちですが、最終的には情報は各自の判断でご利用ください。フレームワークは開発をより良くするための手段であり、単純な優劣ではなく適材適所で考えるものです。
- JavaScriptフレームワークを比較してみよう (2018年4月)
- Angular/React/Vue.jsの比較表
- JavaScript ベスト・オブ・ザ・イヤー (JavaScript Rising Stars)の順位
- The best of JavaScript, HTML and CSS の順位
- プラスと思われるところ
- マイナス？と思われるところ
- 各フレームワークの掲げてることとか特徴とか
2021年夏追記： これらのフレームワークの入門本まとめ記事最新版は以下をどうぞ。
Angular/React/Vue.jsの比較表
| 項目 | Angular | React | Vue.js |
|---|---|---|---|
| 読み方 | アンギュラー、 アングラー |
リアクト | ビュー・ジェイエス |
| 提供元 | Google 及びコミュニティ |
Facebook 及びコミュニティ |
元GoogleのAngularJS開発チームだったEvan Youさん(中国人)及びコミュニティ |
| 初版 | 2009 | 2011年頃 | 2014/2 |
| 最新版 | 2018/4 | 2017/9 | 2017/12 |
| 最新バージョン | 6.0.0 (半年ごとに上がる) |
16.0 | 2.5.16 |
| GitHub スター数 |
v2-: 35,300 v1:58,300 |
94,100 | 91,600 |
| Qiitaタグ投稿数(旧Ver含む) | 600+500+1300 | 1300+1500 | 1200 |
| teratail タグ数(旧Ver含む) |
50+560 | 530 | 360 |
| 動静 | V1のAngularJSからAngular2に互換性がなかったため2014～2015に一時低迷、一部がReactに流れ、その後復活。 | Facebookと係争中の他社は使えないというBSDライセンス問題があったが2017年にMITに移行して解決。 Reactになじめなかった人はVue.jsに流れるパターンも。 |
2016年にVer2が出てから人気急上昇。前者2つのいいとこどりでバランスが良いとされる。特に中国圏で人気。 |
| ライセンス | MIT | v16よりMIT | MIT |
| 公式サイト | 日本語化進行中 | まだ英語のみ | 完全な日本語版あり、読みやすい |
| 該当FWをテーマに日本語で読める書籍(Amazon) | Angular4-5: 4冊ぐらい Angular2: 1冊 AngularJS: 2冊 |
新旧合わせて10冊ぐらい | 3冊ぐらい |
| 日本の主なプログラミング学習サイト | ドットインストールにv1のAngularJSが前はあった(2012/8) | ドットインストールに「React入門」(2018/3)「ReactでTodo管理アプリを作ろう」(2018/3) CODEPREPに「はじめてのReact」「Reactで作るTodoアプリ」(2017/9) |
ドットインストールに「Vue.js入門」(2018/2) CODEPREPに「はじめてのVue.js」「Vue.jsで作り直すアコーディオンパネル」(2017/8-9) |
| 大手 採用実績 |
Webサービス系各種 Google Analytics, FirebaseなどGoogle社内サービスでも600種以上 |
Facebookのサービス各種 任天堂、サイバーエージェント Instagram, Netflix, Twitter はてなブログ、ニコニコ動画、pixivも |
アリババ(中国最大のEコマース企業) GitLab Adobe PHPのLaravel、Onsen UIなどがスポンサー |
| 制限 | ECMAScript 5 準拠のブラウザ対応。IE8以下は未対応。 (PolyFillライブラリで一部回避できるらしい) |
左に同じ | 左に同じ |
| プログラム言語 | TypeScript | JavaScript(ES5も可) JSX記法 実はTypeScriptも拡張でサポート |
JavaScript(ES5も可) 実はTypeScript、JSX記法も拡張でサポート |
| データバインディング | データ←→HTMLの双方向 | データ→HTMLの片方向 (逆はイベントを拾いsetState()が必要) |
データ←→HTMLの双方向 |
| 種別 | フルスタックな JavaScriptフレームワーク |
Viewの表示系に特化したJavaScriptライブラリ。フレームワークに近い。 | 後発のシンプルなJavaScriptフレームワーク。ライブラリとも。 |
| アーキテクチャ・パターン | Model-View-Whateverとのこと(AngularJS時代のコメント) | 公式ではMVCのVのみとのこと | Model-View-ViewModelの影響を受けている(VとVMに相当) |
| 本体の構成 | フルスタックなので本体が機能全部入り、本体だけである程度完結。 | 本体は最小限、周辺ライブラリ系で機能を強化。 | Reactと同じく本体はシンプル＋周辺ライブラリ。 |
| 相対的な導入・学習コスト | 大。TypeScriptという新言語、本体も多機能、新概念が多く覚えることが多い。 | 中。段階的に始められるのでAngularより楽。 | 中～Reactより若干小。こちらも段階的に始められる、仕組みがシンプルで始めやすい。 |
| jQueryとの共存 | 一応できるようだが、UIライブラリ系が中でjQueryを使っているので仕方なく併用、などの事情を除くとあまり意味がない。(これは3つとも同じ) | Reactを使ってrender()関数でタグを構築して表示している部分以外(React管理外)なら可能。 | 適用したいHTMLコードブロックにidをつけてバインドするので、その外側(Vue.js管理外)なら一応可能。 |
| 大規模アプリケーション用の状態管理 | ・Reduxライクな@ngrx/storeライブラリ | ・Fluxアーキテクチャを実装したRedux ・繋ぐ部分を改良したreact-redux ・最近はMobX が出てきた (react-redux以外はReact専用でなくJSライブラリ) |
・公式サポートのVuexライブラリ(Flux,Reduxの影響を受けている) |
| URLルーティング機能 | 本体に入っている | 公式サポートの react-router ライブラリ | 公式サポートの vue-router ライブラリ |
| テスト サポート |
JSテストフレームワークのJasmine＋JSテストランナーのKarmaのセットが基本。KarmaはAngular開発チーム製。 E2Eテスト(結合テスト)用にはAngular用のProtractor |
React用にFacebookが開発したライブラリJest＋Airbnb製のReact仮想レンダラーのEnzymeのセット。 | 特に指定なし。公式はJasmine＋Karmaを取り上げている。(Angularと同じ) |
| デバッグ ツール |
基本はChrome付属のDeveloper Tools | ・Chrome拡張のReact Developer Tools ・デスクトップアプリのReactotronというのもあるらしい |
Chrome Developer Toolsを拡張する Vue.js devtools |
| コマンドツール、ボイラープレート | Angular CLI | 手軽に新規アプリを作れる create-react-app | 手軽に新規アプリを作れる vue-cli |
| 主なUI ライブラリ |
・AngularUIとか色々 | ・マテリアルデザイン用のMaterial-UI ・フラットデザイン用のgrommet ほか色々 |
・element-ui ・vuetify ・Bootstrap Vueなど色々 |
| ネイティブアプリ用 プラットフォーム |
Ionic | React Nativeが 最も有名 |
Weex 最近はVue Native というのも |
| SSR用 Universal JavaScript applicationのフレームワーク |
Angular Universal | Next.js (v5) | Nuxt.js (ナクスト, v1.4.0) |
★Nuxt.js はヌクストでなくナクストが正しいそうです。ムニエル (id:munieru_jp)さんありがとうございました。
angular.jp reactjs.org jp.vuejs.org
JavaScript ベスト・オブ・ザ・イヤー (JavaScript Rising Stars)の順位
GitHubのスター数で評価したランキング。フロントエンドフレームワーク(Front-end Frameworks)のカテゴリで順位を抜粋。
| 年 | Angular | React | Vue.js |
|---|---|---|---|
| 2016年 | 3位 | 2位 | 1位 |
| 2017年 | 3位 | 2位 | 1位 |
The best of JavaScript, HTML and CSS の順位
こちらもGitHubのスター数で評価して随時更新。タグの「UI Framework」の順位。
| - | Angular | React | Vue.js |
|---|---|---|---|
| - | 3位 | 1位 | 2位 |
プラスと思われるところ
Angular
- フルスタックなのでライブラリを調べたり追加しなくても最初から機能全部入り、大抵のことは実現できる。公式を信頼してアプリ開発に集中できる。
- DIコンテナの概念やテストのフォローもあり、自動テスト実現への道がある。
- Google印なので将来もたぶん安心。
- 規模大、開発メンバ多し、開発ルールを定めてAngular Wayに従ってしっかりやる大規模本格開発に向いている。若干コーポレート寄り、SI開発寄りなイメージ。
- 部分的でなく全面的な導入が基本、特にSPAに向いている。
- 開発言語がTypeScriptなので、型の存在がコードをしっかりバグから守ってくれる。
React
- ライブラリ系が特に豊富。
- Angularより導入コストが低く、スモールスタートが可能。
- 本体はView特化のライブラリなので手軽に導入できる。
- Vue.jsよりは大規模、複雑なアプリに向いている。
- 各FWと関連し進化中のモバイル用プラットフォームの中では、React Nativeが最有力で将来も期待。
- 開発中の英語のエラーメッセージが丁寧とのこと。(入門書によると)
- 状態管理のReduxを入れた本格的なアプリになると純粋な関数からなるコードがメインになり、テスティング・フレームワークで単体テストがしやすい。
- Flowという静的型チェッカーを導入すると、TypeScriptのように型でコードを保護していける。
- React+Reduxでは、表示だけを担当するPresentationalコンポーネントとロジックがあるContainerコンポーネントに分けるのが基本。この定石に従うとコンポーネント設計が大体うまくいく。
- Simpleである。本体含めライブラリそれぞれはシンプルに1つのことを実現し、このSimpleなライブラリを複数組み合わせて要求を実現できる。
Vue.js
- こちらもスモールスタート可能、既にHTMLがある状態で組み込むには特に向いていると言われる。
- Reactと違いトランスコンパイル不要ですぐ動く。(外部の.vueファイルにJS/CSS/HTMLをまとめる「単一ファイルコンポーネント」形式にすると必要になる)
- Reactと違いコンポーネント内記述は基本はHTMLとJSが独立、より綺麗に書ける。
- 特にシンプルなアプリに向いている。
- 基本的なライブラリ群は公式が提供しており安心。
- いつものJavaScriptで始められて親しみやすく、学習コストが低い。
- 後述のプログレッシブ・フレームワークの考え方で最初はトランスコンパイルによるビルドなしで始められたり、仕組み自体に柔軟性がある。
- サーバサイドをPHPでやるなら最近デファクトになりつつあるLaravelの5.3～に標準搭載されており、特に相性よし。公式スポンサーで安心。
- プロダクト向けでは推奨の単一ファイルコンポーネント形式を導入すると、JSのロジック/HTMLのテンプレート/CSSのスタイルという関心事をコンポーネントごとに完全に分離して疎結合が実現できる。将来のHTMLのWeb Componentsの概念を先取り。
- Easyである。主要ライブラリには大体ベストプラクティスが用意されており、迷わず進むことができる。
ロゴがキムワイプ配色で親しみやすい目薬のV・ロートとも似ていて親しみやすい
マイナス？と思われるところ
Angular
- 新言語TypeScipt学習、概念学習諸々と、導入・学習コストが後の2つより若干高い。
- 堅牢だがその分制約もある。Angularの流儀(Angular Way)に従う必要がある。
- 多機能であり、小規模なアプリではオーバースペックになる。
- ほか２つに比べると部分的な導入が難しく、既存アプリなら全入れ替えのイメージ。
- 開発を一度Angularで始めると基本的に乗り換えはできないので引き返せない。
React
- JSX記法だとJSの中にHTML(タグ判定が厳密なので正確にはXML)を書くことになり、ほぼ慣れの問題だがこれを感覚的に嫌がる人が多い。デザイナーとの分業で困りそうとも。
- 公式はコアだけ提供してエコシステムのライブラリは周辺に任せる方針。そのため公式以外が提供している沢山のライブラリについては取捨選択に知識、調査が必要。
- JSXを書かないやり方も一応あるがほぼJSX必須なので、動かす時にトランスコンパイルが必須。(Babel、Webpackなど)
- CSSや表示部分のテンプレートのファイル分割が行いにくいとのこと。
Vue.js
- 後発のため情報の豊富さや採用実績の多さ、ライブラリの数では負ける。(その割には伸びはかなり大きいが)
- 天下のGoogle、Facebookと大企業がサポートしている前者２つに比べると、開発者の規模が小さめ。
- 大規模アプリやコンポーネントが入り組んだ構成になってくると、前者２つが優勢とも言われる。
- Reactに比べるとコンポーネントの粒度が自由なので、柔軟な分コンポーネント設計で悩ましくなる時もある。
- JSの中にHTMLを書かないので、確かに「Reactよりもイケてる〜☆」と初見では思える。しかし、高度な使い方で再利用可能なコンポーネントを使いだすとJSの中にHTMLを書くやり方もあり、実はだんだんReactとあまり違わなくなってくる。(JSX記法やTypeScriptも実は使えたりする。)
↑これはマイナス面ではないですが、やって分かった知見として... - 日本語で「ビュー」と発音すると、Viewのビューと若干紛らわしい。(Wikipediaだと「ヴュー」とあり、公式の紹介動画のお兄さんとEvanさんも英語の「ヴュー」ぽい発音をしています。公式ドキュメントで「発音は / v j u ː /、 view と同様」とあるので、日本語だとやっぱり「ビュー」なのでは。 )
各フレームワークの掲げてることとか特徴とか
Angular
- クロスプラットフォーム：PWAを含むWebアプリ、デスクトップアプリ、ネイティブアプリも作れる
- スピードとパフォーマンス：TypeScriptコードを変換して動作、変更コードはすぐ読み込まれ、すぐレンダリングされ高速稼働
- 生産性：テンプレートで記述、様々なIDE対応、Angular CLIがある
- 完全な開発ストーリー：テストもサポート、アニメーション機能あり、アクセシビリティと開発全体をサポート
- HTMLベースのテンプレートエンジン搭載。1ファイルにHTMLタグ部分を書くテンプレートと、TypeScript言語のコンポーネントクラスを記述。この組を「コンポーネント」として動作。
- 後述の仮想DOMとはちょっと違うが、DOMをコンポーネントと結びつけて抽象化して管理。
- コンポーネントとテンプレートの間のデータバインディング機能
- ディレクティブと呼ぶHTMLカスタム属性を定義し文書ツリーを操作。ng-***という属性が付与され、HTML拡張
- 表示する値を加工するためのパイプ機能あり
- フォーム開発もAngular用に拡張されている
- サービスというレイヤーのクラスがあり、コンポーネント／サービス間の依存関係を解決するDIコンテナを装備
- 単体テスト/シナリオテストを支援するテストフレームワークもあり
React
- ユーザインターフェースを構築するための宣言的、効率的、フレキシブルなJavaScriptライブラリ
- 宣言的である
- コンポーネントベースである
- Learn Once, Write Anywhere：Reactを学べばスマホ開発でもReact Nativeが使える (昔のJavaのキャッチフレーズ Write Once, Run Anywhereのもじり)
- 仮想DOMによる高速処理
- stateで状態を保持できる
- JavaScriptを拡張したJSX記法でコンポーネントをクラスとして記述。中にHTMLタグが一部入る。
- コンポーネント内でイベントを管理。
- 関数型プログラミングの影響を受けており、JSそのもののプログラミング力を活かせる
- 静的サイト向けのReact Staticというのも最近出てきたりしてる
Vue.js
- 親しみやすい：お馴染みのHTML、CSS、JavaScriptで書ける
- 融通が利く：アプリ規模に応じてライブラリを徐々に採用可能なエコシステム
- 高性能：本体もコンパクト、仮想DOMで高速動作
- モノシリック(monolithic, 一枚岩)な大きなフレームワークと異なる、プログレッシブ・フレームワーク(Progressive Framework)である：Vue.jsのコアはシンプルなライブラリ。アプリケーションの複雑さや規模、変化するビジネスに応じて、周辺ライブラリを追加することでフレームワーク側の複雑さを増して段階的に、柔軟に対応できるよという考え方。
同じ単語のProgressiveが出てきてもPWA: Progressive Web Appsとはちょっと違う話。 - コンポーネントでアプリケーションを分割
- HTMLベースのテンプレート構文で表示とコンポーネント側をバインド
- リアクティブシステムで状態を管理 (=JavaScript上で定義したデータが変更されると、ビューも自動的に変更される)
作成に当たってはネット上の様々なコンテンツ、日本語で読める書籍、サンプルコード、簡単なアプリ試作などを行って総合的に情報収集しました。情報を公開してくれた先人の皆さんありがとうございます。
だいたいネットの情報や本の受け売りなのでそれほど間違ったことは言っていないと思いますが、実際のプロダクトで既にモリモリ使っている一線のJSerやJavaScriptニンジャ〜な方などの現場の観点からのより精密な意見がありましたら、今後もそれぞれの立場から共有していただけると後に続く皆がハッピーになりマース。
しばらくするとどうせまた新しいのがまたぽこっと出てきたりしそうですが、JavaScriptベスト・オブ・ザ・イヤーの集計にある通りで順位は2016,2017年で変わらず、日本語の情報を元に日本で何か作るならこの３強から選べばとりあえずは間違いなさそうです。
あとは対象アプリケーションの特性(形態、要求と仕様、複雑さ、規模、他の技術要素、サーバサイドの特性……)やプロジェクトの特性(開発期間、開発環境、チーム構成、要員数や要員スキル……)などなどの状況に応じ、フレームワーク選定を行う形かと思います。
雑に言うとまず思い切ってAngularで行くか否かの選択があり、大規模でがっちりした新規開発やサイトリニューアルや作り直しに近い案件はAngularもあり。elseなら次にReactかVue.jsかの2択……と2回の選択になるような気がします。調べた限りでは、ReactでもVue.jsでも本体のボリュームや習得難易度は大まかには同じぐらい、周辺ライブラリなどなど全面活用すればやり方は違ってもだいたい同じぐらいのところまで実現できそうなので、感覚的にはどちらを選んでもOKな感じがしています。(いっぽう、大規模アプリになるとReactの方が若干Betterだという経験者の声もよく耳にしますね。実際のところどうなんでしょう。)
僕も生息地が基本サーバサイドなものでJS界隈は敬遠していたのですが、こうして体系的に調べて整理して並べていってだいぶ理解が進んだ気がします。同じようなステップにいる方の助けになれば幸いです。
書籍でより詳しく調べたい方はこちらの記事もどうぞ。(追記：2018年春時点で古いので、冒頭の2021年版をご参照ください) iwasiman.hatenablog.com
