Reactをセットアップ(環境構築)する

Reactをセットアップする手順

この記事ではReactの簡単な始め方について、セットアップ、環境構築の方法を解説します。
Reactの開発環境はMacやLinuxはもちろん、Windowsでもセットアップできます。
手順は大まかには下記の3点です。

1. nvmのインストール ※Node.jsのバージョンを管理するツール
2. Node.jsのインストール ※サーバサイドJavaScript環境
3. Create React Appの実行 ※Reactアプリの雛形を生成するツール

nvmのインストール

nvmとは？

nvm（Node Version Manager）とは、Node.jsのバージョンを管理するツールです。

Node.jsは頻繁にバージョンアップが行われており、バージョンが進むにつれて新しい機能が追加されたり、既存の機能が削除されたりします。そのため、Node.jsを利用する上で、使用するバージョンを簡単に選択して切り替えられるようにしておいた方が後々便利に使えます。

nvmを使うことで、複数のNode.jsのバージョンをインストールし、それらのバージョンを切り替えることができます。これにより、Node.jsを使用する上でのバージョン管理を容易にすることができます。

また、nvmを使うことで、Node.jsのインストールやアンインストールが容易になります。nvmを使わずにNode.jsをインストールする場合、Node.jsをアンインストールするには、手動でファイルを削除する必要がありますが、nvmを使う場合は、そのような作業が不要になります。

nvmを使うことで、Node.jsを簡単かつ効率的に管理することができます。

nvmをインストール

nvmをインストールするには、インストール スクリプトを実行する必要があります。これを行うには、次の cURL または Wget コマンドを使用します。

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

もしくは

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash

上記のコマンドのいずれかを実行すると、スクリプトがダウンロードされて実行されます。
バージョン番号の部分が変わるかもしれませんので、公式のgithub https://github.com/nvm-sh/nvm#install–update-script を確認するようにしてください。

nvmが正常にインストールされたか確認する

$ command -v nvm
nvm

nvmと表示されたら成功です。もしくは

$ nvm v
1.1.8

このようにnvmのバージョン番号を表示して確認できます。
もし上記がうまく動かない場合は、一旦コンソール画面を閉じて、新しくコンソールを開き直すことを試すとうまくいくかもしれません。

Windowsにnvmをインストールするには？

Windows用のnvm がインストーラー付きで提供されていますので、ダウンロードページから最新バージョンを確認してダウンロード・インストールしてください。

Node.jsのインストール

Node.jsとは？

Node.jsとは、JavaScriptをサーバーサイドで実行するためのプラットフォームです。Node.jsでは、JavaScriptを用いてサーバーサイドのアプリケーションを構築することができます。Node.jsには、非同期 I/O（入出力）やイベント駆動、単一スレッドでの並行処理などの機能が提供されており、これらの機能を用いることで、高速かつスケーラブルなサーバーサイドアプリケーションを構築することができます。

また、Node.jsでは、様々なモジュールが用意されており、それらのモジュールを用いることで、サーバーサイドアプリケーションの構築を容易にします。これらのモジュールは、Node.jsのパッケージ管理システムであるnpm（Node Package Manager）を使って管理されます。

Node.jsは、JavaScriptを用いてサーバーサイドアプリケーションを構築するためのプラットフォームであり、Webフロントエンド開発者にとっても重要な存在です。

nvmでNode.jsをインストール

Node.jsは普通にインストールすることもできますが、nvmのようなバージョン管理ツールを使うことでNode.js自体のバージョンを簡単に切り替えることができるようになります。

プログラミング言語の実行環境は「バージョンを上げたら今までのアプリが動かなくなった」といったことがしばしば起こるので、最初にnvmのような管理ツールを入れておくと安心です。

nvmでNode.jsの最新バージョンをインストールするには以下のコマンドを使います。

$ nvm install node

特定のバージョンのNode.jsをインストールするには以下のコマンドを使います。

$ nvm install 16.13.1

nvmでインストールしたNode.jsの一覧を見るには以下のコマンドを使います。

$ nvm list
16.13.1

使用するNode.jsを選ぶには以下のコマンドを使います。

$ nvm use 16.13.1

(注意) Windows版のnvmを使っている場合はコマンドプロンプト（またはPowerShell）を管理者モードで起動する必要があります。Windowsメニューから「管理者として実行」を選ぶと管理者権限で実行できます。

nvmを使ってNode.jsをインストールすると、パッケージ管理ツールであるnpmもインストールされています。以下のコマンドでnodeとnpmのバージョンを確認することができます。

$ node -v
v16.13.1
$ npm -v
8.1.2

