フロントエンド　モダンフレームワーク比較

評価指標

• 情報の多さ

  GitHubのstar数、日本語ドキュメントの数から評価します。

• パフォーマンス

  メモリ使用量、描画性能を指します。

  https://ics.media/entry/190731/
  をソースとしています。

• 習得コスト

  伴って学習しなければならない技術の難易度により評価します。

• TypeScriptとの親和性

  TypeScriptを導入する際の難易度により評価します。

• 機能性

  大規模開発にどれだけ向いているか、という観点で評価します。

Angular

情報の多さ	パフォーマンス	習得コスト	TypeScriptとの親和性	機能性
☆	☆☆	☆	☆☆☆	☆☆☆

情報の多さ

GitHubのstar数は2020年では+13.3Kでした。他二つのフレームワークと比べると大きく劣ります。

またStar数の2015年からの遷移を見ると、Angularは2021年までに+75937（+75k）と、他二つのフレームワークのvue（+187k）、react（+173k）に半分以上劣る結果となりました。

パフォーマンス

メモリ使用量：73MB

描画性能　　：21.6fps

習得コスト

AngularはTypeScriptを使って開発するフレームワークであるため、TypeScriptの知識が必要となります。

また、RxJSというJavaScriptでのイベントのハンドリングや非同期処理をラップするライブラリの知識が必要となります。

（RxJSはAngular以外のJavaScriptフレームワークではほとんど利用されません。）

共通処理などに関して、パイプという書き方の習得も必要になります。

Angularの習得コストはVueやReactと比較すると、高い結果となりました。

TypeScriptとの親和性

AngularはTypeScriptを使って開発するフレームワークであるため、TypeScriptとの親和性は非常に高いです。

機能性

Angularは堅牢さ、厳密さを重視して開発されたフレームワークであるため、大規模開発には適しています。

具体的には、書き方がある程度フレームワークによって限定されるため、大規模なチームによる開発の際でもエンジニア毎の違う考え方や開発手法による影響を抑えることが可能です。

スケーラビリティをテーマに開発されており、アプリケーションの大規模化に伴い、ロード時間が増加することもありません。
（Webアプリケーションを起動した際のJavaScriptによるレンダリング速度の話であり、サーバーとの通信速度ではありません。）

Googleによって開発されているフレームワークで、「Webの進化に伴ってangularのAPIに変更が起こらないよう、フレームワークを進化させていく。開発者は将来にわたってコードを書き換える必要が無い」と明言されています。
（WebAPI、Angularのバージョンアップによる変更が必要ないというだけであり、仕様や動作の変更時はもちろんコードの変更が必要になります。）

React

情報の多さ	パフォーマンス	習得コスト	TypeScriptとの親和性	機能性
☆☆	☆☆☆	☆☆	☆☆	☆☆

情報の多さ

GitHubのstar数は2020年では+19.8Kでした。

公式サイトも日本語化済です。

パフォーマンス

メモリ使用量：55MB

描画性能　　：19.7fps

メモリ使用量、描画性能共に非常に高いパフォーマンスとなっております。

習得コスト

JSX記法によって開発するフレームワークであるため、習得コストは少し高くなります。

自由度が高く、様々なライブラリや拡張機能が用意されていますが、伴って習得コストが高くなっています。

TypeScriptとの親和性

Angular程密接な相性があるわけではありませんが、サポートも手厚く、TypeScriptの導入は容易です。

機能性

Angularと比較した場合、自由度が高いことによる開発者毎の開発手法の違いが顕著に表れるため、大規模チームによる開発はコンポーネントのインターフェースの統一のために規約が必要となります。

しかし、ビルドやライブラリの読み込み時間を考慮に入れた場合は圧倒的に高速で、コンポーネントを多く配置する場合、大規模システムを開発する際のパフォーマンスは高くなります。

またReact Nativeや、React vr等と連携が可能なため、モバイル開発やＶＲ開発も可能となります。

ＪＳＸ記法での開発では、リントモジュールや補完、フォーマッタが有効になるため、開発効率としては高くなります。

Vue

情報の多さ	パフォーマンス	習得コスト	TypeScriptとの親和性	機能性
☆☆☆	☆　（☆☆※1）	☆☆☆	☆　（☆☆☆※2）	☆（☆☆※3）

情報の多さ

GitHubのstar数は2020年では+22.5Kでした。

公式サイトも日本語化済で、デザインライブラリもほとんどが日本語化済です。

情報は圧倒的に多いです。

パフォーマンス

メモリ使用量：172MB

描画性能　　：9.4fps

Vueはレンダリングの際におけるフレームレート、メモリ使用量共に値が劣っています。

具体的にはDOM要素の削除時に、要素が全て作り直されるため、パフォーマンスが落ちてしまっています。

それ以外のリストレンダリングの追加・更新時のパフォーマンスは問題ありません。

※1

Vue3のパフォーマンス

メモリ使用量：50MB

描画性能　　：17fps？

（Vue3を利用して計測しているデータは得られませんでした。しかし、公式サイトには100%の描画速度の向上、と謡われていたため、概算値を記述しました。）

習得コスト

HTMLとCSS、Javascriptの基礎的な知識があれば、コードを読み理解が出来るため、習得コストは圧倒的に低いです。

Vueの良さは手軽さ、いい意味でのアバウトさであり、アプリケーションの開発に慣れていないコーダーが開発をしたり、デザイナーがCSSを書く場合は非常に強力なフレームワークとなります。

TypeScriptとの親和性

型付けがやりにくく、コンポーネント毎にデコレータが必要となります。

また、型定義があいまいでもコンパイルを通過してしまう設定になってしまう場合があります。

※2

Vue3のリリースによって、TypeScriptは全面サポートされました。

特別な設定を行うことなくTypeScriptを利用することができるほか、IDEや機能付きエディターを利用している場合はTypeScriptの書き方に間違いがある場合、エラーを表示します。

機能性

Angularやreactと比べ、パフォーマンスが劣るため、小～中規模のSPAシステム等に採用されることが多いです。

コンポーネントを大量に配置した場合、ビルドや読み込み時間の面で他二つのフレームワークと比較した場合大きく劣ります。

※3

Vue3から導入されるコンポジションAPIにより、コンポーネントの機能や目的を一点に集中して記述可能になりました。

コンポーネントの目的が分かりやすくなる事で、高い保守性や再利用性が維持可能となるため、大規模システム開発との相性が高くなりました。