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

はじめに

この記事ではYoutubeチャンネル【とらゼミ】トラハックのエンジニア学習講座にて投稿されている「新・日本一わかりやすいReact入門【基礎編】」をまとめることで自分のReactへの理解を復習し、より理解を深めていきたいと思う。

前回の内容: JSXの記法

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

create-react-appとは

• 最も簡単にReactの開発環境を構築できるツールチェイン

  • ツールチェイン: IT用語辞典より引用

    ある目的を達成するために組み合わせて使用する一連のツール

• Reactの環境構築に必要なBabelとWebpackの設定を自動で実施してくれる

  • Babel(バベル): https://babeljs.io/
    →トランスパイラ。新しいJavascriptのコードを古いJavascriptのコードに変換する。
    これによりブラウザが次世代のJavascriptの標準機能をサポートするまで待つ必要がなくなる。
    

  • Webpack: https://webpack.js.org/
    →モジュールバンドラー。Webサイトを構成するあらゆるファイルを1つにまとめる。
    これにより開発時は複数人で作業分担して作成されたファイル群を本番時には1つにできてリクエスト回数を減らせる。
    

• その他設定不要で実施してくれる項目

  • 大量のファイルとコンポーネントでスケールする
  • 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        ... コンテナ設計書
     

   • 各ファイルの中身

     .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"
       }
     

     Dockerfile

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

     docker-compose.yml

       version: '3'
       
       services:
         react-sample:
           container_name: react-sample
           build:
             context: workspace
           tty: true
           volumes:
             - ./workspace:/workspace
           ports:
             - 3000:3000
     

2. docker-composeコマンドでコンテナイメージを作成する

   $ docker-compose build
   

3. vscode-remote-containerを使用してコンテナに入る
   

   

4. Reactアプリ作成コマンドを叩く

   $ npx create-react-app react-basic
   

5. ホスト側のフォルダとコンテナのフォルダともにreact-basicフォルダが見えることを確認する
   
   

6. サーバーを立ち上げ、React Appページが表示されることを確認する

   $ cd react-basic
   $ npm start
   

   localhost:3000にアクセスしてReact Appが表示されればOK
   

環境の説明

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

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

スクリプトの説明

npmコマンドで主なものが説明される。

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

有効なコマンドはpackage.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の違いで説明されていたため引用。

npm test npm start npm restart npm stopはエイリアスになっており、npm run xxxと同等
それ以外のscriptsに定義されたコマンドはnpm run xxxの書式で実行する必要がある