背景

既存のRailsのアプリケーションにフロントのフレームワークを導入する運びとなりまして、有名どころ3つをチェックポイントに沿って比較しましたのでその話を残しておきます。
今回はこういうやり方で比較したよ、という話なので、もしフレームワークを選ぶことになった際は参考程度に読んでいただき、その時々の状況やプロジェクトに応じて比較方法は変更すればよいと思います。なのでこれが正解というわけではないです。調査結果に誤りがある場合もあると思いますので、調査は自分で公式のものを見てちゃんと行った方がよいです。

比較したフレームワーク

今回比較、検討したフレームワークは以下の3つです。

Vue.Js
React
Angular

ちなみにAngularは、今回導入しようとしているアプリはそんなに大規模というわけではなかったので、ある程度のところでAngularの調査は切り上げ、VueとReactに絞りました。

チェックポイント

今回「まあこれが分かれば比較できそうかもしれない」と考えてチェックポイントをチーム内で相談し決めました。

フレームワークの概要（特徴）
主なプログラミング言語
最新バージョン
学習難易度
パッケージサイズ
GUI
既存機能の実装難易度
Heroku上の動作時における不具合等
コード管理のしやすさ
開発手法
ドキュメント
他フレームワークへの以降性
ローカル環境構築のしやすさ

比較方法

期間:2週間
調査人数：エンジニア3~4名

チームメンバーで上記のチェックポイントを分担し、確認を行っていきました。その際の情報共有はGoogleドキュメントを使用し、適宜必要に応じてHangoutを行いました。

比較結果

チェックポイント	Vue	React	Angular
フレームワークの概要（特徴）	OSSフレームワークでコミュニティにより開発・メンテ。GUIのコンポネントのみ提供。必要であれば他のライブラリをインストールする	Facebook社により開発・メンテされている。GUIのコンポネントのみ提供する。必要であれば他のライブラリをインストールする	Google社により開発・メンテ。フロントエンド用のMVCフレームワーク
主なプログラミング言語	EMACS6	EMACS6	Typescript
最新バージョン（調査当時）	2.6	16.13	10
学習難易度	容易：GUIのコンポネントとライフサイクルを理解すれば問題ない。CSSコードはコンポネントの中に記述してもいい	容易：GUIのコンポネントとライフサイクルを理解すれば問題ない。	難：GUIの作成方法以外、フレームワークのコンポネントを理解する必要がある
パッケージサイズ（約）	80KB	100KB	500KB
既存のサイドパーティ	Vue Material Kit, Vuetify, Vue Material, Quasar, Bootstrap-Vue	Raect Material Kit, Material UI, React Bootstrap, Ant Design, Semantic UI React	mdbootstrap, material, ng-bootstrap
既存機能の実装難易度	APIを新たに作成する必要がある。	Vue同様	ー
Heroku上の動作時における不具合等	deployして検証	deployして検証	ー
コード管理のしやすさ	コンポネントで分かれているためコード管理はしやすい	Vue同様	ー
開発手法	オブジェクト指向	コンポネント指向	コンポネント指向
ドキュメント	日本語あり	日本語バージョンは英語の直訳	日本語あり
他フレームワークへの以降性	独自フォーマットであるため、開発が進むと後戻りは困難	Vue同様	フルスタックなため代替は困難
ローカル環境構築のしやすさ	導入時の設定は少し困難だが、そこが完了していれば容易	Vue同様	ー

比較結果

既存機能を実際に開発してみて検証をし、ドキュメントを読んで比較した結果今回はVue&Vuetifyになりました。チームメンバーにVueの経験がある人が多かったのも一つです。