WindowsでReactの環境構築をしてみる

# はじめに
今回は、自分のWindowsの環境でReactの環境構築をしたときの備忘録になります。

お付き合い頂ければ幸いです。

#Reactの環境構築に必要なもの
今回は、Facebookが開発している`create-react-app`というコマンドを使って、サクッとReactの環境構築をしていきたいと思います。

まず最初に、`Node.js`を、管理するための`nodist`をインストールしてみましょう。また、その後にNode.jsのパッケージを管理するnpmを使用して同じくNode.jsのパッケージを管理するyarnをインストールしましょう。

## 紹介
2024 年に、Udemy で以下の二つの React 講座を作成しました。

少しでも興味があれば、ご覧ください！

https://www.udemy.com/course/react-chart-app/?referralCode=8815A2736BE6DC976CA6

https://www.udemy.com/course/react-hook-form-beginner/?referralCode=CF758365CC20AAFEA8A0

## nodistとは
nodistとはWindowsOSにおけるNode.jsのバージョン管理ツールです。

Node.jsをアンインストールする必要なく、複数のNode.jsのバージョンを切り替えることができます。

以下のリンクからNodistSetup-vx.x.x.exeをダウンロードして実行すればインストールできます。

[Nodist - Github](https://github.com/nullivex/nodist/releases)

## Node.jsとは
Javascriptはクライアントサイドで動作します。しかし、実はpythonやPHPのようにサーバーサイドでも動作するのです。

このようにサーバーサイドで使われるJavaScriptをサーバーサイドJavaScriptと呼び、Node.jsはサーバーサイドJavaScriptの内のひとつです。

もっと言えば、Node.jsはサーバーサイドでJavaScriptを動かすための実行環境だと考えておきましょう。

## npmとは
npmはNode Package Managerの略称で、簡単に書くとNode.jsのパッケージを管理するツールといえます。

npmの代表的なパッケージとしてExpressやpromise、asyncやSocket.ioなどがあります。

## yarnとは
yarnの役割はnpmとほぼ同じですが、最近はnpmよりもyarnの方がよく使われているようです。

yarnは平たく言えば、Facebookが開発したnpmの進化系です。

npmよりも高速でインストールができができ、コマンドが簡潔で使いやすいようです。

# 各々をインストール
それでは各々のツールをインストールしてみましょう。

## nodist npm
最初にnode.jsを管理するツールであるnodistをインストールしましょう。

[こちら](https://github.com/nullivex/nodist/releases)からNodistSetup-vx.x.x.exeをインストールして実行すれば、nodistをインストールすることができます。

また、同時にNode.jsのパッケージを管理するnpmもインストールされます。

# yarnのインストール
以下のコードでyarnをインストールできます。

グローバル環境にインストールしましょう。以下のコードです。

```
npm install -g yarn
```

これでグローバル環境にyarnをインストールすることができました。

## ファイルの場所の確認
ここで、ファイルの場所の確認をしてみましょう。nodistをダウンロードすると`C:\Program Files (x86)\Nodist`の部分にファイルがインストールされます。中身は次のようになっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/0a8f0056-7270-34c8-156f-c734ecd7a2db.png)


ちなみに、先程使用したnpmはこの中の`bin`に格納されます。中身を見てみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/ec2247ec-c3ae-d17f-30de-66ef3fefc898.png)

先程インストールした`yarn`もこの中に入っていることが分かりますね。このbinの中の`node_modules`も覗いてみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/f0411da1-fc4b-4811-c096-b9f779fd959a.png)

この中にもyarnが格納されていますね。

## yarnを使ってパッケージをインストール
以下のコードでパッケージをインストールできます。グローバルにインストールしてみましょう。

```
yarn global add http-server
```

globalにインストールしたモジュールは以下のコードで確認できます。

```
yarn global list
```

>yarn global v1.22.4
info "create-react-app@3.4.1" has binaries:
   - create-react-app
info "http-server@0.12.3" has binaries:
   - http-server
   - hs


ファイルの場所を確認してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/0162d81c-a115-576c-b38e-9426e672b2e7.png)

このように、`Program Files (x86)\Nodist\bin\bin`に格納されています。

ちなみに、yarnを使ってグローバルにインストールするときには`yarn global add <packagenname>`としましょう。

間違えて`yarn add global <package name>`とすると、グローバルとローカルの両方にパッケージがインストールされてしまいます。

それでは、次にこのグローバルにインストールしたパッケージを消去してみましょう。

```
yarn global remove http-server
```

次に、実際に消去されているかどうか確認してみましょう。

```
yarn global list
```

>yarn global v1.22.4
info "create-react-app@3.4.1" has binaries:
   - create-react-app
Done in 0.24s.

きちんと消去されていますね。

ファイルは以下のように変化しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/6917c599-b9e2-1555-642f-17060887fd90.png)

## npmを使ってパッケージのインストール
今度はnpmを使って、グローバルにファイルをインストールしてみましょう。

以下のコードです。

```
npm install -g http-server
```

これでグローバルにインストールすることができました。

