React を始めるときに、いちばんよく使われているのが Vite(ヴィート)です。

コマンド1行で React のプロジェクトができて、保存した瞬間に画面に反映される開発用サーバーと、公開用のビルドがそろいます。

この記事では、Vite で React の環境を作るところから、npm run dev・build・preview の3つのコマンドが何をしているかまで、実際の出力を見ながら確かめていきます。

この記事のコマンドは、2026年11月に Docker の node:22 のコンテナで実行したものです。

作ったプロジェクトで ToDo アプリを作る続きは、React入門チュートリアルにあります。

確かめた環境

画面の確認は Chromium 156 で行いました。

Vite は開発用サーバーとビルドの道具

React は画面を作るためのライブラリで、それだけではブラウザで動かす準備まではしてくれません。

JSX を JavaScript に変換したり、ファイルを保存したら画面を更新したり、公開用に1つのファイルにまとめたりする道具が別に要ります。

その役をまとめて引き受けるのが Vite です。

開発中は、ファイルを1つずつ変換してブラウザに渡します。

確かめたときも、開発用サーバーに /src/main.jsx を問い合わせると、JSX が _jsxDEV(...) の呼び出しに変換された JavaScript がそのまま返ってきました。

import App from "/src/App.jsx";
...
createRoot(document.getElementById("root")).render(/* @__PURE__ */ _jsxDEV(StrictMode, { children: /* @__PURE__ */ _jsxDEV(App, {}, ...

公開用のビルドでは、全部のファイルをまとめて、dist フォルダに書き出します。

公式ドキュメントによると、Vite 8 のビルドは Rolldown というバンドラーで行われているとのことです(Getting Started | Vite)。

React そのものが何なのかは、Reactとは?にまとめています。

Node.js は 20.19 以上か 22.12 以上を入れておく

Vite を動かすには Node.js が要ります。

公式ドキュメントでは、Node.js 20.19 以上か 22.12 以上が必要とされています。

試しに少し古い Node.js 20.18.3 で vite build を実行すると、最初にこう出ました。

You are using Node.js 20.18.3. Vite requires Node.js version 20.19+ or 22.12+. Please upgrade your Node.js version.

このときはビルド自体は最後まで通りましたが、対象外のバージョンなので、メッセージが出たら Node.js を上げておくのが安心です。

手元の Node.js のバージョンは node -v で確かめられます。

Mac への入れ方はM4 MacにNode.jsをインストールする方法、バージョンの切り替えはNode.jsのバージョンを切り替える方法に書いています。

npm create vite で React のプロジェクトを作る

プロジェクトを作るコマンドはこれです。

npm create vite@latest my-app -- --template react

my-app がフォルダの名前で、--template react で React のひな形を選んでいます。

-- は npm 7 以降で必要な区切りで、これより後ろが Vite 側に渡されます。

実行するとこう出ました。

create-vite v9.3.4

│
◇  Scaffolding project in /work/my-app...
│
└  Done. Now run:

  cd my-app
  npm install
  npm run dev

フォルダ名やテンプレートを書かずに npm create vite@latest だけを実行すると、質問に答えながら選ぶ形になります。

確かめたときは、質問を出さずに最後まで進めるために --no-interactive も付けて実行しました。

テンプレートは react か react-ts を選ぶ

npm create vite@latest -- --help で、選べるテンプレートが出ます。

Available templates:
vanilla-ts          vanilla
vue-ts              vue
react-ts            react
react-compiler-ts   react-compiler
preact-ts           preact
lit-ts              lit
svelte-ts           svelte
solid-ts            solid
qwik-ts             qwik

React で使うのは次の4つです。

迷ったら、JavaScript で始めるなら react、TypeScript で始めるなら react-ts で大丈夫です。

以前の記事でよく見る react-swc は、今のテンプレートの一覧にはありませんでした。

作られるファイル

--template react で作られたファイルは、これで全部でした。

my-app/
├── .gitignore
├── .oxlintrc.json
├── README.md
├── index.html
├── package.json
├── public/
│   ├── favicon.svg
│   └── icons.svg
├── src/
│   ├── App.css
│   ├── App.jsx
│   ├── assets/
│   │   ├── hero.png
│   │   ├── react.svg
│   │   └── vite.svg
│   ├── index.css
│   └── main.jsx
└── vite.config.js

package.json の中身はこうです。

{
  "name": "my-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "oxlint",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^19.3.1",
    "react-dom": "^19.3.1"
  },
  "devDependencies": {
    "@types/react": "^19.3.0",
    "@types/react-dom": "^19.3.0",
    "@vitejs/plugin-react": "^6.1.2",
    "oxlint": "^1.90.0",
    "vite": "^8.3.6"
  }
}

リンターは ESLint ではなく Oxlint が入っていました。

ヘルプには --eslint を付けると ESLint にできると出ています。

vite.config.js は、React のプラグインを読み込むだけの短いものです。

import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
})

index.html はプロジェクトの直下にあり、<div id="root"></div> と src/main.jsx を読み込む1行だけが入っています。

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

main.jsx がこの root の中に App を描く、という流れです。

react-ts のほうは、.jsx が .tsx になり、tsconfig.json・tsconfig.app.json・tsconfig.node.json の3つが増えていました。

npm install で必要なものを入れる

作ったフォルダに入って、依存パッケージを入れます。

cd my-app
npm install

added 24 packages, and audited 25 packages in 6s

入ったのは24個で、node_modules は 58MB でした。

npm ls で、入った版を確かめられます。

[email protected] /work/my-app
+-- @vitejs/[email protected]
| `-- [email protected] deduped
+-- [email protected]
| `-- [email protected] deduped
+-- [email protected]
`-- [email protected]

npm run dev で開発用サーバーを動かす

npm run dev

  VITE v8.3.8  ready in 170 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

http://localhost:5173/ をブラウザで開くと、最初の画面が出ます。

「Count is 0」のボタンを2回押すと、2になりました。

ここまで出れば、React の環境構築はできています！

止めるときは、ターミナルで Ctrl + C です。

保存すると、カウントを残したまま画面が変わる

開発用サーバーを動かしたまま、src/App.jsx の見出しを書き換えて保存してみます。

<h1>Vite + React の環境構築ができました！</h1>

ページを読み込み直さなくても、見出しだけが変わりました。

ボタンの数字が 2 のまま残っているのがポイントです！

ページ全体を読み込み直したのではなく、書き換えた部品だけが差し替わっています。

ターミナルにも、差し替えたことが出ていました。

[vite] (client) hmr update /src/App.jsx

この仕組みを HMR(Hot Module Replacement)と呼びます。

5173 番が使われていると 5174 番になる

別のプロジェクトですでに 5173 番を使っていると、次の番号に移って起動しました。

Port 5173 is in use, trying another one...

  VITE v8.3.8  ready in 105 ms

  ➜  Local:   http://localhost:5174/

「開いたら別のアプリが出た」というときは、ターミナルに出ている番号を見てみてください。

Docker やスマホから開けないときは --host と allowedHosts

npm run dev のままだと、開発用サーバーは自分のマシンの中(localhost)からしか開けません。

Docker のコンテナの中で動かしたときに、外から開けなかったのはこれが原因でした。

コンテナの中では 200 が返るのに、同じネットワークの別のコンテナから開くと、つながりませんでした。

curl: (7) Failed to connect to rv port 5173 after 0 ms: Couldn't connect to server

--host を付けると、外からも開けるようになります。

npm run dev -- --host

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://172.18.0.3:5173/  eth0

Network: に出た IP アドレスで開くと、200 が返りました。

同じ Wi-Fi のスマホから開きたいときも、この Network: のアドレスを使う形になります(スマホからは試していません)。

ただし、IP アドレスではなくホスト名(この例ではコンテナの名前 rv)で開くと、403 でこう返りました。

Blocked request. This host ("rv") is not allowed.
To allow this host, add "rv" to `server.allowedHosts` in vite.config.js.

知らないホスト名からのアクセスは、Vite が止めています。

メッセージのとおり、vite.config.js に server.allowedHosts を足すと開けました！

export default defineConfig({
  plugins: [react()],
  server: {
    allowedHosts: ['rv'],
  },
})

設定ファイルを保存すると、開発用サーバーは自動で再起動されました。

[vite] vite.config.js changed, restarting server...
[vite] server restarted.

npm run build で公開用のファイルを作る

npm run build

vite v8.3.8 building client environment for production...
transforming...
✓ 20 modules transformed.
rendering chunks...
computing gzip size...
dist/index.html                   0.45 kB │ gzip:  0.29 kB
dist/assets/react-CHdo91hT.svg    4.12 kB │ gzip:  2.06 kB
dist/assets/vite-BF8QNONU.svg     8.70 kB │ gzip:  1.60 kB
dist/assets/hero-CLDdwZDr.png    13.05 kB
dist/assets/index-DykytF2W.css    4.10 kB │ gzip:  1.47 kB
dist/assets/index-DSXtc1GT.js   222.44 kB │ gzip: 69.28 kB

✓ built in 106ms

できあがった dist フォルダの中身はこうでした。

dist/
├── assets/
│   ├── hero-CLDdwZDr.png
│   ├── index-DSXtc1GT.js
│   ├── index-DykytF2W.css
│   ├── react-CHdo91hT.svg
│   └── vite-BF8QNONU.svg
├── favicon.svg
├── icons.svg
└── index.html

src/assets に置いた画像は、ファイル名にハッシュが付いて assets に入ります。

public に置いたファイル(favicon.svg・icons.svg)は、名前を変えずにそのまま dist の直下に写されていました。

dist/index.html は、まとめた JS と CSS を読み込む形に書き換わっています。

<script type="module" crossorigin src="/assets/index-DSXtc1GT.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DykytF2W.css">

この dist フォルダを、そのままサーバーに置けば公開できます。

react-ts は、型のエラーがあるとビルドが止まる

react-ts の build は tsc -b && vite build になっていて、先に型のチェックが走ります。

わざと型の合わないファイルを読み込ませると、tsc のところで止まり、dist は作られませんでした。

> tsc -b && vite build

src/typeerr.ts(1,7): error TS2322: Type 'string' is not assignable to type 'number'.

一方、同じ状態でも npm run dev の開発用サーバーは、そのファイルを変換して 200 で返していました。

開発中は型のエラーがあっても画面は動くので、「dev では動いたのに build で落ちる」ということが起きます。

型のエラーはエディタか npx tsc -b で早めに見ておくと安心です。

dist/index.html を直接開くと真っ白になる

できた dist/index.html をダブルクリックで開いてみたくなりますよね？

ところが、そのまま開くと画面が真っ白になります。

ブラウザで file:///…/dist/index.html を開いたときのコンソールには、こう出ていました。

Access to script at 'file:///assets/index-DSXtc1GT.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-experimental-site-token-provider, chrome-extension, chrome-untrusted, data, http, https, isolated-app.

/assets/… がパソコンのルートを指してしまうことと、type="module" のスクリプトは file:// から読み込めないことが重なって、JS が1つも動いていません。

<div id="root"> の中は空のままでした。

ビルドした結果を見たいときは、次の npm run preview を使います。

npm run preview でビルドした結果を確かめる

npm run preview

  ➜  Local:   http://localhost:4173/
  ➜  Network: use --host to expose

preview は、dist の中身を配るだけのサーバーで、番号は 4173 番です。

こちらで開くと JS も 200 で読み込まれ、<div id="root"> の中に画面が描かれていました。

公開する前の最後の確認に使います。

3つのコマンドの違いをまとめるとこうです。

参考:Create React App から Vite へ

以前は React の環境構築といえば Create React App(npx create-react-app)でした。

React の公式ブログによると、Create React App は2025年2月に新しいアプリでの利用を非推奨にしたとのことです。

新しく作るならフレームワーク(Next.js・React Router・Expo)がすすめられていて、自分で組み立てたいときや React の仕組みから学びたいときは、Vite などのビルドツールを使う方法が案内されているようです。

出典: Sunsetting Create React App – React

古い記事の create-react-app の手順は、今から始めるなら Vite に読み替えるのがよさそうです。

おわりに

Vite での React の環境構築は、npm create vite@latest → npm install → npm run dev の3行で終わります。

つまずきやすいのは、Node.js のバージョン、Docker やスマホから開くときの --host、ビルドした HTML を直接開いて真っ白になるところでした (´・ω・`)

次は、React入門チュートリアルで ToDo アプリを作ってみてください。

ページの切り替えを足すならReact Router、アイコンを入れるならReact Iconsの記事もどうぞ (｀・ω・´)ゞ