React のプロジェクトを作成する時に使う Create React App についてまとめました。
この記事は以下の構成になっています。
- Create React App とは
- Create React App が行うこと
- Create React App でプロジェクトを作成する
- 開発環境
- 本番環境
- テスト
Create React App とは
Create React App は React アプリの初期設定を自動化して作成するツール。
Create React App が行うこと
Create React App は React アプリの初期設定以外にも、主に以下のことを行う。
- 開発サーバーの起動とホットリローディング
- 自動的なビルドとバンドル
- ES6 のサポート
- 本番用のビルド
開発サーバーの起動とホットリローディング
npm startコマンドで開発サーバーを起動できる。
また、開発サーバーがホットリローディングをサポートしているため、コードの変更がリアルタイムでブラウザに反映される。
これにより、アプリをリアルタイムにプレビューしながら開発することができる。
自動的なビルドとバンドル
Create React App は内部的には Babel と Webpack を使ってアプリの設定を行なっている。
Babel は、JavaScript の新しい記法を古いブラウザでも動作させるようにするために、古い記法に変換（トランスパイル）するツール。
Webpack は、複数の JavaScript のファイルを 1 つにまとめる（バンドル）ツール。
Create React App を使うことで、Babel や Webpack の設定を自分で行わずにすぐに React のプロジェクトを始めることができる。
また、ソースコードを変更するたびに自動でビルドプロセスが行われ、バンドルされたファイルが生成される。
ES6 のサポート
Create React App は ES6（ECMAScript 2015）以降の JavaScript 機能をサポートしている。
本番用のビルド
npm run buildによって本番環境用にコードをビルドする。
Create React App でプロジェクトを作成する
Create React App を使うには Node.js がインストールされていることが前提。
Create React App でプロジェクトを作成するには、以下のコマンドを実行する。
npx create-react-app [プロジェクト名]
# TypeScriptを使う場合
npx create-react-app [プロジェクト名] --template typescript
npxというのはローカルにパッケージがあればそれを実行し、なければダウンロードして実行するコマンド。実行が終わればダウンロードしたパッケージは削除される。
プロジェクトの作成は頻繁に行うものではないので、Create React App はグローバルにインストールするより、npxで最新版を直接実行した方が良い。
Create React App で作成されたプロジェクトのディレクトリ構造とファイル
作成されたプロジェクトのディレクトリやファイル構成は以下のようになっている。
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
├── reportWebVitals.js
└── setupTests.js
README.md
プロジェクトの概要、セットアップ方法、使用方法、依存関係、ライセンスなどの情報を含む Markdown 形式のファイル。
node_modules
プロジェクトの依存関係（パッケージ）を格納するディレクトリ。このディレクトリは自動で作られ、手動で編集することはない。
package-lock.json
パッケージの依存関係の正確なバージョンを記録するためのファイルで、このファイルによって他の開発者ともパッケージのバージョンを共有できる。このファイルも手動で編集することはなく、自動で作られる。
package.json （重要）
npm や yarn の設定ファイルで、プロジェクトのメタデータ（名前、バージョン、依存関係、スクリプトなど）を記述する。
このファイルによって、パッケージの管理やスクリプトの実行を行う。
{
"name": "cra_practice",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
public （重要）
静的ファイルを格納するためのディレクトリで、ビルド時にディレクトリ内のファイルがそのままコピーされ、アプリのルートでアクセス可能になる。
favicon.ico
ブラウザのタブやブックマークに表示されるアイコン。
index.html （重要）
React アプリケーションのエントリーポイントとなる HTML ファイル。このファイルの<div id="root"></div>の部分にコンポーネントがレンダリングされる。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
logo192.png・logo512.png
プロジェクトにデフォルトで含まれるロゴ画像。
manifest.json
PWA の設定ファイル。PWA とは、プログレッシブウェブアプリの略で、簡潔にいうと Web アプリをスマホアプリのように使うための技術。
robots.txt
検索エンジンのクローラーに対して、サイトのインデックス作成を制御するためのファイル。このファイルによって、検索エンジンにインデックスされたくないページやディレクトリを指定することができる。
src （重要）
App.css
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
</a>
</header>
</div>
);
}
export default App;
App.test.js
App コンポーネントの単体テストを記述するファイルで、Jest や Testing Library などのライブラリを使ってテストを実行する。
index.css
アプリ全体のスタイルであるグローバルスタイルを定義する CSS ファイル。
index.js （重要）
React アプリのエントリーポイントとなる JavaScript ファイルで、App コンポーネントを DOM にレンダリングする。
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
このファイルによってindex.htmlのid="root"内にレンダリングされる。
<React.StrictMode></React.StrictMode>は React アプリ内での潜在的な問題を特定するのに役立つツールで、開発時のみ有効。
logo.svg
アプリケーション内で使用するデフォルトのロゴファイル。
reportWebVitals.js
アプリケーションのパフォーマンスを測定するためのファイル。このファイルを使って Web Vitals（ウェブのパフォーマンス指標）を測定し、結果を分析したり、外部のサービスに送信したりすることができる。
setupTests.js
テスト環境の設定を行うファイル。
開発環境
以下のコマンドで開発用のサーバーを起動できる。
npm start
この開発用のサーバーはホットリローディングによって、ファイルの変更がブラウザをリロードすることなく即座に反映される。
このコマンドはpackage.jsonのscriptsに設定されているコマンド。
{
// 省略
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
// 省略
}
react-scriptsというのは、Create React App によって提供される一連のスクリプトと設定が隠蔽されたパッケージ。内部的に Babel や Webpack、Jest の設定を行なっており、これによって、手動で設定を行わずにビルドやバンドル、テストを実行できる。
buildは後述するが、本番環境用にビルドするコマンド。
testはテストを実行するコマンド。
ejectは隠された設定ファイルをカスタマイズするために、プロジェクト内にエクスポートするコマンド。
ejectを実行すると、package.jsonのdependenciesに隠蔽されていたパッケージが現れる。また、プロジェクトのルートにconfig/が作られ、その中に設定ファイルが置かれる。
このコマンドの実行は元に戻せないため注意する。
本番環境
以下のコマンドを実行することで、本番環境用にビルドできる。
npm run build
ビルドを行うと、JavaScript や CSS、画像ファイルなどがバンドルされて最適化され、コードの圧縮やミニファイなども行われる。
そしてビルドされたファイルがbuild/に出力され、本番環境にデプロイできる準備が整った状態になる。
テスト
Create React App ではデフォルトで JavaScript のテスティングフレームワークである Jest とコンポーネントのテストを行うための Testing Library がインストールされている。Jest や Testing Library の詳細については省略。
npm testを実行することで、Jest が全てのテストファイルを検出して実行する。またファイルの変更を監視して、自動的にテストを再実行する。
npm test