次のコードで確認できます。

```
npm list -g
```

>C:\Program Files (x86)\Nodist\bin
+-- http-server@0.12.3
| +-- basic-auth@1.1.0
| +-- colors@1.4.0
| +-- corser@2.0.1
| +-- ecstatic@3.3.2
| | +-- he@1.2.0
| | +-- mime@1.6.0
| | +-- minimist@1.2.5 deduped
| | `-- url-join@2.0.5
| +-- http-proxy@1.18.1
| | +-- eventemitter3@4.0.4
| | +-- follow-redirects@1.11.0
| | | `-- debug@3.2.6 deduped
| | `-- requires-port@1.0.0
| +-- minimist@1.2.5
| +-- opener@1.5.1
| +-- portfinder@1.0.26
| | +-- async@2.6.3
| | | `-- lodash@4.17.15
| | +-- debug@3.2.6
| | | `-- ms@2.1.2
| | `-- mkdirp@0.5.5
| |   `-- minimist@1.2.5 deduped
| +-- secure-compare@3.0.1
| `-- union@0.5.0
|   `-- qs@6.9.4
`-- yarn@1.22.4

この場合、ダウンロードした`http-server`は`Program Files (x86)\Nodist\bin`と`Program Files (x86)\Nodist\bin\node_modules`の両方に格納されています。

実際に確認してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/18fa74d6-093b-28d5-b45a-38c516b45d5f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/9e92d9eb-a689-f28d-47c6-593b32e4050e.png)

それでは、次のコマンドでグローバルにインストールしたパッケージを削除してみましょう。

```
npm uninstall -g http-serve
```

以下のようにファイルが変化します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/a2743b54-0c8f-d0af-0c85-f013867ffeab.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/b5005d10-14e4-6208-30ff-dcc64af8bd86.png)

# create-react-appでReactの環境構築
Reactの環境構築をする際によく用いられる`create-react-app`ですが、三種類の実行方法があります。

以下の三つです。

+ yarnを使ってcreate-react-appを行う
+ npmを使ってcreate-react-appを行う
+ npxを使ってcreate-react-appを行う


どの方法を使っても環境構築ができます。

ちなみに、公式的にはnpxを使ってcreate-react-appするのが望ましいと書かれていた気がします。

実際、npxを使って環境構築するのが最も簡単です。

今回は折角なので、全部の方法で試してみましょう。

## yarnでcreate-react-app
yarnを使ってcreate-react-appを使ってみましょう。

自分の環境を確認してみると、何故か既にcreate-react-appがインストールされていました。

```
yarn global list
```

>yarn global v1.22.4
info "create-react-app@3.4.1" has binaries:
   - create-react-app


今回は勉強のため、一度アンインストールしてからもう一度インストールしてみましょう。

以下のコマンドで消しました。

```
yarn global remove create-react-app
```

>yarn global v1.22.4
[1/2] Removing module create-react-app...
[2/2] Regenerating lockfile and installing missing dependencies...
success Uninstalled packages.

次のコマンドでインストールしましょう。


```
yarn global add create-react-app
```

>yarn global v1.22.4
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-react-app@3.4.1" with binaries:
      - create-react-app

これで`create-react-app`をインストールすることができました。以下のファイルパスに格納されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/a94fae84-59ba-4db8-4780-f1f979856907.png)

`create-react-app アプリ名`でreactアプリを作成することができます。しかし、パスが通っていないと使えないので、環境変数に`C:\Program Files (x86)\Nodist\bin\bin`を追加しましょう。

パスを追加し終わったら、次のコードでreactアプリを作成します。


```
create-react-app qiita_1
```

このコードを実行すると、qiita_1という名前でアプリを作成することができました。

以下のコードで、このreactアプリを起動してみましょう。

```
cd .\qiita_1\
yarn start
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/0f6dd04d-4aff-48cc-25a2-a157031bbc3b.png)

Reactを起動することができました。嬉しいですね。

最後に、以下のコードでyarnのグローバルな`create-react-app`を削除しておきましょう。

```
 yarn global remove create-react-app
