React TypeScript アプリにおける Node.js / npm / Vite / vite.config.ts の役割まとめ
はじめに
npm で React アプリを作成すると、プロジェクト内に package.json、tsconfig.json、vite.config.ts など、さまざまな設定ファイルが作られます。
最初は、
「React アプリなのに、なぜ Node.js が必要なの？」
「npm は何をしているの？」
「Vite って何？」
「vite.config.ts は何のためのファイル？」
と混乱しやすいです。
この記事では、React TypeScript アプリにおける Node.js、npm、TypeScript、Vite、vite.config.ts の役割を整理します。
全体像
まず大事なのは、React アプリそのものは最終的に ブラウザ上で実行される という点です。
一方で、開発中やビルド時には Node.js が使われます。
開発中
Node.js
└─ npm を実行
└─ Vite 開発サーバーを起動
└─ React / TypeScript のコードをブラウザへ渡す
ブラウザ
└─ React アプリを実行
ビルド後は、React / TypeScript のコードが HTML、CSS、JavaScript に変換されます。
React / TypeScript コード
↓
Vite がビルド
↓
dist フォルダを生成
↓
HTML / CSS / JavaScript の静的ファイルとして配布
Node.js とは？
Node.js は、ブラウザの外で JavaScript を実行できるようにするランタイム環境です。
もともと JavaScript はブラウザ上で動く言語でした。
しかし Node.js を使うことで、ターミナルやサーバー環境でも JavaScript を実行できます。
React TypeScript アプリにおける Node.js の主な役割は以下です。
- npm コマンドの実行
- Vite 開発サーバーの起動
- TypeScript 関連ツールの実行
- ビルドツールの実行
- 開発用サーバーの提供
重要なのは、通常の Vite + React アプリでは、最終的な React アプリは Node.js 上ではなくブラウザ上で実行されるということです。
Node.js は、React アプリを開発・ビルドするための土台のような存在です。
npm とは？
npm は Node.js のパッケージマネージャーです。
React アプリに必要なライブラリをインストールしたり、プロジェクトの実行コマンドを管理したりします。
よく使うコマンドは以下です。
npm install
npm run dev
npm run build
npm run preview
npm は package.json をもとに動作します。
例えば、package.json に以下のような設定があるとします。
{
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"preview": "vite preview"
}
}
この場合、次のコマンドを実行すると、
npm run dev
実際には以下が実行されます。
vite
つまり npm は、ライブラリ管理だけでなく、プロジェクト内のコマンド実行も担当します。
React とは？
React は、ブラウザ上で UI を作るための JavaScript ライブラリです。
画面をコンポーネント単位で分けて開発できます。
例：
function App() {
return <h1>Hello React</h1>;
}
export default App;
React のコードは、最終的に JavaScript に変換され、ブラウザ上で実行されます。
TypeScript とは？
TypeScript は、JavaScript に型システムを追加した言語です。
開発中に型のミスを検出できるため、コードの安全性や保守性を高めることができます。
例：
function add(a: number, b: number) {
return a + b;
}
add(1, 2); // OK
add(1, "2"); // 型エラー
React では、props、state、関数の引数、API レスポンスなどに型を付けるときによく使います。
例：
type ButtonProps = {
label: string;
onClick: () => void;
};
function Button({ label, onClick }: ButtonProps) {
return <button onClick={onClick}>{label}</button>;
}
ブラウザは TypeScript をそのまま実行できません。
そのため、Vite や TypeScript 関連ツールが .ts / .tsx ファイルを JavaScript に変換します。
.ts / .tsx
↓
.js
↓
ブラウザで実行
Vite とは？
Vite は、フロントエンド開発サーバー兼ビルドツールです。
React アプリでは、主に以下の役割を持ちます。
- 開発サーバーの起動
- TypeScript / JSX の処理
- コード変更時の高速な画面反映
- 本番配布用ファイルのビルド
- 環境変数の処理
- プラグインの利用
開発時には以下を実行します。
npm run dev
すると Vite が開発サーバーを起動します。
通常は以下のような URL でアプリを確認できます。
http://localhost:5173
また、ビルド時には以下を実行します。
npm run build
すると Vite が本番配布用のファイルを生成します。
dist/
├─ index.html
└─ assets/
├─ index-xxxx.js
└─ index-xxxx.css
vite.config.ts とは？
vite.config.ts は、Vite の設定ファイルです。
Vite が開発サーバーをどのように起動するか、React をどのように処理するか、ビルドをどう行うかなどを設定します。
React + TypeScript + Vite のプロジェクトでは、基本的に以下のような内容になっています。
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
});
コードの意味
import { defineConfig } from 'vite';
Vite の設定を定義するための関数を読み込んでいます。
import react from '@vitejs/plugin-react';
Vite で React を扱うためのプラグインを読み込んでいます。
export default defineConfig({
plugins: [react()],
});
Vite の設定をエクスポートし、React プラグインを使用するようにしています。
React では JSX という記法を使います。
function App() {
return <h1>Hello</h1>;
}
ブラウザは JSX をそのまま理解できないため、Vite の React プラグインが JSX の変換や Fast Refresh などを処理します。
vite.config.ts でよく設定する内容
開発サーバーのポート変更
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
},
});
この設定をすると、開発サーバーは以下で起動します。
http://localhost:3000
パスエイリアスの設定
深い階層の相対パスは読みにくくなりがちです。
例えば以下のような import です。
import Button from '../../../components/Button';
そこで、@ を src に紐づける設定をすると、次のように書けます。
import Button from '@/components/Button';
Vite 側の設定例：
import path from 'path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
});
ただし、TypeScript 側にも同じエイリアスを認識させる必要があります。
そのため、tsconfig.json にも設定を追加します。
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}
API プロキシの設定
React アプリとバックエンドサーバーの URL が異なると、CORS の問題が発生することがあります。
例：
React アプリ: http://localhost:5173
バックエンド: http://localhost:8080
このような場合、Vite の proxy 設定を使えます。
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
},
},
},
});
フロントエンドでは以下のように呼び出します。
fetch('/api/users');
すると Vite の開発サーバーが、実際のリクエストをバックエンドへ転送します。
/api/users
↓
http://localhost:8080/api/users
主なファイルと役割
| ファイル / フォルダ | 役割 |
|---|---|
node_modules/ |
インストールされたライブラリが入るフォルダ |
package.json |
プロジェクト情報、scripts、dependencies を管理するファイル |
package-lock.json |
インストールされたパッケージの正確なバージョンを記録するファイル |
src/main.tsx |
React アプリのエントリーポイント |
src/App.tsx |
メインの React コンポーネント |
index.html |
ブラウザが最初に読み込む HTML ファイル |
tsconfig.json |
TypeScript の設定ファイル |
vite.config.ts |
Vite の設定ファイル |
dist/ |
ビルド後に生成される本番配布用フォルダ |
実行フロー
開発サーバーを起動するとき
npm run dev
動作の流れ：
npm
↓
package.json の scripts を確認
↓
vite を実行
↓
Node.js が Vite 開発サーバーを起動
↓
ブラウザで localhost にアクセス
↓
React アプリが実行される
本番用にビルドするとき
npm run build
動作の流れ：
TypeScript の型チェック
↓
Vite が React / TSX コードをバンドル
↓
HTML / CSS / JavaScript を最適化
↓
dist フォルダを生成
ビルド結果を確認するとき
npm run preview
ビルドされた dist の内容をローカルで確認できます。
重要なポイント
React TypeScript アプリにおいて、Node.js は 最終的なアプリを実行するサーバーというより、開発やビルドを支える ツール実行環境です。
Node.js = 開発ツールを動かす基盤
npm = パッケージとコマンドの管理ツール
Vite = 開発サーバー兼ビルドツール
TypeScript = 型安全性を追加した JavaScript
React = ブラウザで UI を描画するライブラリ
vite.config.ts = Vite の設定ファイル
イメージで理解する
React アプリ開発を料理に例えると、以下のように考えられます。
React = 料理そのもの、画面を作る材料
TypeScript = レシピのチェックシステム
Vite = 高速な調理設備
Node.js = 調理設備を動かすエンジン
npm = 食材や道具を管理する仕組み
vite.config.ts = キッチンの運用設定表
つまり、React アプリはブラウザに表示する成果物であり、Node.js、npm、Vite はその成果物を作るための開発環境です。
まとめ
npm で作成した React TypeScript アプリでは、いろいろなツールが連携して動いています。
特に混乱しやすいポイントは、Node.js の役割です。
React アプリ自体はブラウザで実行されますが、開発中のサーバー起動やビルド処理には Node.js が使われます。
そのため、React 開発では Node.js、npm、Vite の関係を理解しておくと、プロジェクト構成やエラーの原因を把握しやすくなります。