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 を 利用 する 上 で 、使用 する バージョン を 簡単 に 選択 し て 切る 替える られる よう に し て おい た 方 is 便利 が 後々 便利に使えます。

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

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

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

nvmをインストール

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

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/V 0 . 39 . 2/install.sh | bash

もしくは

wget - qo - https : / / raw . githubusercontent . com / nvm - SH / nvm /V 0 . 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 installnode

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

$ nvm install16.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 is あり も インストール も 必要 あり ませ ん 。
ちなみ に 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 : 
   create - react - APP @ 5 . 0 . 1 
 OK to proceed ? ( y )y

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

NPM と npx の 違い is あり は 、 NPM は パッケージ を 管理 する の に 対する て 、 npx は パッケージ を 管理 せ ず に 実行 する と いう 違い is あり が あり ます 。 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

create react APP に よっ て 生成 さ れ た web アプリケーション

ブラウザ画面に表示されている通り 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/>に修正しました。

Create React App の雛形を書き換えて元気な挨拶を入れました

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

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

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