More than 1 year has passed since last update.

ReactとVue.jsの比較

Posted at 2023-12-01

はじめに

JavaScriptのフレームワークでシェア率の高いReactとVueの違いについて比較し、備忘録としてまとめました。

Reactは、Meta社によって開発・提供されているJavaScriptのライブラリです。
モジュールの再利用性が高く、UI開発に特化しており、Facebook、Instagram、Netflixnにも導入されています。

Reactはライブラリのみなので、コードサイズが小さく大規模開発にも対応可能です。軽量であり、動作も速いです。ライブラリのみなので、アプリ全体の構築には、Next.jsやRemixなどのフルスタックのフレームワークが必要となります。

Reactのデータ処理方法は、「単方向データバインディング」であり、画面に表示されるUIにも自動的に反映されます。しかし、画面上のUI操作で変更された内容をデータ側に反映するためには、イベントハンドラを使用し、更新処理を行う必要があります。

Vue.jsは、元GoogleのエンジニアであるEvan You氏が開発したJavaScriptのフレームワークです。こちらもUI開発に向いており、Googleが提供する様々なサービスに加え、Zomm、Noteに導入されています。

Vue.jsのデータ処理方法は、「双方向データバインディング」です。再レンダリング時にリアクティブにい処理が実行されます。

比較小規模なプロジェクト向きであり、大規模プロジェクトで想定されるモジュール連携た制御には物足りません。しかし、Vue.jsは、他のフレームワークやライブラリと統合して使用することもでき、拡張性が高いのが特徴です。

・UI構築ができる。
・コンポーネントに分けて編集できる。

	React	Vue.js
開発規模	大規模	小規模
開発方法	関数型	クラス宣言
処理速度	速い	Reactに比べて遅い
汎用性	実装可能なプロダクトが多く、モバイルアプリ開発にも対応	ソートや検索など高度な機能の実装に対応
サポートの充実性	公式サイトのライブラリが少ない	公式サイトのライブラリが充実
求人件数	Vue.jsと比べて多い	多い

詳細は以下の通りです。

Reactは標準搭載されている機能が豊富なため、大規模なサービスの開発に適しています。
Vue.jsは拡張機能が豊富でカスタム性に優れ、小規模なサービスの開発に適してます。

しかし、Vue.js3では大規模なアプリケーションにも対応したことで開発範囲が広がりました。

Vue.jsでは仮想DOMで再計算が行われるため、Reactよりも処理速度が劣ります。

Reactの方が実装できるプロダクトの幅広さは、Reactの方が優れており、React Nativeフレームワークによりモバイルアプリ開発も可能です。

Vue.jsは拡張機能の実装に優れてあり、ソート機能や検索機能の実装など高度なカスタマイズを行えます。

Vue.jsの方が公式サイトの情報量が充実しており、利用頻度の高いライブラリが紹介されています。

Reactは公式サイトで紹介されているライブラリが少なく、情報を自分で調べなければなりません。

SvelteやSolidなど仮想DOMを使用せず、コンパイルより事前にDOM操作を最適化してシンプルで高性能なコンパイル型フロントエンドが出現しています。

VueがSvelteに影響を受けていて、SvelteはVue.jsのscritp setupに似た少ないコード量で記述できます。

SolidはReactに近く、再レンダリングの問題が発生することなく、JSXの属性名も大文字小文字を区別せずHTMLをそのまま使用できるなど、Reactのデメリットが解消されています。