フロントエンド開発は、新しいJavaScript ライブラリで悩むことが多々あります。
新しいプロジェクトを開始するたびに、厳しい選択を迫られることになります。
ReactとVueとは
少なくともフロントエンド開発にある程度精通している人であれば、Reactについて聞いたことがあるでしょう。
React は、いわゆる仮想 DOM (すなわち、すべてのノードが JavaScript オブジェクトとして表現された実際の DOM のコピー) を介して HTML ドキュメントと対話し、宣言型のプログラミングスタイルに従います。コンポーネントベースのアプローチにより、複雑なアプリケーションを構築する際のスピードと柔軟性が向上します。
Vue.jsもまた、複雑なUIを構築するためのオープンソースのフレームワークとして人気があります。
Vue.jsはAngularやReactに見られる多くのコンセプトを改良しています。
Vueはプログレッシブなフレームワークとして宣伝されており、既存のプロジェクトの機能を一度に一つずつ移行することができます。ニーズに応じて、Vue は軽量なライブラリと本格的なフレームワークの間でスケールします。
Reactと同様に、コンポーネント、双方向のデータバインディング、仮想DOMを使用します。ここ数年、Vueは開発者の間で非常に人気があり、Laravelの公式サポートを得ました。
ReactとVue、人気度とサポートから比較
ライブラリの人気は、採用できる開発者の数やサードパーティのライブラリの質に影響を与えます。
しかし、最も重要なことは、あなたのプロジェクトを開発している間に遭遇するかもしれない問題を、誰かがすでに解決しているということです。
Reactはこのカテゴリでは明らかに勝者です。その巨大なコミュニティは、チュートリアル、オンラインコース、記事、Stackoverflow での質問数の 3 倍以上にもなります。
コミュニティが大きくなるということは、サードパーティのライブラリ、パッケージ、ツール、拡張機能の巨大なエコシステムがあるということであり、すべての主要なIDEからのサポートがあるということでもある。
さらに、このライブラリはFacebookによって開発・保守されており、長期的なサポートが保証されています。これは複数のFBプロジェクトで使用されており、各チームがライブラリを更新することができます。アップデートはコメントのリクエストに基づいて行われるため、公式のロードマップはないようです。
残念ながら、ReactのコミュニティはVueのものよりも少し分断されており、共通の問題の解決策を探すのに多くの時間を費やさなければならないことが多いです。
Vue は市場シェアは小さいですが、コミュニティは常に成長しています。リソース、パッケージ、サードパーティライブラリの数はReactよりも少なく（その多くは英語のローカライズがされていません）、すぐに利用できるツールの数も多くあります。
Vueはすべての主要なIDEをサポートしていますが、Reactほどではありません。
Vue は Evan You と 24 人の開発者からなるチームがクラウドファンディングで資金を調達してメンテナンスを行っています。GitHubでそのハイレベルなロードマップを見ることができます。
ReactとVue、開発者間普及度と今後
Reactが最も人気のあるフロントエンドライブラリであることから、より多くの経験豊富なエンジニアが採用されています。2019年のフロントエンドツール調査によると、開発者の48%以上が快適なレベルでReactを使用できると回答しています（対するVueは23%）。
HackerRankのDeveloper Skillsレポートでは、33.2%の企業がReactの開発者を必要としている一方で、必要なスキルを持っているエンジニアはわずか19%しかいないことに言及しています。
Vueの場合、不足率はさらに高い（10% vs 5.1%）。
わずか数年前に人気を博したものの、Vueはプログラマーが2020年に学びたいテクノロジーのリストの4位にランクインしています。
その驚くほど簡単に学べるということは、Vueの開発者の数が今後増えていくことを意味しています。
ReactとVue、ドキュメント
React のドキュメントは Vue のものと比べても見劣りします。React 開発の基本的なことを説明し、いくつかの高度な概念も含まれていますが、プレゼンテーションはアクセスしやすいものではありませんし、構造化されたものでもありません。
さらに、Vue のドキュメントにあるような React のエコシステムの詳細な概要は含まれていません。
Vue には素晴らしいドキュメントがあり、その API リファレンスは業界でもトップクラスです。よく書かれていて、わかりやすく、アクセスしやすく、Vue アプリケーションを作成するために知っておく必要があるほとんどすべてのことを扱っています。
Reactと同様に、ドキュメントは英語以外にもいくつかの言語に翻訳されています。
良くも悪くも、VueはReactよりも意見が多く、多くの問題がドキュメントに明確な答えを持っています。
ReactとVue、パフォーマンス
アプリの速度を決定する主な測定基準は、起動時間と実行時のパフォーマンスの 2 つです。
どちらのライブラリも、初期ロードを高速化する小さなバンドルサイズを持っています（Vueの場合は31KB/非圧縮84.4KB、Reactの場合は32.5/101.2KB）。
ランタイムパフォーマンスについては、一般的なJSフレームワークとライブラリの起動時間、メモリ割り当て、操作時間を比較したベンチマークをチェックしてみてください。
どちらのライブラリも優れたパフォーマンスを発揮しています。メモリ割り当てと起動時間ではVueの方がわずかに優れているのに対し、実行時のパフォーマンスではReactの方が少し速いです。
ただし、ベンチマークだけでライブラリの性能を判断してはいけません。アプリケーションのサイズや最適化の努力によって速度は大きく変わる可能性があります。
両方のライブラリには以下のような機能があります。
- サーバーサイドレンダリング(SSR)
- ツリーシェイク
をバンドルしています。
また、仮想 DOM を使用しています。現実の DOM を変更するのはリソース集約的な作業なので、更新はまず仮想 DOM に適用されます。
Reactでは、コンポーネントの状態を変更すると、そのすべての子コンポーネントが再レンダリングされます。
パフォーマンスを向上させるために、PureComponent、shouldComponentUpdate、または不変のデータ構造を使用することができます。しかし、子コンポーネントのレンダリング出力がコンポーネントのプロップによって制御されていない稀なケースでは、この手法は DOM の状態に不整合を引き起こす可能性があります。
一方、Vue は依存性を追跡し、子コンポーネントの不要なレンダリングを防ぎます。
ReactとVue、拡張性
フロントエンドフレームワークでは、スケーラビリティには2つのフレーバーがあります：シングルページアプリケーション（SPA）を拡張することと、従来のMPAにページ数を追加することです。
Reactは複数ページのアプリケーションで使用できるほど軽量です（Facebookはほとんどのページでこれを行っています）。
ライブラリをインポートして、Reactコンポーネントを使ってJS機能を追加し始めることができます。
このライブラリは大規模なSPAにも適しています（Facebookの広告コンソールを見てください）。
プロジェクトをキックスタートさせるには、サードパーティ製のフォームパッケージとルーティングソリューション（例：FluxやRedux）が必要です。プロジェクトの構築を開始し、ローカルの開発サーバーをセットアップし、コードにエラーがないかチェックし、e2e/unitテストを実行するには、create-react-appと呼ばれる足場ツールを使うことができます。
ただし、プロジェクト作成時のカスタマイズがほとんどないので、Vue CLIには少し劣ります。
プロジェクトテンプレートはSPAという1つのテンプレートしかありません（Vue CLIにはあらゆる場面に対応した豊富なテンプレートが用意されています）。
また、独自のテンプレートやコミュニティが作成したテンプレートをインポートするオプションもありません。
Vueは、インタラクティブなマルチページアプリの作成に優れています。コアライブラリを素早くインポートして、既存のページにVueを注入することができます。よりシンプルな機能のためにコンポーネントを使用する必要もありません。
Vue CLI 4を使えば、新しいプロジェクトの構築をすぐに始めることができます。WebpackやBrowserifyのようなビルドシステム（または全くビルドシステムを使用しない場合もあります）で使用できる足場を提供します。
ルーティングやフォームバリデーションのための追加パッケージをインストールする必要があります。プロジェクトの依存関係をプラグインとしてインストールすることで、後々の柔軟性が高まります。標準の一部が変更された場合でも、プラグインを更新するだけで、スタックを変更したり設定したりする必要はありません。
Vue は大規模な SPA の開発に適していますが、この目的のために作られたものではありません。プロジェクトが大きくなるにつれて、HTML テンプレートを再利用することは JSX 構文に比べて苦痛になります。
ReactとVue、モバイル対応
React Native は、クロスプラットフォーム開発の王様と言っても過言ではありません。Reactライクなコンポーネントを使って、AndroidとiOS間で最大99%のJSコードを再利用することができます。
独自のスタイルを制御する100%ネイティブのウィジェットを作成することができます。フレームワークはビューレイヤーを純粋なステート出力として処理するので、iOS/Android用のコンパニオンアプリをネイティブなルックアンドパフォーマンスで簡単に作成することができます。