```

## npmでcreate-react-app
次は、npmで`create-react-app`をしてみましょう。

npmの`create-react-app`を以下のコードでインストールします。

```
npm install -g create-react-app
```

以下のファイルが作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/11f7b22e-a762-a5b7-a508-b0bfa1b1f1cb.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/de7fa1a2-c02a-85a2-c85a-3ec49e01cd0f.png)


自動的にパスも通るので、そのまま`create-react-app`を使うことができます。

```
create-react-app qiita_2
```

これでReactアプリを作成することができました。

次のコマンドで実行できます。

```
cd .\qiita_2\
npm start
```

次のようにReactのアプリを作成することができました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/23bb9341-057b-3774-1f32-0f2cc307e73c.png)


最後に以下のコマンドでcreate-react-appを削除しておきましょう。

```
npm uninstall -g create-react-app
```

### npmからローカルのcreate-react-appを使う
以下のコマンドで、ローカルに`create-react-app`コマンドをダウンロードすることができます。

```
npm install create-react-app
```

このコマンドを実行すると、プロジェクトファイル内に`node_module`ファイルと`package-lock.json`ファイルが作成されます。

このnode_moduleファイル中の.binファイルの中に、create-react-appコマンドが格納されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/a4972a30-acd4-baa6-2fcb-a1e3b1d29909.png)


このローカルのcreate-react-appコマンドを使って、Reactアプリを作成してみましょう。

以下のコマンドです。

```
.\node_modules\.bin\create-react-app qiita_3
```

これで、Reactアプリを作成することができました。


## npxを使ってcreate-react-app
次はnpxを使ってcreate-react-appをしてみましょう。

何を隠そうこのnpxというコマンド、なかなかの優れものです。

[こちら](https://dev.classmethod.jp/articles/node-npm-npx-getting-started/)の記事にわかりやすく説明されていたので、参考にしてください。

npxには以下の三つの利点があります。


+ `run-script`を使用せずにローカルインストールしたコマンドを実行する
+ グローバルインストールせずに一度だけコマンドを実行する
+ GitHubやGistで公開されているスクリプトを実行する

それぞれの利点について見ていきましょう。本記事では上の２つについて解説します。

### run-scriptを使用せずにローカルインストールしたコマンドを実行する
先程、npmを用いてローカルにインストールした`create-react-app`を実行しました。

そのときに、`.\node_modules\.bin\create-react-app`のように、直接ローカルにダウンロードしたパッケージを指定して、実行しました。

このようにいちいちパスを指定して実行するのは面倒ですよね。

この問題を解決していたのが`run script`です。

run scriptとは、簡単に書くと`package.json`のscriptに、コマンドに対するエイリアス(別名)を付与するやり方です。

`npm start`などはその代表例で、以下のようにpackage.jsonにエイリアスが記されています。

```.json
{
  "scripts": {
    "start":      "node app.js",
  }
}
```

このようにエイリアスを指定することで、`start`というコマンドで`node app.js`を実行することができます。

しかし、優秀なnpxはこの作業をさらに簡単にしてしまいました。

npxを利用すると、設定無しで次のように実行できます。

```
npm install create-react-app
npx create-react-app qiita_4
```

このようにすると、エイリアスを付与したり直接パスを指定することなく、ローカルの`create-react-app`を実行することができます。

### グローバルインストールせずに一度だけコマンドを実行する
実は、npxコマンドを実行すると次の順番でコマンドを探します。

1. ローカルパッケージ(node_modules/.bin)
2. 環境変数PATH
3. NPMレジストリ

NPMレジストリとは、ネットワーク上にある、公開されたパッケージに関する膨大な情報をもったデータベースのことです。

つまり、npxコマンドを実行すると、自分のパソコン上にそのコマンドがインストールされていなくても、ネットワーク上からコマンドを探し出してきてくれます。

つまり、ローカルにコマンドをインストールしていなくても、コマンドを実行することができます。

ローカルになにもインストールしていない状態で、以下のコードを実行してください。Reactアプリを作成することができます。また、npxがインストールされていなかったときのために、npmでnpxをグローバルにインストールしておきましょう。

```
npm install npx -g
npx create-react-app qiita_5
```

これで、Reactアプリを作成することができました。

このコマンドを用いると、yarnやnpmのグローバル環境に`create-react-app`をインストールすることなく`create-react-app`を実行することができるので、環境を汚染する心配が少なくて良いですね。


#補足 nodistでnode.jsのバージョンを切り替える
最後に、nodistのコマンドの使い方について解説します。

### Node.jsのバージョン一覧を表示
次のコマンドでnodistのバージョン一覧を表示することができます。

```
nodist dist
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/6de1c9cb-55e8-7737-676c-554883d09a82.png)

### 現在インストールされているNode.jsのバージョンを確認
以下のコマンドで現在インストールされているNode.jsのバージョンを確認することができます。

```
nodist ls
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/b4d75cf6-221b-4c39-4a73-490c5ffe38dc.png)

自分の環境では、Node.jsの11.13.0のバージョンのみがインストールされており、使用されています。

現在使用しているNode.jsの横に(global: vxx.xx.x)が表示されます。

### Node.jsをバージョンを指定してインストール
次のコマンドで、最新の14.4.0のNode.jsをインストールできます。

```
nodist + v14.4.0
```


### Node.jsのバージョンの切り替え
以下のコマンドでダウンロードしているNode.jsの一覧を確認してみましょう。

```
nodist ls
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/ca2a7852-e55f-6e32-678f-b902d4e7b659.png)

次のコマンドで現在使用しているNode.jsのバージョンを14.4.0に切り替えてみましょう。


```
 nodist v14.4.0
```

もう一度一覧を確認してみましょう。


```
nodist ls
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/7f90af77-754d-dd61-252e-7ea4cb662df1.png)

ちなみに、インストールしたNode.jsのファイルは、次のパスに格納されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/95ce2cd6-8051-32a3-a8f3-2d4a7888d352.png)


# 終わりに
今回の記事はここまでになります。

お付き合い頂きありがとうございました。