コードカキタイ
プログラミング
React開発環境構築ってどうするの？JavaScriptの基本も解説

プログラミング

最終更新日: 2022.12.15 (公開: 2022.11.25)

React開発環境構築ってどうするの？JavaScriptの基本も解説

世界中で利用されているReactの概要や人気の理由を紹介します。Reactの全体像を把握し、実際の開発環境構築を行うことで、特徴やメリット・デメリットをより深く理解できるようになります。

JavaScriptのフレームワークやライブラリのひとつである「React」は、その便利さから世界中のエンジニアが使用するほど有名です。特にフロントエンド開発エンジニアを目指している方はReact.jsを習得することで、幅広い仕事を担当できる可能性が高まります。

この記事では、Reactの学習方法や開発環境構築を紹介します。初心者の方でもReactの特徴を抑え、人気である理由を理解することでプログラミング学習をよりスムーズで効果的に進めることができるので、ぜひ参考にしてください。

そもそもReactとは？
React独自の特徴を紹介
Reactの概念を知っておこう
Reactを使うと何ができるのか？
Reactの環境構築方法
ReactでのJavaScriptの記述方法を身につけよう
Reactを身につけると多様な開発ができる

そもそもReactとは？

近年は「SPA（Single Page Application）」という1ページで完結する構造が人気です。複数の機能を1ページにまとめる必要があるため、サイトの開発者はデザインをユーザーにとって理解しやすくする必要性が高まりました。

そのため、UI（ユーザーインターフェース）用のJavaScriptライブラリである「React」が世界中で多くの企業や団体がWebサイトに利用されるようになりました。Reactは、数あるライブラリ・フレームワークの中でもコードが読みやすく、大規模な開発においても管理が簡単であるといった特徴があります。

ただし、必ずしもすべてのサイトがReactと相性がよいとは限りません。Reactの特徴を押さえ、適切な目的とシステムに応じた利用ができるようにスキルを習得する必要があります。

React独自の特徴を紹介

ReactはMeta社（旧Facebook社）が開発したライブラリです。2013年にオープンソース化され、世界中のエンジニアが改良を重ねています。

Reactを利用しているサービスの例は、以下の通りです。

Tesla
Netflix
Yahoo!
Dropbox
Instagram
WhatsApp
Facebook

このように多くの有名サービスが、Reactを活用しています。ではReactには具体的にどのような特徴があるのか、見てみましょう。

JavaScriptライブラリ

JavaScriptにはさまざまな機能を簡単に利用できるライブラリが用意されており、Reactはその中のひとつです。今回紹介するReactはUI（ユーザーインターフェース）、つまりサイトのデザインに特化したライブラリであり、簡単に高クオリティなサイトを実装できます。

ライブラリの利用方法はWebサイトごとにそれぞれ異なるため、公式ドキュメントや記事を参考に学習する必要があります。初学者にとっては学習のスタート時点から公式の説明を読んでも、理解することが難しいかもしれません。いきなりReactの文法やプログラムを理解するのではなく、まずは全体像や実装可能な機能をとらえる学習をすることがおすすめです。

JSX記法

一般的にサイトは基本的に「HTML」、「CSS」、「JavaScript」によって構成されますが、ReactはJSXという独自の記述方法が用意されています。これはHTMLとJavaScriptが合わさり、データの出力が簡単になるメリットがあります。

データを更新するとサイトに表示される値も更新されるため、不要な記述を省略することができ、エンジニアたちが簡単にサイトを実装できます。

サイトに表示するデータと連携するフレームワークやライブラリはReact以外にもあるため、学習する際はフレームワークやライブラリごとの違いを意識する必要があります。

仮想DOM

「DOM」とは「Document Object Model」の略であり、HTMLなどを取り扱うAPIのことです。JavaScriptでは、以下のようなコードでDOMを生成できます。

const element = document.createElement(“div”);

Reactは仮想DOMをライブラリの標準機能として備えています。実際にユーザーが目にするDOMとは異なり、サイトが変更される際には仮想と実装の違いのみが変更されます。そのため、必要な部分のみが更新され、動作が高速になります。

