ReactとVueの違いとは？２大JavaScriptフレームワークを比較

ReactとVue、どちらを選ぶ？

JavaScriptフレームワークを利用してウェブアプリケーションを開発しようとした際、まず候補に挙がるのはReact、Vue、Angulerの3大 JavaScriptフレームワークではないでしょうか。

その中で、Anguler は学習コストが高そうなので、はじめて触れるJavaScriptフレームワークの候補からは外すことになるかもしれません。残るはReactとVueの２大JavaScriptフレームワークです。どちらを選べばよいのでしょうか。

Vueはライトユーザー向け

Vueは、ライトユーザー向けで、扱いやすいのが特徴です。JavaScriptの書き方とか難しいことはひとまず置いておいて、Vueではどう書けばどういう表示になるのかだけ調べて、Vueの機能を採り入れるといった使い方ができます。

短時間で使い方を学んで、より簡単にウェブアプリケーションを作りたいなら、Vueがおすすめです。JavaScriptフレームワークがどんなものか少し触ってみたいくらいなら、ひとまずVueから入るのが良いかもしれません。

JavaScriptにあまり慣れていなくても、取っつきやすいのがVueの魅力です。 Vueは機能がライトで分かりやすくて使いやすいですが、ウェブアプリを開発するための必要な機能が備わっています。Vueを使えば、コンテンツ表示の切り替えがなめらかなSPA（シングルページアプリケーション）を作成できます。

Reactは発展性を求める人向け

Reactは、ウェブアプリだけではなく、ネイティブアプリなどへの発展性を求める人向けかもしれません。Reactには、数多くの関連するフレームワークが開発されています。例えば、React Nativeはネイティブアプリを作成できるフレームワークです。React製のアプリをiOSやAndroid向けのネイティブアプリに発展させられます。

また、React 360はFacebook社が開発したVRアプリケーションフレームワークです。バーチャルリアリティ（VR）空間上の360度のUIを実装して、ウェブブラウザ上で実行するVRコンテンツのアプリが開発できます。ちなみに、React 360は、旧名React VRが改名されたものです。

これらの意欲的なフレームワークをReactの作法で利用できるので、Reactに慣れていれば、学習コストを掛けずにネイティブアプリやVR端末向けアプリの開発へと発展させやすいメリットがあります。

VueはHTML+CSSのテンプレート、 ReactはJavaScriptとJSX

Vue.jsでは、HTMLやCSSのテンプレートを利用してコンテンツを生成できます。JavaScriptに慣れていなくても、HTMLやCSSが分かる人なら取っつきやすいでしょう。一方、Reactでは、HTMLやCSSまですべてJavaScript内で管理されています。

Reactのソースは、JavaScriptとJSXで記述します。テンプレートもJavaScriptで開発するため、JavaScriptを使ってより柔軟性の高い開発が行えます。逆に言えば、 JavaScriptに慣れていない人には、Reactは取っつきにくく感じるでしょう。

Reactでは、JavaScriptだけではなく、オプションとしてJSXで書くこともできます。JSXとは「JavaScript XML」の略で、FacebookがJavaScriptの拡張として開発した構文のことです。JSXを使うとHTMLライクな構文でコードを記述でき、構造を把握しやすいメリットが得られます。