概要
本記事では、Reactアプリケーションのエントリーポイントである App.tsx を中心に、開発〜ビルド〜実行時における処理の流れを段階的に解説します。
Docker環境・TypeScript・Storybook を活用したモダンなフロントエンド構成を前提に、npm start からブラウザ描画に至るまでのファイル連携と処理順を具体的に示しています。
実施条件
- Node.js + React 環境が構築済み
- Docker / Docker Compose が使える環境
環境
| ツール | バージョン |
|---|---|
| Node.js | 22.5.1 |
| npm | 10.8.2 |
| React | 19.1.0 |
| TypeScript | 4.9.5 |
ディレクトリ構造
my-react-app/ ← プロジェクトルート
├── docker-compose.yml
└── app/
├── Dockerfile
├── .dockerignore
├── package.json ← ① npm start のエントリーポイント
├── public/
│ └── index.html ← ⑧ HTMLテンプレート（#root要素）
├── src/
│ ├── index.tsx ← ③ webpackのエントリーポイント
│ ├── App.tsx ← ④ 依存関係解析で発見
│ ├── App.css ← ⑤ アセット（CSS）
│ └── index.css ← ⑤ アセット（CSS）
├── node_modules/
│ └── react-scripts/
│ ├── scripts/
│ │ └── start.js ← ② react-scripts起動スクリプト
│ └── config/
│ ├── webpack.config.js ← ③ webpack設定ファイル
│ └── webpackDevServer.config.js ← 開発サーバー設定
└── build/ ← ⑨ ビルド出力（本番用）
└── index.html ← 最終的な成果物
Reactアプリの処理フローとファイルの使用順序
1. npm start
package.json の scripts.start に定義された react-scripts start が実行され、ローカルサーバーが起動します。
npm start
2. react-scripts 起動
node_modules/react-scripts/scripts/start.js が起動し、アプリ全体のビルド・サーバープロセスが制御されます。
3. webpack 設定読み込み + index.tsx 探索
node_modules/react-scripts/config/webpack.config.js が読み込まれ、エントリーポイントとして src/index.tsx を探索・読み込みます。
4. index.tsx の依存関係解析
index.tsx 内の import App from './App' により App.tsx が解析対象になります。
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App'; // ← src/App.tsx を発見・読み込み
import reportWebVitals from './reportWebVitals';
5. App.tsx とCSSの処理
App.css, index.css などのスタイルや画像・SVGなどのアセットがWebpackで処理・最適化されます。
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App(): React.JSX.Element {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
6. TypeScriptコンパイル
- TypeScript:
.tsx→ JavaScript に変換 - JSX変換:
<div>→React.createElement('div')
7. コンポーネントツリー構築
仮想DOMとしてReactのコンポーネントツリーが構築され、最終的なUI構造がメモリ上で形成されます。
// 実行時のコンポーネント階層
index.tsx
├── React.StrictMode
└── App.tsx // ← ここでApp.tsxが実際に実行される
└── <div className="App">
└── <header>
├── <img src="logo.svg">
├── <p>Edit src/App.tsx...</p>
└── <a href="...">Learn React</a>
8. HTMLテンプレート使用
public/index.html がテンプレートHTMLとして読み込まれ、Reactで構築された仮想DOMがこのテンプレートにマウントされます。
<!-- public/index.html -->
<body>
<div id="root"></div> <!-- ← App.tsxがここにマウントされる -->
</body>
9. scriptタグ挿入 + 配信
webpack-dev-server が自動的に <script> タグを挿入し、アプリケーションを http://localhost:3001 などで配信します。
<!-- 最終的にブラウザに送信されるHTML -->
<body>
<div id="root">
<!-- App.tsxの内容がここにレンダリングされる -->
<div class="App">
<header class="App-header">
<img src="/static/media/logo.svg" alt="logo">
<p>Edit <code>src/App.tsx</code> and save to reload.</p>
<a href="https://reactjs.org">Learn React</a>
</header>
</div>
</div>
<!-- 自動挿入されるスクリプト -->
<script src="/static/js/bundle.js"></script> <!-- index.tsx + App.tsx のコンパイル結果 -->
</body>
App.tsx の役割まとめ
1. UIコンポーネントの定義
- アプリケーションのメインUIを構成
-
index.tsxから読み込まれるルートコンポーネント
2. 依存関係の起点
- CSS、画像、サブコンポーネントの import を集約
3. ルーティングの設定
-
react-router-domなどを使用する場合、ここに<BrowserRouter>や<Routes>を記述 - 各ページへのルーティング分岐を記述する中心ファイルとなる
4. グローバル状態の初期化・提供
- Context API や Redux などを使用する場合、
App.tsxに<Provider>を記述 - アプリ全体にグローバル状態やテーマ、翻訳コンテキストなどを提供
処理フローまとめ
| ステップ | 処理内容 |
|---|---|
| 1 |
npm start 実行（package.json） |
| 2 |
react-scripts 起動（start.js） |
| 3 | webpack 設定読み込み + index.tsx 探索 |
| 4 |
index.tsx → App.tsx の依存関係解析 |
| 5 | CSS・アセット処理（App.css, index.css） |
| 6 | TypeScriptコンパイル・JSX変換 |
| 7 | Reactコンポーネントツリー構築 |
| 8 |
public/index.html をテンプレートとして使用 |
| 9 | scriptタグ挿入 + 配信 |