Create React Appについて

Create React Appとは？

Create React Appとは、Reactの開発環境を構築するためのツールです。Create React Appを使うことで、Reactの開発環境を簡単かつ迅速に構築することができます。

Create React Appを使うと、以下のようなことができます。

• Reactのプロジェクトを作成する
• プロジェクトに必要な依存モジュールをインストールする
• WebpackやBabelなどのビルドツールを用いて、開発したコードをトランスパイルし、実行可能なJavaScriptに変換する
• 開発サーバーを起動し、ブラウザ上で実行結果を確認する

また、Create React Appを使うと、Reactプロジェクトの設定ファイルを手動で作成する必要がなくなります。Create React Appは、プロジェクトの設定を自動的に行います。これにより、Reactの開発環境を構築する際の設定手順が減少し、開発を迅速に進めることができます。

Reactを使ってWebアプリケーションを開発する際には、WebpackやBabelなどのビルドツールを用いることが必要です。また、WebpackやBabelを用いる際には、設定ファイルを用意する必要があります。

これらの作業は、Reactを使い始める開発者にとっては煩雑であり、時間を要するものです。Create React Appは、これらの作業を簡略化するためのフレームワークです。Create React Appを用いることで、煩雑な設定作業を省略し、Reactの開発環境を簡単かつ迅速に構築することができます。

Create React Appのインストール方法は？

Create React Appは後述するnpxというツールを使って実行できるので、インストールの必要はありません。
時々、Reactの開発環境構築について書かれた記事に「Yarnを使ってインストールしましょう」といった情報がありますが、Yarnもインストールも必要ありません。
ちなみにYarnとは、さきほどNode.jsとともにインストールされたnpmの互換ツールです。特に必要なければnpmのままで大丈夫です。

インストールするツール類が増えると複雑になります。わからないことが起こった時に調べることが増えます。
最初のうちはできるだけシンプルな環境で進めることを心がけましょう。

Create React Appでサンプルアプリ(Hello, world)を作る

Create React Appを使うと簡単にアプリの雛形を生成することができます。
さっそく最初のアプリを作ってみましょう。

$ npx create-react-app react-test
Need to install the following packages:
  [email protected]
Ok to proceed? (y) y

最初の「npx」というのは打ち間違いではありません。npm 5.2から利用できるパッケージランナーというものでnpmと同時にインストールされています。

npmとnpxの違いは、npmはパッケージを管理するのに対して、npxはパッケージを管理せずに実行するという違いがあります。xがexecuteという訳ですね。

ですのでパッケージをインストールせずに1回だけ使いたい場合や、たまにだけ使いたい場合にnpxの使用が向いていると思います。

上のコマンドを実行後、react-testというディレクトリが作られてReactの環境が生成されるので数分間ほど時間がかかります。
成功すると下記のメッセージが表示されます。

Success! Created react-test1 at react-test
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react-test
  npm start

Happy hacking!

ReactによるWebアプリの雛形が生成されました。表示された通りに実行してみます。

$ cd react-test
$ npm start

Reactアプリがコンパイルされるため、数分間ほど待たされますが、成功すると下記のメッセージとともにブラウザが起動し、http://localhost:3000 を開いて Reactのロゴが回転するページが表示されます。

Compiled successfully!

You can now view react-test1 in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.2:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

ブラウザ画面に表示されている通り react-test/src/App.js をエディタで開いて、試しに文字を追加してみます。

<p>
  Edit <code>src/App.js</code> and save to reload.
  <br>こんにちは？
 </p>

ファイルを保存すると即座にコンパイルされて自動的にブラウザがリロードされて画面に反映されます。
しかしエラーが発生しました。

ERROR in [eslint]
src\App.js
  Line 12:8:  Parsing error: Expected corresponding JSX closing tag for <br>. (12:8)

文法チェックツールである eslint がエラーだと言っているようです。
エラー内容を読むと <br>タグは閉じる必要があるようですので、コードを以下のように修正します。

<p>
  Edit <code>src/App.js</code> and save to reload.
  <br/>こんにちはこんにちはこんにちは！！
</p>

<br>を<br/>に修正しました。

無事に元気な挨拶を入れることができました。
停止するにはコンソール画面で Ctrl+c で止めることができます。

あとはこのApp.jsを書き換えながら進めていくのがReactでの開発のスタートになります。

Reactの開発環境構築はこれにて完了です。意外と簡単だったのではないでしょうか。
どんなプログラミング言語やフレームワークも、まずは実際に触ってみることが大事だと思います。
ここから一緒にReactを学んでいきましょう。