FTC-001

フロントエンドツールチェーン完全ガイド

Node.js  /  npm  /  TypeScript  /  Vite  /  React  ——  5つの道具の役割と関係性

目次
  1. 5つの道具と役割一覧
  2. 層構造で見る関係図
  3. JavaScript と TypeScript の違い
  4. 核心：変換フロー図
  5. React ——コンポーネントと状態
  6. Vite ——開発サーバーとビルド
  7. npm とパッケージ管理
  8. ライフサイクル（手順の流れ）
  9. 実プロジェクト構成例

1. 5つの道具と役割一覧

名前 種類 一言で言うと いつ使う
Node.js 実行環境 JavaScript をブラウザの外（PC上）で動かす土台。npm コマンドが付属する 開発・ビルド中
npm パッケージ管理 Vite・React・TypeScript などを取り寄せてインストールする「宅配係」 セットアップ・追加時
TypeScript 言語 JavaScript に型を足した言語。最終的にブラウザが読める JavaScript に変換される コードを書くとき
React UIライブラリ 画面を「部品（コンポーネント）」で組み立てる道具。TypeScript で書く コードを書くとき
Vite ビルド/開発ツール TypeScript → JavaScript 変換、バンドル、高速な開発サーバーを担う 開発・ビルド中

2. 層構造で見る関係図

下が「土台」、上に行くほど「あなたが触るもの」です。

OS（macOS / Windows / Linux） Node.js — JavaScript 実行環境（+ npm） Vite や npm コマンド自体を動かす基盤 Vite — ビルドツール ＆ 開発サーバー TypeScript→JS 変換 ／ バンドル ／ ホットリロード TypeScript 型付き JavaScript React UI コンポーネント あなたが書くコード（.tsx ファイル） React コンポーネント ＋ TypeScript 型 npm が 取り寄せる

3. JavaScript と TypeScript の違い

JavaScript (.js)

// 型がないので実行時まで気づかない
function add(a, b) {
  return a + b;
}

add(1, "hello");
// → "1hello" （バグ、エラーにならない）

TypeScript (.ts / .tsx)

// 型を書くとコードを書く瞬間に検出
function add(a: number, b: number): number {
  return a + b;
}

add(1, "hello");
// ^^^^ エラー！ string は number に渡せない

TypeScript はブラウザでは動かない

ブラウザが理解できるのは JavaScript だけです。TypeScript は開発中に使う「型付き言語」で、最終的には Vite が JavaScript に変換（トランスパイル）します。型情報は変換時に除去され、ランタイム（実行中）には残りません。

4. 核心：変換フロー図

「なぜこんなに道具が多いのか」の答えがこの図に集約されています。

あなたのコード React + TypeScript (.tsx ファイル) Vite が 変換 (Node.js上で動く) 変換後の JS 最適化された JavaScript ファイル群 サーバーが 配信 ブラウザが実行 JavaScript のみ TypeScript は「いない」 最終成果物に Node.js TypeScript Vite は含まれない 開発者が書く ビルド成果物 ユーザーが触る

ポイント：開発時と実行時で「動いているもの」が違う

フェーズ動いているもの目的
開発中（npm run dev）Node.js + Vite変換しながらブラウザへ即反映
ビルド（npm run build）Node.js + Vite最適化した静的 JS を生成
本番稼働中ブラウザのみ（変換後 JS）Node.js も Vite も存在しない

5. React ——コンポーネントと状態

React の核心は2つのアイデアです。

コンポーネント（部品）

画面を再利用できる部品に分けて組み立てます。部品は関数として書きます。

// Header.tsx（部品の例）
export function Header() {
  return (
    <header>
      <h1>健康管理アプリ</h1>
    </header>
  );
}

// App.tsx で組み合わせる
export function App() {
  return (
    <div>
      <Header />   {/* 部品を貼る */}
      <RecordForm />
    </div>
  );
}

状態（state）と自動再描画

useState で状態を持つと、値が変わると自動で画面が更新されます。

import { useState } from 'react';

function HeadacheSlider() {
  // level が変わると <label> が自動で更新
  const [level, setLevel] =
    useState<number>(0);

  return (
    <label>
      頭痛レベル: <strong>{level}</strong>
      <input
        type="range" min={0} max={5}
        value={level}
        onChange={e =>
          setLevel(Number(e.target.value))}
      />
    </label>
  );
}

JSX / TSX とは何か

上のコードの <label> や <input> は HTML に見えますが、実際は JavaScript（TypeScript）の中に書いた特殊な記法です。これを JSX（JavaScript XML） と言い、TypeScript で書くと TSX（.tsx ファイル）になります。Vite がこれを通常の JavaScript に変換します。

