【入門】Reactとは？特徴やインストール方法をわかりやすく解説

Masaki Yamaoka

2024.06.20

Technology部の山岡です。この記事では、Webアプリケーション開発の際によく用いられるReactについて解説します。

Reactとは何なのか。どんな特徴があるのか。どうやって勉強すればいいのか。まだアプリケーションの開発に馴染みのない方や、プログラムを勉強したての方にもわかりやすくなるよう、適宜用語を噛み砕いて説明していきますので、ぜひご覧になってください。

Reactとは？

Reactとは、Webサイトやアプリケーションの開発の際に用いられる、JavaScriptライブラリの一つです。Facebook社が開発し、2013年にオープンソース化されました。

Reactは、JavaScriptライブラリの中でもSPA（シングルページアプリケーション）の開発に特化しており、可読性やパフォーマンスの高さが評価されています。

Reactの特徴として、以下3つが挙げられます。

宣言的なソースコード
コンポーネントベースの開発
高速な処理

どれも難しい言葉ばかりですね。一緒に勉強をする意味も込めて、それぞれ意味を噛み砕いてみていきましょう。

特徴1：宣言的なソースコード

「宣言的」という言葉を、ここではもう少し簡単に言い換えてみます。

ソースコードは主に「宣言的」と「命令的」に分けられるのですが、「宣言的」とは「何を」達成するのか、に焦点を当てたコーディングスタイルになります。一方で「命令的」は「どうやって」達成するのか、に焦点を当てたコーディングスタイルです。

Reactでは、UI（HTMLで表記されるような、ユーザーから目に見える領域）とロジック（JavaScriptで表記されるような内部処理）を同じソースコードの中に書くことができます。これにより、一つのソースコード内で「何を表現したいのか」が完結されるため、第三者が見てもコードの意味を捉えやすく、不具合への対応も簡単になります。

特徴2：コンポーネントベースの開発

Reactでは、プログラムを要素（コンポーネント）ごとにソースコードを分けて開発をすることが可能です。一つのプログラムを表現するために、機能や項目ごとに複数の小さなソースコードを開発して、それを組み合わせるイメージです。

これにより、あとから新規要素を加える際にも、既存のコードに手を加える必要が少なくなります。また、一部機能に不具合が生じた場合にも、該当するコンポーネントのみを修正するだけで対応ができるようになります。

特徴3：高速な処理

さらにReactは、仮想DOMと呼ばれる技術を採用しており、頻繁に表示内容の変化するアプリケーションを高速に処理することが可能です。

仮想DOMとは、アプリケーション全体の大枠となる構造（DOM構造）をユーザー側のメモリに保存し、コンポーネント単位の変化のみを反映させる処理システムのことです。これにより、表示内容を変化させるためにWebページ全体を読み込まなければならなかった従来の手法と比較して、処理にかかる時間を短縮させることが可能となります。

また、Reactのようなページの一部分だけを更新して表示内容を変化させるWebアプリケーションのことを、SPA（シングルページアプリケーション）と呼びます。

Reactのメリット

次に実際の開発を想定して、Reactのメリットについて見ていきましょう。Reactについてもっと知りたい方、Reactを開発に取り入れようか検討している方は、ぜひ参考にしてください。

開発効率が高い

Reactを利用するメリットの一つめは、開発効率の高さです。Reactはコンポーネントベースで設計されており、異なるWebアプリケーションで同一の機能を実装したい場合には、コンポーネントの再利用が可能です。

また、JavaScripitのフレームワークということで、JavaScriptやHTML、CSSでの開発経験がある方には、技術的コストもそれほど高くはありません。

iOS、Androidの両方に対応

Webアプリケーションだけでなく、モバイルアプリ開発向けにReact Nativeというフレームワークが用意されており、iOSとAndroidの両方に対応しています。

二つのプラットフォームに向けたアプリを一つのコードで開発することが可能なので、それぞれの環境にアプリを適応させるための時間とコストを大幅に軽減させることができます。

UIコンポーネントライブラリが豊富

Webアプリケーションの開発では、アプリの機能だけでなく、視覚的な見やすさや操作性についても検討する必要があります。

