【React環境構築】create-react-appでさくっと環境構築する手順

#概要
今回は、JavaScriptのライブラリであるReactの環境構築を行なったので、メモ程度ですが情報を共有しときます。
環境構築は`create-react-app`コマンドを使います。

#目次
- [開発環境](#開発環境)
- [Reactの環境構築をする手順](#Reactの環境構築をする手順)
    - [1. Homebrewのインストール](#1.-Homebrewのインストール)
    - [2. nodebrewのインストール](#2.-nodebrewのインストール)
    - [3. Node.jsをインストールする](#3.-Node.jsをインストールする)
    - [4. npmをインストールする](#4.-npmをインストールする)
    - [5. create-react-appを実行する](#5.-create-react-appを実行する)
- [エディタで開く](#エディタで開く)
- [ブラウザに表示する](#ブラウザに表示する)
- [まとめ](#まとめ)


#開発環境
開発環境は以下の通りです。

- macOS Catalina
- Homebrew 2.4.0
- nodebrew 1.0.1
- Node.js v14.4.0
- zsh
- VScode




#Reactの環境構築をする手順

今回、`create-react-app`を使って環境構築をしていきます。
`Create React App`はReactの環境構築ツールで、コマンド1つでReactに必要な環境を構築することができます。

`create-react-app`で環境構築するには、「**Node.js**」と「**npm**」が必要です。
また、これらをインストールするには、「**Homebrew**」と「**nodebrew**」が必要なので、順番にインストールしていきます。

手順は以下の通りです。

1. Homebrewをインストールする
2. nodebrewをインストールする
3. Node.jsをインストールする
4. npmをインストールする
5. create-react-appを実行する

1つずつクリアしていきましょう。



##1. Homebrewのインストール

「**Homebrew**」とはmacOSまたはLinux用のパッケージマネージャーです。

Homebrewの公式サイトは[こちら](https://brew.sh/index_ja)です。

Homebrewの公式サイトのホームページにあるコマンドをターミナルに貼り付けて実行します。

![59236a60952021c751c1c00fca393d5d-2048x1475.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/ea9a4c3b-0d2c-772e-2e84-78d7f777fbff.png)

実行するとインストールが始まりますので、しばらく待ちます。

インストールが完了したら、以下のコマンドを実行してHomebrewのバージョンを確認してみましょう。このコマンドは、Homebrewのバージョンを確認するコマンドです。

```
% brew -v
```

![e7bbdc97dd0a936ad62e33a6dcc4889b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/8eea3bfa-b424-2a17-b73d-13e6f581b798.png)

今回は、バージョン2.4.0がインストールされています。
このように、Homebrewのバージョンを確認することができたら、インストールは正常に完了しています。




##2. nodebrewのインストール

「**nodebrew**」とはNode.jsのバージョン管理システムで、Homebrewでインストールすることができます。
nodebrewはnodeをインストールするために使います。

ターミナルで以下のコマンドを実行します。

```
% brew install nodebrew
```

しばらく待ちます。

Homebrewをインストールした際と同様に、nodebrewのバージョンを確認します。
以下のコマンドを実行しましょう。

```
% nodebrew -v
```

![db10c4caef44d3c43402bc5a843d7c29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/06eb98cb-fa21-b7cc-465f-cef84bdadc0d.png)

このようにnodebrewのバージョンが表示されれば、nodebrewのインストールは完了です。




##3. Node.jsをインストールする

「**Node.js**」とは、簡単にいうと**サーバーサイドで動くJavaScriptのこと**です。

Node.jsをインストールしていきます。
まず、インストール可能なNode.jsのバージョンを確認します。以下のコマンドを実行してください。

```
% nodebrew ls-remote
```

コマンドを実行すると、次の画像のようにインストールすることができるNode.jsのバージョンが一覧で表示されます。この中から、好きなバージョンを選んでインストールすることができます。

![399245e4fa2420f82357ab2472acbc17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/c0f42536-afd4-b0b9-fb51-b61d79984ed5.png)

`create-react-app`に必要なNode.jsのバージョンは8.1.0以上なので、インストールするバージョンはこれより新しいバージョンであれば問題ありません。

では、インストールしていきます。
以下のコマンドを実行します。

```
% nodebrew  install stable
```

このコマンドでは、Node.jsの安定バージョンをインストールすることができます。`stable`が、安定バージョンという意味です。

`stable`の部分を`latest`にすると最新バージョンをインストールすることができます。
最新バージョンはバグなどが起きやすいので、基本的には安定バージョンのインストールで大丈夫です。

インストールしたNode.jsを確認します。以下のコマンドを実行しましょう。

```
% nodebrew ls
```

![c435e3d78fdca8249a50d81aa81ce1a7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/f81081a5-869c-128e-5e6c-d9d98de0fea2.png)

コマンドを実行すると。画像のように現在インストール済みのNode.jsのバージョンが表示されます。ぼくがインストールしているバージョンは**v14.4.0**です。
初めて使う方`「current: none`となっているはずです。

以下のコマンドでNode.jsを使えるようにしましょう。バージョンの部分は自分のPCにインストールされているバージョンを入力してください。

```
% nodebrew use v14.4.0
```

コマンド実行後、もう一度`nodebrew ls`のコマンドを実行すると、`current`の部分が変更されているはずです。

次にパスを通します。
以下のコマンドを実行してください。(以下のコマンドはshellがzshの場合ですので、気をつけてください)

```
% echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc
```

```
% source ~/.zshrc
```

ここまでやるとNode.jsが使えるようになっているはずです。
以下のコマンドで確認してみましょう。

```
% node -v
```

![4bf0687101a47200fb682211b660796e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/a39bfb64-4fb2-f0e1-f18b-9d071265524e.png)

先ほどcurrentに設定したバージョンが表示されれば、Node.jsのインストールは完了です。




##4. npmをインストールする

**npm**をインストールしていきます。npmとは、**Node Package Manager**の略で、Node.jsのパッケージを管理するものです。
パッケージとは、Node.jsの便利な機能をまとめたものです。これを簡単に管理できるのがnpmになります。

とは言っても、実はNode.jsをインストールした時点でnpmも一緒にインストールされています。
以下のコマンドで確認してみましょう。

```
% npm -v
```

![afbfc217f33f8e10780d8e083a742bfb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/82165186-f430-4a94-c856-4f11d08d61ce.png)

このように、バージョンが表示されればOKです。

ここまでで、`create-react-app`を使う準備は整いました。
では、`create-react-app`していきましょう！




##5. create-react-appを実行する

まず、`cd`コマンドで自身の開発環境に移動してください。移動したフォルダの直下に開発フォルダが作られます。

移動した先で以下のコマンドを実行します。

```
% npx create-react-app 開発フォルダ名
```

`npx`というコマンドで`create-react-app`を呼び出しています。`npx`を使うことでMacのローカルファイルに`create-react-app`をインストールすることなく使用できます。
`create-react-app`の後に入力したフォルダ名でReactの環境が構築されます。
今回は、フォルダ名を`practice`としました。

コマンドを実行して、しばらく待ちます。

npxというコマンドでcreate-react-appを呼び出しています。npxを使うことでMacのローカルファイルにcreate-react-appをインストールすることなく使用できます。
create-react-appの後に入力したフォルダ名でReactの環境が構築されます。
今回は、フォルダ名を「practice」としました。

コマンドを実行して、しばらく待ちます。

![df4cdfad1c8e7697f479ea7de384941d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/cf286dab-97e8-8238-2746-5c10324ee5f2.png)

処理が完了したら環境構築は終了です！
作成したフォルダ内でReactを使う準備ができています。

この後は、実際にブラウザに表示させるまでをやってみたいと思います。




#エディタで開く

以下のコマンドを実行してエディタで作ったフォルダを開きます。(ぼくはVScodeをエディタとして使っています)

```
% code practice
```

エディタで開くとsrcフォルダやpublicフォルダなど色々なフォルダとファイルが自動的に作成されています。

![50f8fb23414b32ac263bade579da38c1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/162dc5ad-f49f-de65-7862-f09a5ee69091.png)

画像はsrcフォルダ内のApp.jsファイルを開いています。




#ブラウザに表示する

エディタ内でターミナルを起動し、作業を続けます。

以下のコマンドを実行して、buildフォルダを作成します。コマンドを実行する際は、必ず開発フォルダに移動してから実行してください。

```
% npm run build
```

コマンドを実行すると、画像のようにbuildフォルダが作成されます。
このフォルダの中にあるindex.htmlが実際にブラウザに公開するファイルです。

`npm run build`ではsrcフォルダとpublicフォルダの中のファイルを一つにまとめてbuildディレクトリに出力しています。

buildフォルダが作成できたら、以下のコマンドを実行します。

```
% npm start
```

![50ae8c04ea4c92c2ac42c91818a2b625-2048x1475.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748775/d1fccea5-c27f-34e1-112d-a58fd2c38376.png)

このコマンドを実行するとブラウザが立ち上がり、`create-react-app`で作成した初期の画面が表示されます。

`npm start`ではローカルサーバーを起動してReactアプリを確認することができるようになります。

Reactでは、srcフォルダ内のApp.jsファイルを書き換えていくことでアプリケーションの中身が変わっていきます。




#まとめ

今回はcreate-react-appを使ってReactの環境構築をしました。
1コマンドでReact開発環境を超カンタンに構築できたと思います。

Reactの公式ドキュメントによると、

>「Create React AppはReactを学習するのに最適な環境であり、Reactで新しいシングルページアプリケーションを作成するのに最も良い方法です」
引用 : [React公式ドキュメント](https://ja.reactjs.org)

と書かれています。

Reactは、現在人気がある言語なのでぜひ勉強してみてください！

最後まで読んでいただいてありがとうございました。ではまた。