動きのあるWebページには必ずと言っていいほど JavaScript が使われていますが、JavaScript には数多くのフレームワークやライブラリが存在します。なかでもその使いやすさや保守性の高さから、世界でも人気の高いライブラリが React です。
本記事では、その React について、特徴やメリット・デメリット、活用事例などを解説していきます。
Reactとは
Reactは、UI（ユーザインタフェース） 部分の構築に特化した JavaScript のライブラリで、React.js とも呼ばれます。
SNS で有名な Meta社（旧Facebook社）が自社サービスの機能拡張に伴うコードの複雑化によって維持管理がしにくくなることを防ぐために開発しました。
コーディングコストが少なく、開発規模が大きくなっても管理しやすいといった特長もあり、現在では開発元である Facebook社のサービスである Facebook や Instagram はもちろんのこと、Yahoo! や Airbnb、Reddit、Netflix、Slack、Uber といった世界的な Webサイトや Webアプリで利用されるなど、世界中の多くの企業で採用されており、日本でも注目を集めるなど、今最も勢いのあるライブラリです。
React というと Webアプリを作るReact.jsを指すことが一般的ですが、作りたいものによって、スマホアプリなら React Native、AR/VRアプリなら React 360 （旧React VR）といった使い分けをします。Webアプリを作った後に、スマホアプリも作りたくなったら、ほとんどソースコードをいじらずにスマホアプリを作れるのが魅力です。
ライブラリとフレームワークとどう違う？
フレームワークと勘違いされがちなReactですが、公式サイトでも「ライブラリ」と記載されています。
どちらも開発効率を上げる存在ではありますが、フレームワークはアプリ開発の機能が一通り備わったプログラムを指すのに対し、ライブラリはプログラムの1部のみを切り離して、1つのまとめたもの指します。
Reactにもさまざまな機能が備わってはいますが、そのほとんどがUI部分の構築をサポートする機能であるため、フレームワークではなくライブラリに分類されます。
Reactでできること
.png)
Webアプリ開発
React.js を使えば、Webアプリを開発できます。
特に、Webアプリのなかでも、画面遷移が少なく、単一の Webページでユーザが行う操作を完結でき、ユーザにとって使いやすいと言われている「SPA（シングルページアプリケーション）」の開発向きです。
有名どころでいうと Google Map です。ブラウザ上でもネイティブアプリの Google Map とほとんど同じ機能が使えます。
モバイルアプリ開発
React Native React 360 （旧React VR）というツールを使えば、Reactで書いたWebアプリのソースコードをほとんど変えずに iOS や Android 向けのスマホアプリを開発できるため、開発環境を統一することができます。
VR開発
React 360 （旧React VR）を使えばWebベースの AR/VR アプリ開発もできます。今までは表面的だった Webコンテンツに3Dという表現が加わることで、3Dゲームや 360 度見渡せるショッピングサイトなども作ることができます。Web開発環境があれば VRアプリを作れるという気軽さもいいですね。
Reactの特徴
JSX記法
JSX 記法はマークアップ手法のなかでも特殊な JavaScript 拡張記法で、「アプリが～～な状態ならば UI はこう表示する」といったように JavaScript の中に HTML タグを宣言し、書き込んでいきます。これは、 React が JavaScript ファイルだけで構成されているため、JavaScript 内で HTML を返さなければならないからです。
宣言的なView（Declarative）
React ではその JSX 記法を使って UI を宣言していきます。
誰が読んでもわかりやすいソースコードになるため、デバッグやテストがしやすくなり、結果的にバグの発生を防ぎやすくなくなります。
コンポーネント指向
ソフトウェア開発において、機能ごとにわかりやすい単位で部品（コンポーネント）化し、小さい規模で開発する考え方です。
React においても、レイアウトや状態、スタイルをカプセル化して、コンポーネントごとに開発し、他のコンポーネントと組み合わせることで SPA などの複雑なアプリを構築することもできます。
コンポーネント間の依存性を極力抑えることで、複雑なUIでも個別で管理できるため、管理がしやすくなる、再利用もしやすくなる、拡張性が高まるなど、多くの利点を享受できます。これにより、大規模な開発でも保守性を高く保てます。
一度学習すれば、どこでも使える（Learn Once, Write Anywhere）
これは React が掲げるコンセプトでもありますが、React のスキルを一度習得してしまえば、他の分野の開発にも応用できるということです。先述のとおり、Web開発には React.js、スマホアプリ開発にはReact Native、AR/VR 開発にはReact 360 （旧React VR）などといったように分野別に分かれていますが、記述方法がほとんど同じであるという点が魅力です。
必要な部分だけが更新される仮想 DOM
React は「仮想DOM」という仕組みを有しています。
DOM（＝Document Object Model）とは、「ドキュメントをモノ（オブジェクト）として扱う型」のことです。React では、この DOM を仮想化した「仮想DOM」を使うことで、HTML上の実際の DOM との差分を React が検知し、必要な部分だけを更新し、レンダリングしてくれます。
ページ全体を更新せず、表示で変化のある部分箇所だけを更新して表示するため、レンダリング速度が速くなります。
Reactのメリット・デメリット
.png)
Reactのメリット
レンダリングが高速
全項でも説明しましたが、Webページを更新する際、仮想DOM を用いることで全体ではなく、変更箇所だけを更新するため高速に動作します。
小規模な開発から大規模な開発まで可能
既存サイトの特定のチャットボットの部分のみを React で開発するといった小規模な開発も複雑な条件分岐がある大規模な開発まで守備範囲が広いのも React の特徴です。
SPA（Single Page Application）向き
画面遷移せずユーザにとって使いやすいSPAの Web アプリがスマートフォンの普及などによって増えてきましたが、Reactはその SPAアプリの開発にも適しています。
SPA はまず必要な HTMLや JavaScript、 CSS をサーバから受け取り、それ以降は差分だけを更新するため、データ通信量やレンダレングコストを抑えられます。
ただ、その反面、単一ページにさまざまな機能を追加しないといけないため、コードが複雑化し、システムがブラックボックス化してしまったり、ページの読み込み速度が遅くなってしまったりすることもあります。
その点、React はページ内のそれぞれの機能をコンポーネントに分割することで、コードが複雑化することなく、UI の表示切り替えも分かりやすく記述できます。
UIコンポーネントのライブラリが多い
React はその人気の高さから、UI パーツを React コンポーネントとして扱えるようにパッケージ化された UI コンポーネントライブラリが数多くの企業や有志から提供されています。
JavaScriptの知識があれば使える
基本的にReactはJavaScriptで書かれているため、JavaScriptの知識があればアプリを開発することができます。たとえJavaScriptの開発経験がなくても基本構文を理解していれば開発に取り掛かれるので予備知識がない人は学習をするのをおすすめします。
Reactのデメリット
コードの記述量が増えてしまう
React は、宣言的であるが故に記述するコード量が増える傾向があります。簡単なページや、大半が静的コンテンツで、少しだけ JavaScript が必要なケースであれば、React は使わず HTML とプレーンな JavaScript だけで実装した方がよいでしょう。
環境構築に時間がかかる
React を使うにはNode.js や babelといったさまざまなライブラリをインストールしなくてはなりません。また、システムごとにそれらのバージョンアップに対応しなければなりません。
Reactに向かない場合も
React は軽快に動作させるために仮想DOM でメモリに DOM構造を記憶させておく必要があるため、メモリを大量に使用します。これにより、読み込みが遅くなることもあるので、Webページによって向き不向きがあります。たとえば、地図アプリのようなユーザの操作によって頻繁に表示が変更されるような Webページには向いていますが、ユーザがほとんど操作をしないニュースアプリのような Webページにはむしろ読み込み時間がかかってしまうので不向きです。
日本語で書かれた情報が少ない
海外の利用者は多く、参照ドキュメントもそのほとんどが英語で書かれています。日本では React を導入する企業は増えているものの、いまだ jQuery の人気が高いのが現状です。学習コストこそ低いですが英語が読めないと難しい可能性もあります。そのため、現状の参照ドキュメントは充実しているとは言えません。
とはいえ、React は海外からの評価も高く、遅かれ早かれ日本でも React が普及していくのは明白なので、それに伴って日本語のドキュメントも増えていくと推測されます。
Reactの活用事例
React は、そのパフォーマンスの高さから、生みの親である Meta を始めとする多くの企業で取り入れられています。実際に React を活用して作られたサービスをご紹介します。
Airbnb
世界最大手の民泊仲介サービス「Airbnb」も React Native で開発されました。
Instagram
写真共有アプリ「Instagram」もReact Nativeで開発されました。機能が単純な SNS アプリは React Nativeでも大規模なものが作れます。
Skype
オンライン通話アプリ「Skype」もReact Nativeで作られています。
メルカリ
「メルカリ」も React Nativeで開発されました。
