create-react-appで環境構築をしてみよう

# はじめに
JavaScriptのライブラリであるReactでアプリを作成してみたくなったので環境構築までの過程を備忘録としてまとめたいと思います。

**create-react-app**はReactで簡単にアプリを作成するためのツールです。本来なら**babel**や**webpack**などの設定も含めて自分で構築しなければならないのですが1行のコマンドでそれができてしまうのがcreate-react-appです。

## create-react-appに必要なツール

* **node バージョン8.10以上**
* **npm バージョン5.6以上**

また、上記の２つをインストールするために更に`homebrew`と`nodebrew`をインストールしていきます。

### 1. homebrewのインストール
nodebrewを使うために最初にhomebrewをインストールします。
homebrewとはmacOS用のパッケージマネージャーです。様々なファイルの依存関係の問題を解決するためにパッケージとしてまとめて提供してくれています。
[homebrew公式HP](https://brew.sh/index_ja)からインストール用のコマンドをターミナルにコピペします。

```php:ターミナル
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
// インストールに数分かかります

// インストールできたか確認（バージョンが表示されれば成功です）
% brew -v
Homebrew 3.0.10
Homebrew/homebrew-core (git revision 772716397f; last commit 2021-03-30)
```

### 2. nodebrewをインストール
homebrewを使ってのインストールは`brew install パッケージ名`と記述します。

```php:ターミナル
$ brew install nodebrew

// インストールできたか確認（バージョンが表示されれば成功です）
$ nodebrew -v
nodebrew 1.1.0

Usage:
    nodebrew help                         Show this message
    nodebrew install <version>            Download and install <version> (from binary)
    nodebrew compile <version>            Download and install <version> (from source)
    nodebrew install-binary <version>     Alias of `install` (For backward compatibility)
    nodebrew uninstall <version>          Uninstall <version>
    nodebrew use <version>                Use <version>
    nodebrew list                         List installed versions
    nodebrew ls                           Alias for `list`
    nodebrew ls-remote                    List remote versions
    nodebrew ls-all                       List remote and installed versions
    nodebrew alias <key> <value>          Set alias
    nodebrew unalias <key>                Remove alias
    nodebrew clean <version> | all        Remove source file
    nodebrew selfupdate                   Update nodebrew
    nodebrew migrate-package <version>    Install global NPM packages contained in <version> to current version
    nodebrew exec <version> -- <command>  Execute <command> using specified <version>

Example:
    # install
    nodebrew install v8.9.4

    # use a specific version number
    nodebrew use v8.9.4
```
ここまででhomebrewとnodebrewを無事インストールできました。
次にnodeとnpmをインストールしていきます。

### 3. nodeをインストール
`nodebrew ls-remote`でインストールできるnodeのバージョンを確認します。

```php:ターミナル
$ nodebrew ls-remote

// 実行結果
v0.0.1    v0.0.2    v0.0.3    v0.0.4    v0.0.5    v0.0.6

v0.1.0    v0.1.1    v0.1.2    v0.1.3    v0.1.4    v0.1.5    v0.1.6    v0.1.7
v0.1.8    v0.1.9    v0.1.10   v0.1.11   v0.1.12   v0.1.13   v0.1.14   v0.1.15
v0.1.16   v0.1.17   v0.1.18   v0.1.19   v0.1.20   v0.1.21   v0.1.22   v0.1.23
v0.1.24   v0.1.25   v0.1.26   v0.1.27   v0.1.28   v0.1.29   v0.1.30   v0.1.31
v0.1.32   v0.1.33   v0.1.90   v0.1.91   v0.1.92   v0.1.93   v0.1.94   v0.1.95
v0.1.96   v0.1.97   v0.1.98   v0.1.99   v0.1.100  v0.1.101  v0.1.102  v0.1.103
v0.1.104
:
:
:
```
下にいくほど最新のバージョンになります。
要件的には`8.10以上`であれば問題ないですが、`nodebrew install stable`と打てば安定的なバージョンを自動でインストールできます。

しかし、以下のようなエラーが発生することがあります。

```php:ターミナル
% nodebrew install stable
Fetching: https://nodejs.org/dist/v16.0.0/node-v16.0.0-darwin-x64.tar.gz
Warning: Failed to create the file
Warning: /Users/XXXXXX/.nodebrew/src/v16.0.0/node-v16.0.0-darwin-x64.
Warning: tar.gz: No such file or directory
```
これはnodebrewをインストールする用のディレクトリが存在しない場合に起こります。
この場合は以下のコマンドで解決できます。

```php:ターミナル
% nodebrew setup

// 実行結果
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew

========================================
Export a path to nodebrew:

export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================
```
これでnodebrewがインストールできるようになります。

```php:ターミナル
% nodebrew install stable
Fetching: https://nodejs.org/dist/v16.0.0/node-v16.0.0-darwin-x64.tar.gz
##################################################################################################################################################################################################### 100.0%
Installed successfully

// successfullyと表示されたら成功です。

// インストールされているnodeを確認
$ nodebrew ls
v16.0.0

current: none
```
確認してみると`v16.0.0`がインストールされていることがわかります。
現在currentがnoneになっているので、インストールしたバージョンを指定して有効化します。

```php:ターミナル
$ nodebrew use v16.0.0

// もう一度確認
$ nodebrew ls
v16.0.0

current: v16.0.0
```
currentがインストールしたバージョンになっていたら成功です。
次にnodeを使用できるように以下のコマンドを入力します。

```php:ターミナル
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile
```
コマンドを入力したら一旦ターミナルを再起動して結果を反映させます。
ターミナルを開いたらバージョンを確認してみましょう。

```php:ターミナル
$ node -v
v16.0.0
```
インストールしたバージョンになっていたら成功です。

### 4. npmのインストール
次にnpmですが実はnodeをインストールした時点で自動的にインストールされています。
以下のコマンドでバージョンが確認でしてみましょう

```php:ターミナル
% npm -v
7.10.0
```
バージョンは5.6以上でしたら問題ないです。
長かったですが、これでやっと準備が整いました！
それではいよいよcreate-react-appに移ります。

## create-react-app
まず、いつも自分が使っているディレクトリに移動しましょう。
今回はprojectsとします。
移動できたら`npxコマンド`でアプリを作成していきます。


```php:ターミナル
projects $ npx create-react-app 任意のフォルダ名

// 結果
:
:省略
:
Happy hacking!
```
いろいろフォルダやらファイルが生成されますがまずはエディタを開いて中身を確認していきましょう。

## フォルダの中身を確認
エディタを開いたらまずは、ターミナルを立ち上げて以下のコマンドを打ちましょう。

```php:ターミナル
$ npm run build
```
これで本番環境に公開するための`build`というフォルダが作成されます。
ディレクトリ構成は以下のようになっていると思います。

```php:
React(任意のフォルダ名)
|-build
|-node_module
|-public
|-src
|-.gitignore
|-package.json
|-README
|-yarn.lock
```
次はターミナルで以下のコマンドを打ってみましょう。

```php:ターミナル
$ npm start
```
するとサーバーが立ち上がりReactの初期画面が描画されます。
![スクリーンショット 2021-04-25 22.59.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772095/9ab4bf5a-e7e8-8416-4c3c-041674de0558.png)
画面にある通り、`src/App.js`を編集すると編集内容が画面に反映されます。
試しに、App.jsを以下のように編集してみましょう。

```App.js
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React and output // and outputを追記
        </a>
      </header>
    </div>
  );
}

export default App;
```
保存してブラウザを確認すると`Learn React and output`と表示されると思います。

簡単にまとめるとこんな感じです。

* **src: コンポーネントを作るためのjsファイルの集まり**
* **public: htmlファイルやその他の設定ファイル**
* **build: 本番環境用のファイル**

以上で環境構築は終了です。お疲れさまでした。。。

## 参考文献
[MacにNode.jsをインストール](https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09)
[チュートリアル：React の導入](https://ja.reactjs.org/tutorial/tutorial.html)