背景
既存の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の経験がある人が多かったのも一つです。