Vue Angular React総合比較、どちらを選ぶべき？

おすすめの使い方 Vue.js >ReactJS Angular 2 > AngularJS

概要

今現在、VueはReact（Facebookがメンテナンス）やAngular 2（Googleがサポート）ほど人気ではありませんが、多くの開発者がVueに移行しています。しかし、多くの開発者がVueに移行しており、LaravelコミュニティはVueをフロントエンドフレームワークの1つとして考えています。

<ブロッククオート

つまり、VueはReact &Angularの病弊を解決するレシピを提供し、よりシンプルで簡単なコードを書く方法を提供するのです。

満足度比較。

ハッカーニュース (https://news.ycombinator.com/item?id=15999688)

<テーブル フロントエンドフレームワーク／満足度

2016

2017

リアクト

91%

93%

色相 

91%

91%

アンギュラー2

65%

66%

角型

40%

33%

1. まず、MVXフレームワークのパターンとは何かを理解しましょう。

MVXフレームワークのパターン。MVC+MVP+MVVM

1.MVC：モデル（model）＋ビュー（view）＋コントローラ（controller）、主にレイヤリングの目的から、互いの責任を分離させること。

2.MVP：MVCパターンから発展したもので、Controller/Presenterがロジックの処理を担当＋モデルがデータを提供＋Viewが表示を担当することで全てを完結させる。

3.MVVM。MVCのControllerやMVPのPresenterをViewModelに変更したのがMVVMです。

2. MVVMを使用する利点。

　　1.  低カップリング ViewはModelと独立して変更・修正することができる。ViewModel は別の View にバインドすることができ、View が変更されても Model はそのままで、Model が変更されても View はそのままであることができます。  
　　2.  再利用性 . ViewModelの中にいくつかのビューロジックを入れて、多くのViewがこのビューロジックを再利用できるようにすることができます。
　　3.  スタンドアロン開発 . 開発者はビジネスロジックとデータ（ViewModel）の開発に専念できる。デザイナーは、インターフェイスのデザイン（View）に集中できます。
　　4. 試用可能 . インターフェイス（View）はViewModelに対してテストすることができる。インターフェイス（View）をViewModelに対してテストすることができます。 　

3. Vue.jsとは何ですか？

上記のフレームワークパターン紹介を見て、MVVMパターンに属するフレームワークであることがわかりました。では、どのような特徴を持っているのでしょうか。

Vue.jsは、ユーザーインターフェイスを構築するためのインクリメンタルなフレームワークのセットです。他のヘビー級フレームワークと異なり、Vueはボトムアップのインクリメンタルな開発を想定しており、コアライブラリがビュー層のみにフォーカスされているため、簡単に始められるだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合が容易です。一方、Vueのエコシステムがサポートするシングルファイルコンポーネントやライブラリと併用すれば、Vueは複雑なシングルページアプリケーションを強化することも十分に可能です。

Vue.jsの特長は以下のとおりです。

1. 使いやすい軽量なフレームワーク

2. 双方向のデータバインディング

3. インストラクティブ

4. コンポーネント化

4. angularjsとの違い

    類似点

どちらもコマンドをサポートしています。ビルトインコマンドとカスタムコマンドです。

フィルタ：ビルトインフィルタとカスタムフィルタ

どちらも双方向のデータバインディングをサポートしています。

どちらもローエンドブラウザには対応していません。

    相違点

      1. より使いやすく

AngularJSはDependency Injection機能の追加など学習コストが高いですが、Vue.js自体はよりシンプルで直感的なAPIを提供しています。

      2. より柔軟

Angularよりも権威主義的でなく、自分の好きなようにアプリを構築することができます。

      3. より高いパフォーマンス

AngularJSはデータのダーティチェックを行うことに依存しており、ウォッチャーが大きくなるにつれて、スコープ内の変更のたびに遅くなるので

すべてのウォッチャーは、スコープが変わるたびに再計算する必要があります。また、あるウォッチャーが別の更新をトリガーした場合、ダーティチェックのサイクルは

を複数回実行する。 
Vueはトラッキングウォッチシステムに依存し、更新を非同期にキューイングし、すべてのデータの変更は、それらの間に明確な依存関係がない限り、独立してトリガーされます。

巨大なアプリの場合、この最適化の差はまだ比較的明らかです。

5. Reactとの違い

    類似点

reactは特殊なJSX構文を使っており、Vue.jsもコンポーネント開発において.vueという特殊なファイルフォーマットを書くことを推奨しており、ファイルの内容についてはいくつかの規約があります。

どちらもコンパイルして使う必要があります。

中心的な考え方は同じで、すべてがコンポーネントであり、コンポーネントのインスタンスは互いにネストすることができます。

どちらも合理的なフック機能を備えており、開発者が要件に応じてカスタマイズすることが可能です。

どちらもAJAXやRouteなどの機能をコアパッケージにビルトインしておらず、プラグインとして読み込んでいます。

どちらもコンポーネント開発におけるmixinの機能をサポートしています。

    相違点

      1. パフォーマンスが向上する。

VueのVirtual DOMの実装は、react.jsよりも全体のサイズが小さく、比較的軽量であるため、Vueはパフォーマンス面で優位に立つことができます

      2. 学びやすく、使い方がシンプル。
JSはSX構文を採用しており、多くのエンジニアにとってとっつきにくく、この新しい構文に適応するための学習に多くの時間が必要です。vueはDOMテンプレートアプローチを採用しており、見やすく使いやすいのが特徴です。

      3. より良い最適化。

Reactアプリでは、あるコンポーネントの状態が変化すると、そのコンポーネントをルートとして、コンポーネントのサブツリー全体を再レンダリングします。サブコンポーネントの不要な再レンダリングを避けるには、可能な限りPureComponentを使用するか、shouldComponentUpdateメソッドを手動で実装する必要があります。また、コンポーネントの最適化を容易にするために、イミュータブルなデータ構造を使用する必要がある場合もあります。ただし、PureComponentとshouldComponentUpdateを使用する場合は、コンポーネントのサブツリー全体のレンダリング出力がコンポーネントのpropsによって決定されるようにする必要があります。そうでない場合、このような最適化を行うと、レンダリング結果に検出不可能な不整合が発生する可能性があります。このため、Reactにおけるコンポーネントの最適化は、それとともにかなり負担の大きいものとなっています。

Vueのこの機能は、そのような最適化の必要性を排除し、開発者がよりアプリ自体に集中できるようにします。

まとめ VUE.20のアップデートです。ReactやAngularの教訓をさらに生かしつつ、その成功も取り込んでいます。Vue.jsで見られるのは、軽量で学習と習得が容易な新しいmvvmフレームワークです。

<スパン Vue.jsはダーティチェックを使わないので、パフォーマンスが良く、最適化がとても簡単です。angularはウォッチャーをどんどん追加していくと、スコープが変わるたびにすべてのウォッチャーが再計算されるので、どんどん遅くなっていきます。また、あるウォッチャーが別の更新をトリガーすると、ダーティチェックのサイクルを何度も実行しなければならないかもしれません。  Angularのユーザーはしばしば、ダーティなチェックループの問題を解決するために難解なテクニックを使わなければならないことがあります。多くのウォッチャーを持つスコープを最適化する簡単な方法がないこともあります。 Vue.jsは、依存関係追跡ベースのウォッチャーシステムを使用し、更新を非同期にキューイングし、すべてのデータの変更は、互いに明示的な依存関係がない限り独立してトリガーされるので、この問題は全くありません。唯一行うべき最適化は、v-forでtrack-byを使用することです。