🟥 Webアプリはどう動くのか？
〜Vite × React × Tailwind × モノレポの “全体像” を完全に理解する
最近のWebアプリ開発では、
-
React
-
Vite
-
Tailwind CSS
-
npm
-
モノレポ構成（frontend / backend）
など多くの技術が登場し、
初心者は必ずこう感じます：
「結局なにがどう繋がって動いているの？」
この記事では、Webアプリがどのように稼働しているかを
概念レベルで一番わかりやすく説明します。
🧭 1. Webアプリ全体の構造図（まずこれだけ理解すればOK）
Webアプリはざっくり以下のように構成されます：
root/
├─ frontend/ ← ユーザーが触る画面（React）
│ └─ Viteがフロント開発サーバーとして動く
│
├─ backend/ ← APIサーバー（データの取得・保存）
│ └─ FastAPI / Express / Node などが動く
│
└─ package.json ← モノレポ（workspace）設定をまとめる
▼ 画面 → API → DB の流れ（超基本）
[User]
↓ HTTP(S)
[Frontend (React)]
↓ API通信（fetch / axios）
[Backend (API)]
↓ DBアクセス
[DataBase]
🔧 2. モノレポとは？（frontend & backend が1つのリポジトリに）
**モノレポ（Monorepo）**とは
「複数のプロジェクトを1つのリポジトリで管理する」構成。
例：
root/
├── frontend/
├── backend/
└── package.json ← 全てを束ねる
✔ モノレポのメリット
git clone 一回でフロント＆バックの両方が入る
依存パッケージ（npm install）も一括管理
concurrently で frontend と backend を同時起動できる
バージョン管理が統一され、チーム開発が安定する
⚙️ 3. Webアプリが動くときの “技術の役割” を理解する
Webアプリは複数の技術が連携して動きます。
この「役割の理解」が最初のハードル。
🟦 npmとは？
Node.js に付属する パッケージ管理ツール。
外部ライブラリの管理だけでなく、実行コマンドも担当する。
"scripts": {
"dev": "concurrently \"npm:dev:frontend\" \"npm:dev:backend\""
}
🟧 Viteとは？
高速なフロントエンド開発サーバー & ビルドツール。
npm run dev → Viteが立ち上がる
ブラウザは localhost:5173 にアクセス
HMR（変更部分だけの自動反映）が高速
Reactアプリが快適に動く裏側には Vite がいる。
🟩 Reactとは？
UI（画面）を構築するライブラリ。
index.html
↳ main.tsx ← Reactが開始される
↳ App.tsx ← 画面の入口
↳ components/
React は「ページ」ではなく
コンポーネントの組み合わせで画面を作る思想。
🟫 Tailwind CSSとは？
CSSを書く代わりに、クラス名だけでデザインを作れる仕組み。
<div class="flex items-center gap-4 p-2">...</div>
index.css に以下を書くと Tailwind が使えるようになる：
@tailwind base;
@tailwind components;
@tailwind utilities;
🟪 Backendとは？
API を提供し、データ処理を担うサーバー。
例：
FastAPI
Express.js
Node.js
NestJS
Frontend → Backend は
HTTP通信（fetch / axios） でつながる。
🛰 4. Webアプリの “起動の流れ” を理解する（全体像）
ここでは「ざっくりとした実行フロー」を解説します。
① npm run dev（root）を実行
root の package.json にある：
"dev": "concurrently \"npm run dev:frontend\" \"npm run dev:backend\""
これにより、
frontend と backend が同時に起動する。
② Vite が frontend を起動
npm run dev:frontend → Vite が localhost:5173 で待機
ブラウザはまず index.html を読み込む。
③ index.html が main.tsx を読み込む
例：
<script type="module" src="/src/main.tsx"></script>
ここで React が開始される。
④ main.tsx → App.tsx → Layout の順で画面を構築
App.tsx
↳ MainLayout.tsx
↳ TopBar.tsx
↳ SideBar.tsx
React はコンポーネントを組み合わせて UI を生成する。
⑤ Tailwind CSS が適用されてデザインが反映される
index.css
↳ base
↳ components
↳ utilities
これで画面が完成。
🧩 5. 第一回ではじめに理解すべき要点まとめ
-
フロントとバックは役割が違う
-
モノレポは両者を1つのリポジトリで管理
-
npm がコマンド実行を司る
-
Vite がフロント開発サーバーを提供
-
React が画面を描画
-
Tailwind CSS がデザインを管理
-
起動シーケンスを知ると全体像が見える
🎁 次回予告
-
「
npm run devをした後に“裏側で何が起きているか”完全解説」 -
root package.json
-
concurrently
-
Vite の起動仕組み
-
index.html → main.tsx → App.tsx
-
Tailwind の読み込み
これらを 1行ずつコード付きで徹底的に説明します。