Reactの概念を知っておこう

Reactは純粋なJavaScriptではなく設計されたライブラリであるため、独自の要素が存在します。Reactを学習するためにはReact独自の要素を押さえておく必要があります。

ここからは、Reactでの開発に必要な考え方を3つ紹介します。

コンポーネントについて

サイトを構成する部品のことをコンポーネントといい、ヘッダーやフッターなどの共通部分でコードを再利用できます。
Reactのコンポーネントは以下の2種類です。

クラスコンポーネント
関数コンポーネント

コンポーネントの概念は、基本的なパーツであることです。コンポーネントにはさまざまな値があります。例えば、クラスコンポーネントにはstateやライフサイクルがありますが、関数コンポーネントにはありません。

stateについて

stateはアプリの状態を表すコンポーネントで「サイト上でどのような表示にするか」を設定できます。ユーザーに合わせたサイト表示を可能にするために使用します。

stateで設定できることは、以下の通りです。

要素を何回表示するか
何色の表示にするか

ライフサイクルについて

Reactでは一般的なクラスと同様に、コンポーネントが生成されるとき、初期化するconstructorというメソッドが実行されます。次にgetDerivedStateFromPropsメソッドでstateを計算し、renderメソッドで仮想DOMとDOMの処理を行います。最後にcomponentDidMountメソッドが実行される仕組みです。

上記の処理はコンポーネントの生成時に実行されるものであり、更新時や削除時にはそれぞれ他の処理があります。このように、それぞれの処理に対応した一連の流れをライフサイクルといいます。

初心者にとっては理解の難しいため、全体的な流れをある程度知ってからコードを記述することがおすすめです。

Reactを使うと何ができるのか？

イメージを掴むために、Reactを利用すると具体的にどのような開発案件に携われるのかを紹介します。ReactでWebアプリ開発やモバイルアプリ開発、VR開発など、幅広い処理を実装できるため、それぞれを深掘りします。

Webアプリ開発

フロントエンドJavaScriptフレームワークであるReact.jsを用いてWebアプリを開発できます。Reactが人気になった理由のひとつであるSPA（シングルページアプリケーション）はそれぞれのコンテンツが独立している、という特徴があります。

それぞれのコンテンツが独立していることから、画面を更新する際、本来であればすべてのコンテンツの更新が必要なところを変更されたコンテンツだけを更新するだけでよいため、処理を軽量化でき、複数の機能が実装されているサイトであっても快適なサイト利用が実現できるのです。

複雑で重たい画面処理がある画面構成の場合は、すべての要素を毎回計算していてはページ処理が増えてしまい、画面の表示が遅くなってしまいます。画面の表示に時間がかかることはユーザーにとって大きなストレスとなるため、画面表示を軽量化できるReactが高い人気を得ています。

モバイルアプリ開発

「React Native」というiOS・Androidともに動作可能な開発用のクロスプラットフォームのフレームワークを用いることで、一般的に必要とされるJavaやSwiftを学習せずともアプリを開発することが可能です。

React Nativeを利用した有名なサービスの例は、以下です。

Facebook
UberEats
Progate

ただ本格的で複雑なアプリ開発には向かないため、小規模なアプリを開発したい方は学習することをおすすめします。

React NativeにはReact.jsとコードの共通点があるため、ある程度React.jsの理解が進んでいる場合はReact Nativeも学習することで、アプリの開発が可能です。React.jsと同様にコードの共通化が可能であり、処理を軽量化できます。

VR開発

VRアプリ開発には「React VR」というWebVRを基本としたVRアプリを開発できるライブラリがあります。React Nativeをベースして開発されており、iOS・Androidのどちらでも動作するクロスプラットフォームのVRアプリ開発ができます。

軽量な処理を実現するReactを用いることで、VRに必要とされる重たい処理をスムーズに計算できます。VRで動作が重かったり、画面の表示が遅れたりするとユーザーがストレスを感じやすくなったり、画面酔いを起こしたりするため、処理の軽さは大切な要素です。