ReactにはMUIやAnt DesignなどのUIコンポーネントライブラリが豊富に用意されています。UIコンポーネントとはアイコンやボタンといったUI（ユーザーインターフェイス）に関連するコンポーネントで、簡単にアプリケーションに導入することが可能です。これにより、誰でも簡単にデザイン性の高いアプリケーションを開発することが可能となります。

Reactのデメリット

続いてデメリットをご紹介します。

一部のアプリには不向き

Reactは上述したとおり仮想DOMを採用していますが、Webページ内の変化の少ないアプリケーションには不向きとされています。

理由としては、ページの更新が少ない場合、メモリ上に保存したDOM構造が無駄となり、かえってメモリを圧迫して、処理が遅延してしまうためです。Reactを利用する場合には仮想DOM構造が有用に働くかどうか、検討する必要があります。

環境構築のハードルが高い

Reactを導入するためには、Node.jsなどの別のプログラムをインストールする必要があります。

また、上述したMUIなどの外部コンポーネントを取り入れる場合もあり、頻繁に更新されています。アプリケーションを開発するためには、これら別プログラムのバージョンをきちんと管理しなければなりません。

他のライブラリやフレームワークと比較すると、最初は複雑に感じるかもしれません。

Reactの活用例

Webアプリ

Reactは前述したコンポーネント単位の内部処理により、大規模かつ動的なWebアプリの開発に適しています。

Reactを用いて開発されたアプリの代表例として以下が挙げられます。

Facebook
Netflix
Dropbox

いずれも膨大なデータを常時画面に反映する必要のあるアプリで、画面全体の再読み込みを常に必要とする開発手法と比較して、Reactの処理の速さを活かした事例となります。

モバイルアプリ

Reactで開発されたモバイルアプリの例として、以下が挙げられます。

UberEats
Discord
Skype

これらもWebアプリと同様に、常に情報の更新が必要なアプリケーションで、Reactの処理の速さを活かした事例となります。大規模なアプリケーションであっても、Reactであれば安定した開発と更新が可能です。

Reactのインストール方法と環境構成

次に、実際にReactで開発をするための環境構築方法と、実際の開発の手順について見ていきましょう。

Reactで開発をおこなうためには、HTMLやCSS、JavaScriptの知識のほかに、コンポーネントの管理方法を知っておく必要があります。環境の構築方法から、構築後のディレクトリ構成の見方まで解説するので、ぜひ参考にしてください。

1.Node.jsの導入

Reactの開発環境をインストールするためには、Node.jsが必要となります。

Node.jsはJavaScriptの実行環境（ランタイム）で、Node.jsの公式サイトからダウンロードが可能です。パソコンの環境によってはすでにインストールされている場合もあります。

Node.jsの導入後は以下のコマンドを実行しましょう。

node -v
npm -v

Node.js、そしてReactのインストールに必要なnpm （Node Package Manager）のバージョンが表示されれば、インストール成功です。

2.Reactの開発環境の構築

Node.jsのインストールが終わったら、次はアプリを開発したいディレクトリに移動して、以下のコマンドを入力しましょう。

npx create-react-app [アプリ名]

成功すると、Happy hackingという表示が出てきたのち、［アプリ名］のディレクトリが新しく作成されます。これでReact開発環境の構築は終わりです。

3.Reactのディレクトリ構成

インストールに成功すると、[ アプリ名 ] のディレクトリの中にpublicディレクトリ、srcディレクトリが作られます。

Reactでは、publicディレクトリ内の index.html ファイルが実際のWebページとして読み込まれます。しかし、ページの名前やアイコンなどを変更する以外で、とくにこのファイルの記述を変える必要はありません。

なぜなら、内部のコンポーネントの情報は src ディレクトリ内の index.js、App.jsに記述されるからです。

イメージとしては、App.jsがコンポーネントの機能とUIを記述するところ、Index.jsがコンポーネントの情報をまとめるところ、です。コンポーネントを増やす場合には、App.jsのようなJavaScriptファイルを新たに作成し、Index.js内にコンポーネント名を追加することで、Webページにも反映されます。