【初心者向け】Reactとは？注目されている背景や特徴・メリットを解説

Reactは昨今特に高い注目を集めているUI用のJavaScriptライブラリです。世界中の名だたるWebサービス・アプリがReactを採用しています。Reactを使えば、可読性やパフォーマンスを高められることから開発品質の向上が可能です。

この記事ではReactとは何かといった基本から特徴・メリットについてわかりやすく解説します。Reactのインストール方法や学習方法についても紹介しておりますので、これからReactを学ぼうと考えている方は是非参考にして下さい。

Reactとは

Reactとは、WebサイトやWebアプリのUI部分を開発する際に活用するJavaScriptライブラリ※です。ReactはReact.js（React.JS）と表記されることもあります。ReactはFacebook社が開発し、2013年にオープンソース化されました。

現在、FacebookをはじめInstagram・Slack・Netflix・Yahoo!など、世界的なWebサイト・WebアプリでReactが採用されています。日本でもReactは注目を集め、採用企業も増えている状況です。

ライブラリとよく比較されるものに「フレームワーク」があります。フレームワークとは、新しいプログラムを開発する際に使える枠組みです。フレームワークを使えばプログラムの枠組み（土台）まで用意される分だけ、ライブラリより効率的とは言えます。その反面、決まった枠組みに従わないといけないので、ライブラリより自由度は低いです。

ReactはJavaScript用のフレームワークと勘違いされることがありますが、実際には上述の通りライブラリとなります。利用する際は違いに注意して下さい。

Reactが注目されている背景

ReactのようなUI用ライブラリやフレームワークが注目されている背景として、SPAの普及があげられます。SPAとは「Single Page Application」の略で、文字通り1つのページだけで使えるWebアプリケーションのことです。SPAでは、クリックなどによって他ページに遷移することはありません。

SPAの代表的な例として、Google MapやGmail、Facebook、Slackなどがあげられます。これらを利用する際は、コンテンツの更新が発生してもページ遷移は発生しません。1つのWebページだけで全ての処理が完結します。

それではSPAの普及によって、なぜReactをはじめとしたUI用ライブラリやフレームワークが注目されるようになったのでしょうか。その理由は、SPAではUIをできる限り合理的にわかりやすく作る必要性が生じているためです。

SPAでは1つのページで全ての処理を完結させる必要上、同じページにたくさんの機能が集約されることになります。しかし、うまく整理して機能をページ内に配置しないと、UIは雑然として使いにくくなってしまうのです。その点Reactをはじめとしたライブラリやフレームワークを使えば、クオリティの高いUIを簡単かつ効率的に開発できます。

その上でReactは、数あるUI用ライブラリ・フレームワークの中でもパフォーマンスが高く、最先端のUIを作りやすいのが特徴です。またReactはライブラリであることから、フレームワークと違い必要な機能だけを抜粋して利用できることも注目されている理由といえます。

Reactの主な特徴・メリット

Reactは多くの開発者によって利用されています。Reactにはどのような特徴・メリットがあるのでしょうか。以下1つずつみていきましょう。

「宣言的」でソースコードを理解しやすい

「宣言的」とは「このコードではこういう動作をする」ということが、コードのなかで明示された（宣言された）状態のことです。Reactは宣言的であるため、他の人がそのソースコードを見ても中身を理解しやすくなっています。第三者からみても中身が分かりやすいことから、仮に不具合が発見されてもその原因を調査しやすいのもメリットです。

「コンポーネント指向」で拡張しやすい

コンポーネント指向とはプログラムを小さな機能ごとの部品（＝コンポーネント）に分け、必要に応じて組み合わせて開発する考え方です。コンポーネント指向でない場合、あとからプログラムを変更するときは全体的な変更が余儀なくされます。

一方でコンポーネント指向であれば、あとから改良したいときも対象のコンポーネントだけ変更すればすむのです。Reactはコンポーネント指向であるため、あとから拡張しやすくなっています。

Reactを学習すれば、様々な分野で活用が可能

ReactはWebサイト・Webアプリだけでなく、それ以外の様々な分野でも活用されています。たとえばスマートフォンのアプリを開発する場合、これまでは複数のプログラム言語を使い分ける必要がありました。

一方でReactであれば、1つの開発環境でAndroid・iOS両方のアプリを開発可能です。Reactから派生した「React VR」技術を使えば、VRアプリも開発できます。

「仮想DOM」採用で処理が高速

Reactの特徴として仮想DOM採用により、Webページの描画処理が高速な点があげられます。

仮想DOMについて理解するためには、そもそもDOMとは何かから知らなくてはなりません。DOMとは、JavaScriptでHTMLのドキュメントを操作する際に使う仕組みです。WebブラウザはHTML・XMLドキュメントを読み込んだ際に、DOM（Document Object Model）構造を構築し、それに基づきWebページを描画します。

その上で仮想DOMとはDOM構造をメモリに保存しておき、Webページを描画する際は変更が加えられた箇所だけ反映させるのです。そのためWebページが更新された際に、ページ全体を更新する必要がなくなり、描画処理が高速になります。

最先端のユーザーインターフェースを作りやすい

これはReactを使う際の分かりやすいメリットと言えるでしょう。Reactは世界中で多くのユーザーが利用しており、ライブラリに用意された各コンポーネントは今風に洗練されています。そのためWebページのデザイン経験が少ない人でも、Reactを使えば比較的簡単に最先端のユーザーインターフェースを作れるわけです。