一般的にはUnityなどで開発されるVRアプリですが、Reactを学ぶことでVR開発における言語の選択肢を増やすことができます。

Reactの環境構築方法

Reactを使用するためには、まず自分のパソコンにReactの開発環境を構築する必要があります。

導入する際は、以下をインストールする方法が比較的簡単なのでおすすめです。

Node.js
Create React App

具体的な構築方法を解説します。

Node.jsをインストール

Node.jsはJavaScriptをサーバーサイドで使うためのプラットフォームです。

公式サイトからNode.jsをダウンロードし、インストールします。

Node.js

インストール前にはバージョンを確認し、特別な事情がない限り、最新のバージョンを選択します。

Create React Appをインストール

Reactの環境構築は、知識が豊富な経験者でなければ苦労します。そこで今回はCreate React Appという簡単にReactを利用することのできるツールを用いて、設定を行います。

以下のコードを、ターミナル（Windowsの場合はコマンドプロンプト）で実行すると環境構築が完了します。

$ npx create-react-app ex-app（※任意のアプリ名）
$ cd ex-app
$ npm start
※ ex-appは任意のアプリ名です。

実行すると少し時間はかかりますが、フォルダが生成され、Reactのアイコンが回転しているサイトがlocalhostで表示されます。

Node.jsを使わない方法

Node.jsを使わない場合はNode.jsによる画面の高速表示がなくなりますが、複雑な環境構築が必要なく、簡単にReact.jsを利用できます。初心者がReactの勉強を始める時点では、Node.jsを使わない構築方法がおすすめです。

Node.jsを使わない具体的な方法は、CDN（Content Delivery Network）というデータをインターネット上で利用できる仕組みを利用する方法です。具体的には以下のコードをサイトのheadタグ内に記述します。

jQueryも、このような方法で利用できます。

ReactでのJavaScriptの記述方法を身につけよう

ReactでJavaScriptを記述するとき、どのような箇所に違いがあるかを紹介します。
実際にReactのコードを知ることで、より具体的な理解が可能です。

JSXの記述方法を理解する

HTMLのタグは小文字でaやpなどを記述しますが、ReactのコンポーネントではJSXのタグを使うため、最初の文字が大文字になります。そのため、大文字になっているタグ名を見つけた場合は「JSXでの記述である」と判断できます。

classとclassNameの違い

通常、HTML・CSSではclassの設定を次のように行います。

classNameも同様に設定できますが、特有の書き方も可能です。

プログラム上でクラス名を指定することもできます。
このときにクラス名の間に半角スペースを入れ忘れないよう、注意が必要です。

CSSでは動的なクラスという区別がないため、プログラムで実装をする必要があります。

条件によってクラスを与えることも可能です。

isActiveが真（true）のときはex-classを付与し、偽（false）のときは何も与えないという処理になります。

HTMLタグに代入する方法

JSX上でJavaScriptを記述するときは中括弧{ }を用いて以下のように記述します。

const data = <p>{ex_data}</p>

関数を用いた書き方では、以下のようになります。

function Hello(props) {
return <p>Hello {props.name}</p>
}
const e = <Hello name=“太郎” />
ReactDOM.render(e,document.getElementById(“element”))

リストの表示方法

JSXはJavaScriptと共通しているため、通常通り以下のコードでも可能です。

function List() {
const list = [“りんご”, “みかん”, “いちご”]
return (
<ul>
{list.map(item => (
<li key={item}>{item}</li>
))}
</ul>
)
}

Reactにはreact-loopsというライブラリが用意されているため、以下のようなコードになります。

import { For } from “react-loops”
function List() {
const list = [“りんご”, “みかん”, “いちご”]
return (
<ul>
<For of={list}>{item => <li>{item}</li>}</For>
</ul>
)
}

通常の書き方よりも簡単に記述できました。keyを指定する必要もありません。
このようにわかりやすいコードで記述できる点が、Reactのメリットです。