新・日本一わかりやすいReact入門【基礎編】をまとめてみる#03

# はじめに
この記事ではYoutubeチャンネル[【とらゼミ】トラハックのエンジニア学習講座](https://www.youtube.com/user/1492tiger)にて投稿されている[「新・日本一わかりやすいReact入門【基礎編】」](https://www.youtube.com/watch?v=XKSYF2aZnkQ&list=PLX8Rsrpnn3IWPoM7-1YPDksRRkamRY25k)をまとめることで自分のReactへの理解を復習し、より理解を深めていきたいと思う。

前回の内容: [JSXの記法](https://qiita.com/sinnlosses/items/921d4915ff505f752e58)

今回はReactとその周辺ライブラリのインストールを実施していく。

# create-react-appとは
- 最も簡単にReactの開発環境を構築できるツールチェイン
    - ツールチェイン: [IT用語辞典より引用](https://e-words.jp/w/%E3%83%84%E3%83%BC%E3%83%AB%E3%83%81%E3%82%A7%E3%83%BC%E3%83%B3.html#:~:text=%E3%83%84%E3%83%BC%E3%83%AB%E3%83%81%E3%82%A7%E3%83%BC%E3%83%B3%E3%81%A8%E3%81%AF%E3%80%81%E3%81%82%E3%82%8B,%E3%82%92%E6%8C%87%E3%81%99%E3%81%93%E3%81%A8%E3%81%8C%E5%A4%9A%E3%81%84%E3%80%82)
      > ある目的を達成するために組み合わせて使用する一連のツール
        
- Reactの環境構築に必要なBabelとWebpackの設定を自動で実施してくれる
    - Babel(バベル): https://babeljs.io/
      →トランスパイラ。新しいJavascriptのコードを古いJavascriptのコードに変換する。
       これによりブラウザが次世代のJavascriptの標準機能をサポートするまで待つ必要がなくなる。
        ![スクリーンショット 2022-09-23 18.04.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501516/07c8072f-e2f9-b957-99ca-6796b2dd1747.png)

    - Webpack: https://webpack.js.org/
      →モジュールバンドラー。Webサイトを構成するあらゆるファイルを1つにまとめる。
       これにより開発時は複数人で作業分担して作成されたファイル群を本番時には1つにできてリクエスト回数を減らせる。
    ![スクリーンショット 2022-09-23 18.06.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501516/22b00f88-dac5-8d3d-88c4-d5f770d69505.png)

- その他設定不要で実施してくれる項目
    - 大量のファイルとコンポーネントでスケールする
    - npm を通してサードパーティライブラリを利用する
    - よくある間違いを早期に発見する
    - 開発環境で CSS と JS をライブ編集する
    - 本番用の出力を最適化する

# create-react-appに必要なもの
- Node.js: 10.16以上
- npm: 5.6以上

動画内ではHomebrewとnodebrewを使用してインストールと管理をしているが、
ここに関しては上記を使うなりdockerを使うなり好きにすればいいと思う。

### dockerで実際にインストールしてみる
自分はdockerの勉強も兼ねて行おうと思う。

手順
1. 任意の場所にプロジェクトフォルダとdockerでの開発に必要なファイルを用意する
    - 今回は以下のようなフォルダ構成とした
        ```
            react-sample/                   ... プロジェクトルート
              |__workspace/                 ... 作業フォルダ
              |    |__.devcontainer.json    ... vscode remotecontainerの設定
              |    |__Dockerfile            ... コンテナ設計書
              |
              |__ docker-compose.yml        ... コンテナ設計書
        ```
    - 各ファイルの中身
      ```json:.devcontainer.json
        {
        	"name": "react-sample",
        	// Dockerfileでイメージ・コンテナを作成
        	"dockerComposeFile": "../docker-compose.yml",
        	// VS Codeのワークスペースフォルダ
        	"workspaceFolder": "/workspace",
        	// 使用するサービス
        	"service": "react-sample",
        	// リモート先のVS Codeにインストールする拡張機能
        	"extensions": [
        		"dsznajder.es7-react-js-snippets"
        	],
        	"shutdownAction": "stopCompose"
        }
      ```

      ```java:Dockerfile
        FROM node:18.9.0
        RUN mkdir workspace/
        WORKDIR /workspace
        RUN npm install -g npm@latest
      ```

      ```yml:docker-compose.yml
        version: '3'
        
        services:
          react-sample:
            container_name: react-sample
            build:
              context: workspace
            tty: true
            volumes:
              - ./workspace:/workspace
            ports:
              - 3000:3000
      ```
1. docker-composeコマンドでコンテナイメージを作成する
    ```sh
    $ docker-compose build
    ```

1. vscode-remote-containerを使用してコンテナに入る
    ![スクリーンショット 2022-09-23 19.20.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501516/b4dee8f0-3a2b-ce9d-eb07-bc566a4dd9c1.png)

    ![スクリーンショット 2022-09-23 19.21.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501516/2cde5816-2f3b-a6dd-9af3-5be693f94d43.png)

1. Reactアプリ作成コマンドを叩く
    ```sh
    $ npx create-react-app react-basic
    ```

1. ホスト側のフォルダとコンテナのフォルダともにreact-basicフォルダが見えることを確認する
    ![スクリーンショット 2022-09-23 19.31.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501516/ec6d4ba5-d69b-11f1-edf7-8e13c35794f6.png)
    ![スクリーンショット 2022-09-23 19.32.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501516/5793ffca-eb2c-1277-fa03-caa1a0b5d5e6.png)

1. サーバーを立ち上げ、React Appページが表示されることを確認する
    ```
    $ cd react-basic
    $ npm start
    ```

    localhost:3000にアクセスしてReact Appが表示されればOK
    ![スクリーンショット 2022-09-23 19.36.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501516/b982559b-78f2-dbb5-b77b-70cc0983fa7c.png)

# 環境の説明
作成したReactプロジェクトの各フォルダの説明がされる。

```
react-basic/
|__build/              ... 本番用ファイル(Reactプロジェクト作成時にはまだない)
|__node_module/        ... package.jsonを元にしてインストールされる各種パッケージ格納先
|__public/             ... 静的ファイル(html、画像など)
|__src/                ... 開発用ファイル(JSXなど)
|__package-lock.json   ... インストールしたパッケージ情報を記録したファイル
|__package.json        ... プロジェクトを管理するファイル(アプリが依存するパッケージに関する情報など)
```

# スクリプトの説明
npmコマンドで主なものが説明される。

```sh
$ npm start      ... ローカルサーバーの起動コマンド(ホットリロードも対応)
                     ホットリロード = ファイルの更新をウォッチして反映してくれる
$ npm run build  ... 本番用ファイルを生成してbuild/に出力
                     src/とpublic/の内容を元にバンドルされて出力される
$ npm run eject  ... BabelやWebpackの設定を変えたいときに使う
                     余計な不具合になりかねないため基本は使わないほうがよい
```

有効なコマンドはpackage.json内に確認できる。
```json
...(略)...

  "scripts": {
    "start": "react-scripts start",   ... npm startで実行されるコマンド
    "build": "react-scripts build",   ... npm run buildで実行されるコマンド
    "test": "react-scripts test",     ... npm testで実行されるコマンド
    "eject": "react-scripts eject"    ... npm run ejectで実行されるコマンド
  },

...(略)...
```

### npm XXXとnpm run XXXの違い

[npm run startとnpm startの違い](https://yanor.net/wiki/?Node.js/npm/npm+run+start%E3%81%A8npm+start%E3%81%AE%E9%81%95%E3%81%84)で説明されていたため引用。
> npm test npm start npm restart npm stopはエイリアスになっており、npm run xxxと同等
> それ以外のscriptsに定義されたコマンドはnpm run xxxの書式で実行する必要がある