Reactとは？JavaScriptフレームワークについて解説

Reactとは

React（リアクト）は、2013年にFacebookのエンジニアであるジョーダン・ワーク（Jordan Walke）氏によって開発されたウェブアプリケーション構築用のJavaScriptフレームワークです。

Reactは、フロントエンドで動作するウェブアプリケーションを構築するためのJavaScriptフレームワークです。滑らかに描画されるウェブアプリを、短い記述で構築できることなどから人気が高まっています。2020年現在、人気の高いReact、Vue.js、Angularの三大JavaScriptフレームワークのひとつです。

Reactでは、ページ遷移を非同期に行うシングルページアプリケーション（SPA）を開発できます。SPAのような高度なウェブアプリは、フレームワークなしで開発すれば複雑で面倒なコーディングが必要になりますが、Reactを使用するとインタラクティブなUIを簡単に作成できます。

公式サイトの表記は「React」ですが、一般的には「React.js」や「ReactJS」とも呼ばれます。現在Reactは、Facebookとコミュニティによって開発されています。

Reactと併用するフレームワークの登場

React Native

2015年、React Nativeが発表されました。React Nativeは、ネイティブを開発するためのJavaScriptフレームワークです。 Reactと同様に、開発言語にはJavaScriptとJSXを使います。React Nativeを使用すると、iOSとAndroidアプリ開発の強力な手助けとなります。

Redux

2015年、Redux が発表されました。 Reduxは、Reactによるアプリケーションのstate（状態）を管理をするフレームワークです。 Reactはシングルページアプリケーション（SPA）開発に向いていますが、SPAはstate管理が複雑になりがちです。ReactとReduxを併用することで、複雑になりがちなstateが扱いやすくなります。

Reactの特徴

Reactには、以下の特徴があります。

モダンなウェブアプリケーションが構築できる
シングルページアプリケーション（SPA）の開発に向く
JavaScriptの構文を拡張したJSXが使用できる
仮想DOMを使用することで、描画が高速でメンテナンスしやすいアプリを実現

Reactを利用すると、モダンなウェブアプリケーションを構築できます。特に、ページ遷移しないで単一のページでコンテンツを切り替えるシングルページアプリケーション（SPA）の開発に向いています。

Reactでは、JSXと呼ばれるXMLに似た構文を使用できます。 FacebookはPHP向けにXHPという拡張構文を開発していますが、JSXもまたJavaScriptの拡張構文として開発されたものです。尚、JSXはあくまでもオプションであり、Reactの使用に必須ではありません。

Reactは、仮想DOMを使用しています。DOMを直接操作するとプログラムが複雑になって描画の時間が掛かってしまったり、エンジニアもメンテナンスしづらくなります。Reactでは、仮想DOMを使用することで、描画が高速でメンテナンスしやすいアプリを実現しています。

Vue.jsとの比較

ReactとVue.jsは、どちらも実行速度が高速なJavaScriptフレームワークでよく似ています。ウェブアプリケーションの開発案件においては、どちらを採用するか検討されるような競合関係にあると言えるでしょう。

ReactではHTMLやCSSまですべてJavaScript内で管理しているのに対して、Vue.jsではある程度HTMLやCSSはテンプレートとして用意されています。

Vue.jsとは？JavaScriptフレームワークについて解説

Angularとの比較

Angularは、アプリケーション構築に必要な機能を網羅したフルスタックフレームワークです。Angularだけでウェブアプリケーション開発に必要な機能が揃っています。一方、Reactはフルスタックフレームワークではありません。

AngularとReactは、どちらもシングルページアプリケーション（SPA）の開発ができるフレームワークですが、どちらかと言えば、Angularのほうが大規模なウェブアプリケーション開発に向いています。ただし、 Angularは覚えなくてはならないことも多く、学習コストが高いフレームワークとされています。

ReactではJavaScriptやJSXで開発しますが、AngularではTypeScriptでの開発が推奨されています。また、AngularやVue.jsでは、HTMLやCSSはテンプレートとして用意されていますが、Reactでは、HTMLやCSSまですべてJavaScript内で管理されています。

2019年末時点の調査によれば、Angularが学習コストの高さから敬遠される傾向にあるのに対して、Reactの人気は上昇傾向にあるようです。