6. Vite ——開発サーバーとビルド

開発モード（npm run dev） .tsx を保存 Vite が変換 ブラウザへ即反映 localhost:5173 （HMR） 本番ビルド（npm run build） 全 .tsx を まとめて変換 最適化 ＋ 圧縮（minify） dist/ フォルダに出力 index.html + *.js + *.css → サーバーで配信するだけ

Vite が旧来のツール（webpack）より高速な理由は、開発中は各ファイルをそのまま ESM として配信し、必要なファイルだけを変換するからです。全体をまとめてビルドしてからブラウザに送る方式より劇的に速くなります。

7. npm とパッケージ管理

package.json — プロジェクトの設計図

{
  "name": "my-app",
  "scripts": {
    "dev":   "vite",              // npm run dev で開発サーバー起動
    "build": "tsc && vite build", // npm run build で本番ビルド
    "preview": "vite preview"   // ビルド後のプレビュー
  },
  "dependencies": {
    "react":     "^18.3.1",     // 本番にも必要なライブラリ
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@types/react": "^18.3.1", // 開発時だけ必要（型定義）
    "typescript":   "^5.5.3",
    "vite":         "^5.4.2"
  }
}

node_modules/ フォルダに全パッケージが入ります（巨大になるため .gitignore に追加します）。package-lock.json がバージョンを固定し、npm install を実行すれば誰でも同じ環境を再現できます。

8. ライフサイクル（手順の流れ）

  1. Node.js をインストール（nodejs.org から）
    npm コマンドが使えるようになる
  2. Vite で雛形を作成
    npm create vite@latest my-app -- --template react-ts
    React + TypeScript のプロジェクト一式が生成される
  3. パッケージをインストール
    cd my-app && npm install
    React / Vite / TypeScript が node_modules/ に入る
  4. 開発サーバーを起動
    npm run dev
    localhost:5173 が開く。.tsx を保存するたびブラウザが即座に更新（HMR）
  5. コードを書く
    React コンポーネント（.tsx）を作成・編集する。TypeScript が誤りをリアルタイムで教えてくれる
  6. 本番ビルド
    npm run build
    全 .tsx が最適化 JavaScript に変換され dist/ に出力される
  7. 配信
    dist/ の静的ファイルを任意のサーバー（Nginx / FastAPI / Cloudflare Pages など）で配信するだけ。Node.js は不要になる

9. 実プロジェクト構成例（Python バックエンド + React フロントエンド）

健康管理アプリ health-moniter のような「Python バックエンド + TypeScript フロントエンド」の典型的な構成です。

ブラウザ （ユーザー） HTTP HTML/JS/JSON FastAPI（Python） uv 管理の仮想環境 静的ファイル配信 dist/ → ブラウザへ REST API /api/* → JSON Open-Meteo 気象データ API 気圧 / 気温 / 湿度 SQLite 症状ログ 気象ログ Vite build → dist/ （開発時のみ）

ディレクトリ構成

health-moniter/
├── frontend/           # Node.js + Vite + React + TypeScript
│   ├── package.json
│   ├── vite.config.ts
│   ├── tsconfig.json
│   └── src/
│       ├── App.tsx
│       ├── components/
│       │   ├── RecordForm.tsx   # 頭痛・背中スライダー
│       │   └── Dashboard.tsx    # 相関グラフ
│       └── main.tsx
│
├── backend/            # Python + FastAPI（uv 管理）
│   ├── pyproject.toml
│   └── app/
│       ├── main.py     # FastAPI エントリ + 静的ファイル配信
│       ├── weather.py  # Open-Meteo クライアント
│       └── analysis.py # 相関解析（pandas/scipy）
│
└── data/
    └── health.db       # SQLite（.gitignore）

開発中は npm run dev（Vite, port 5173）と uv run uvicorn app.main:app（FastAPI, port 8000）を両方起動します。Vite の設定で /api/* を port 8000 にプロキシすれば、ブラウザからは同一オリジンとして動きます。

まとめ

疑問答え
Node.js は本番サーバーとして使う？このプロジェクトでは No。開発とビルドだけに使う
TypeScript はブラウザで動く？直接は動かない。Vite が JS に変換する
React がないと何が困る？状態管理と DOM 更新を手書きする必要がある
Vite の代わりに何がある？webpack（古参、設定複雑）、esbuild（超高速だが機能少）
npm の代わりは？pnpm（高速・省ディスク）、yarn（yarn v4+）