Reactを使うときの注意点

Reactは優れた技術ですが、UI開発における全てのシーンに適しているわけではありません。以下、Reactを採用する際に注意しておくべき点について解説します。

アプリ・Webページによっては不向き

Reactは仮想DOMを採用することで、アプリ・Webページの種類によってはかえって処理速度が落ちてしまう面があり注意が必要です。

仮想DOMではDOM構造をメモリ上に保持する関係から、その分だけメモリを多く消費することになります。その上でニュースアプリのように、ユーザーが読むだけでページ更新が少ない場合は仮想DOMのメリットが活かされません。

せっかくメモリ上に保存したDOM構造の役割がなくなってしまうわけです。そうなると、仮想DOMはメモリを多く消費するだけでかえって非効率で処理が遅くなります。

ReactはGoogle Mapのように、ユーザー操作によって頻繁に表示内容がかわるアプリ・Webページに適した技術です。Reactを使う際は、仮想DOMの特性が活かされるかを検討する必要があります。

環境を構築するのに手間がかかる

Reactを使うためには、Node.jsをはじめbabel・webpackなどのプログラムをインストールすることが求められます。インストール後は、これらプログラムのアップデートなどの対応も必要です。その分、環境の構築に手間がかかることは否めません。

ただし、昨今ではReactの環境構築をシンプルにするスターターキットなどもあります。それらを利用すれば、環境構築の手間を軽減可能です。

Reactのインストール方法

ここでは、WindowsとWindows上でLinux OSを動作させられる「WSL」を利用し、React環境を用意する方法を紹介します。

※KAGOYA VPSでもubuntuなどのLinux OSが利用可能であるため、この環境でもインストールが可能です。

まずはWindows上でWSLの設定を行い、その上でLinux OS（ここでは「ubuntu」を利用）をインストールすることが必要です。

ここまでの手順は、以下記事で紹介しておりますのでそちらを参考にして下さい。

WSL2の設定が終わったら、PowerShellを利用しubuntuを起動させてください。その後、以下手順で必要なプログラムのインストールを続けます。

1.以下コマンドを実行しcURL※をインストールします。

※インターネット上から、これからインストールするプログラムをダウンロードするためのツール

sudo apt-get install curl

2.nvm※をインストールします。

※nvmは、Javaスクリプトの実行環境である「Node.js」のバージョンを管理するツールです。これからNode.jsをインストールするのに利用します。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

※「v0.39.1」は現時点（2022年5月）のバージョンを示しています。最新のバージョンに関しては以下URLで確認し、この部分を適宜修正して下さい。
https://github.com/nvm-sh/nvm

3.Node.js（LTSリリース）をインストールします。

nvm install --lts

4.最新バージョンのNode.jsをインストールします。

nvm install node

5.Node.jsが正常にインストールされたか確認します。

nvm ls

正常にNode.jsがインストールされている場合、以下が表示されます。

default -> node（バージョン名）
node -> stable（バージョン名）
stable ->バージョン名

6.Reactアプリを作成します。 ※未インストールのパッケージに含まれるコマンドを使う必要があることから、ここではnpxコマンドを実行します。

npx create-react-app my-app

7.「my-app」ディレクトリに移動します。

cd my-app

8.インストール完了後、Reactサーバーを起動します。

npm start

これでNode.jsサーバーが起動し、Reactが使えるようになります。

※「http://localhost:3000/」というURLにアクセスすると、Reactサーバーの画面が表示されます。

これでReactの環境構築は完了です。

Reactの学習に役立つWebサイト・書籍

※注意
Reactを使えるようにするためには、その前提としてJavaScriptの基本的な知識が必要です。JavaScript初心者の方は、まず以下記事を参考に学習を進めてください。

【超入門】JavaScriptとは？できること・基本をわかりやすく解説 https://www.kagoya.jp/howto/it-glossary/web/javascript/

ReactはWebサイトや専用書籍で詳しく学ぶこともできます。以下、おすすめをいくつか紹介するので参考にして下さい。

• 【Webサイト】公式チュートリアル
  Reactの公式チュートリアルです。Reactとは何かといった基本から、Reactを使い簡単なゲームを作る方法まで解説されています。
  https://ja.reactjs.org/tutorial/tutorial.html
  
• 【Webサイト】Udemy
  Udemyは、様々なジャンルのオンライン学習講座が集まるプラットフォームです。Reactに関しても、基本的な講座から実践的な講座まで幅広く公開されています。
  https://www.udemy.com/courses/search/?src=ukw&q=React+js
  
• 【書籍】React.js&Next.js超入門
  図解などを使い、初心者の方でもReactを理解しやすいように分かりやすくまとめた入門書です。手順に関しては、可能な限り省略せず詳しく説明されています。
  https://www.shuwasystem.co.jp/book/9784798063980.html

まとめ

Reactは質の高いUIを作るのに適したJavaScriptライブラリです。ReactはFacebookやInstagramなど、世界的にも有名なWebサイト・Webアプリでも利用されています。SPAの普及に伴い、ReactのようなUI用ライブラリに対する注目は高まっている状況です。

Reactを使えば、Webサイト・Webアプリの他、スマートフォンアプリ・VRアプリなども開発できます。需要が高い技術なので、興味のある方は今から学習をはじめても損はありません。