React環境構築をViteで行う手順｜create viteの使い方

ReactのViteでの環境構築は、npm create vite@latest my-app -- --template react-ts を実行し、npm install と npm run dev を続けるだけで完了します。 Viteは開発サーバーと本番ビルドをまとめて提供するツールで、create viteはそのひな形を作るコマンドです。

この記事では、create-vite 9.2.1 と Vite 8.3.2 で実際にプロジェクトを作り、対話プロンプト・開発サーバー・ビルドの出力をそのまま掲載しています。生成される全ファイルの役割、Node.jsの版が合わないときのエラー文、ポートが使用中のときの動き、--host の効果、create-react-app（CRA）との対応まで、手順として追える形でまとめました。

確認環境：Ubuntu 24.04（コンテナ）／Node.js 22.22.2／npm 10.9.7／create-vite 9.2.1／Vite 8.3.2／React 19.3.0／TypeScript 6.0.3／pnpm 10.28.0／yarn 1.22.22／bun 1.3.13。出力中のパスは /home/taro に、IPアドレスは環境に合わせて置き換えています。

create viteの早見表

パッケージマネージャー別のコマンド

React＋TypeScript のひな形（react-ts）を作るコマンドです。4つとも実行し、どれも18ファイルが生成されることを確かめています。

npm だけ、--template の前に区切りの -- が必要です。 これは「ここから先の引数は npm ではなく create-vite に渡す」という印です。テンプレートを指定しても、リンターの種類と「すぐインストールして起動するか」の2問は尋ねられます。質問を一切出さずに作りたいときは、末尾に --no-interactive を足します。

作ったあとによく使うコマンド

始める前に確認すること：Node.jsの版

Vite 公式ガイドには「Vite は Node.js 20.19 以上、または 22.12 以上が必要」と書かれています。npm に登録されている情報でも、vite 8.3.2 と create-vite 9.2.1 の対応範囲は ^20.19.0 || >=22.12.0 でした。まず自分の版を確かめます。

node -v

v22.22.2

Nodeの版が合わないときのエラー文

対応範囲外の Node.js 18.20.8 で作成コマンドを実行すると、次のようになりました。

npm warn EBADENGINE Unsupported engine {
npm warn EBADENGINE   package: 'create-vite@9.2.1',
npm warn EBADENGINE   required: { node: '^20.19.0 || >=22.12.0' },
npm warn EBADENGINE   current: { node: 'v18.20.8', npm: '10.9.7' }
npm warn EBADENGINE }

> npx
> create-vite old-app --template react-ts --no-interactive

（create-vite のコードが1行表示されます）
SyntaxError: The requested module 'node:util' does not provide an export named 'styleText'
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:191:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:337:24)
    at async loadESM (node:internal/process/esm_loader:34:7)
    at async handleMainPromise (node:internal/modules/run_main:106:12)

Node.js v18.20.8
npm error code 1

読み方のポイントは2つです。

• 先頭の EBADENGINE が本当の原因を教えてくれています。 required（必要な版）と current（今の版）が並んで表示されます。これは警告なので、処理はそのまま先へ進みます。
• 続く SyntaxError ... styleText は、新しい Node.js にしかない機能を呼ぼうとして止まったものです。エラー文だけを見ると原因がわかりにくいので、上の警告とセットで読むのがコツです。

作成済みのプロジェクトで、開発サーバーだけを Node.js 18.20.8 で起動した場合も、同じ does not provide an export named 'styleText' で止まりました。どちらも Node.js を対応範囲の版に更新すると解消します。

対話形式でプロジェクトを作る

テンプレート名を覚えていなくても、引数なしで実行すれば質問に答える形で作れます。

npm create vite@latest

最後まで答えたときの画面です（フレームワークで React、種類で TypeScript、リンターで Oxlint を選び、最後の質問は No にしました）。

> npx
> create-vite

To create in one go, run: create-vite <DIRECTORY> --no-interactive --template <TEMPLATE>
│
◇  Project name:
│  my-app
│
◇  Select a framework:
│  React
│
◇  Select a variant:
│  TypeScript
│
◇  Which linter to use?
│  Oxlint
│
◇  Install with npm and start now?
│  No
│
◇  Scaffolding project in /home/taro/my-app...
│
└  Done. Now run:

  cd my-app
  npm install
  npm run dev

それぞれの質問で表示された選択肢は次のとおりです。矢印キーで選び、Enter で決定します。

最後の質問を No にすると、ファイルの生成だけが行われ、続けて実行するコマンドが案内されます。

テンプレートを指定して作る

早見表のコマンドなら、名前・フレームワーク・種類の3問を省けます。

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

ターミナルで実行すると、残りの2問（Which linter to use? と Install with npm and start now?）だけが表示されました。質問を1つも出さずに作るには、--no-interactive を付けます。

npm create vite@latest my-app -- --template react-ts --no-interactive

> npx
> create-vite my-app --template react-ts --no-interactive

|
o  Scaffolding project in /home/taro/my-app...
|
—  Done. Now run:

  cd my-app
  npm install
  npm run dev

（出力のフォルダ名は my-app に置き換えています。）このときリンターは既定の Oxlint になります。手順書や自動化にはこの形が向いています。テンプレート名は、Vite 公式ガイドによると vanilla・vue・react・preact・lit・svelte・solid・qwik と、それぞれに -ts を付けた TypeScript 版が用意されています。

依存パッケージを入れて開発サーバーを起動する

案内された3つのコマンドを順に実行します。

cd my-app
npm install
npm run dev

npm run dev の出力です。

> my-app@0.0.0 dev
> vite


  VITE v8.3.2  ready in 267 ms

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

Local に表示された http://localhost:5173/ をブラウザで開くと、ひな形の画面が表示されます。 src/App.tsx を編集して保存すると、ブラウザを再読み込みしなくても画面に反映されます（HMR と呼ばれる仕組みです）。Chromium で開いたままボタンを1回押し、見出しの文字を書き換えて保存したところ、ページの読み込み回数は1回のまま見出しだけが変わり、ボタンの「Count is 1」も保たれていました。止めるときは、ターミナルで Ctrl + C を押します。

今回入った主なパッケージの版は次のとおりです。

生成されるファイルの役割

react-ts テンプレートで生成されたのは、次の18ファイルです。

特に大事な3つを見ておきます。

index.html は、プロジェクトの直下に置かれます。 Vite 公式ガイドが「index.html が中心にある」と説明しているとおり、この HTML が入口で、script タグで src/main.tsx を読み込みます。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>my-app</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

日本語のサイトにする場合は、lang="en" を lang="ja" に変えておくとよいでしょう。

src/main.tsx は、App を画面に取り付けるコードです。

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

package.json の scripts が、コマンドの正体です。

{
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "oxlint",
    "preview": "vite preview"
  }
}

npm run dev は vite を、npm run build は「TypeScript の型チェック（tsc -b）→ vite build」を実行していることがわかります。

public と src/assets の使い分けは次のとおりです。

本番用にビルドして確認する

npm run build

> my-app@0.0.0 build
> tsc -b && vite build

vite v8.3.2 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-D64VDMd1.css    4.10 kB │ gzip:  1.47 kB
dist/assets/index-BRDr3nmD.js   222.52 kB │ gzip: 69.27 kB

✓ built in 155ms

dist フォルダの中身が、サーバーに置く完成品です。 ビルド結果を手元で確かめるには preview を使います。

npm run preview

> my-app@0.0.0 preview
> vite preview

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

ポート5173が使用中のとき

開発サーバーを起動したまま、別のターミナルでもう1つ起動すると、次のようになります。

> my-app@0.0.0 dev
> vite

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

  VITE v8.3.2  ready in 285 ms

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

Vite は、ポートが使用中なら自動で次の番号（5174）に移ります。 エラーにはならないので、「5173 を開いたら別のアプリが表示された」というときは、起動時の Local の行を見直してください。

番号を固定したいときは、次の方法があります。

--strictPort を付けて、使用中のポートで起動したときの出力（先頭2行）です。

error when starting dev server:
Error: Port 5173 is already in use

毎回オプションを付けたくない場合は、vite.config.ts に書きます。

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    host: true, // --host と同じ。コンテナや WSL の外からも開けるようにする
    port: 3000, // 既定の 5173 から変える
    strictPort: true, // 使用中なら別の番号に移らず、エラーで止める
  },
})

この設定で npm run dev を実行すると、Local: http://localhost:3000/ で起動しました。

コンテナやWSLの外から開けないときは--host

開発サーバーの出力にある Network: use --host to expose は、「今は自分自身（localhost）からしか開けません。外から開くには --host を付けてください」という意味です。Vite 公式ドキュメントでも、server.host の既定値は localhost で、0.0.0.0 または true にするとすべてのアドレスで待ち受けると説明されています。

コンテナの中で、--host なしとありの両方を確かめました。まず、なしの場合です（ポートは 8871 を指定しています）。

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

curl -s -o /dev/null -w "%{http_code}\n" http://localhost:8871/
# 200
curl http://192.0.2.2:8871/
# curl: (7) Failed to connect to 192.0.2.2 port 8871 after 0 ms: Couldn't connect to server

localhost 宛ては 200 が返りますが、同じマシンの IP アドレス宛てはつながりません。次に --host を付けます。

npm run dev -- --host

  ➜  Local:   http://localhost:8871/
  ➜  Network: http://192.0.2.2:8871/  eth0

curl -s -o /dev/null -w "%{http_code}\n" http://192.0.2.2:8871/
# 200

Network の行に URL が表示され、IP アドレス宛てでも 200 が返るようになりました。

--host を付けると同じネットワークのほかの機器からも開けるようになるので、必要なときだけ付けるのがおすすめです。

create-react-appからの移行と対応表

React 公式ブログは 2025年2月14日の記事で、新しいアプリでの create-react-app（CRA）の利用を非推奨とし、フレームワーク、または Vite・Parcel・Rsbuild などのビルドツールへの移行を勧めると発表しました。CRA 自体はメンテナンスモードで動き続けるとされています。ここでは、CRA に慣れた方が Vite で迷わないよう、対応を表にまとめます。CRA 側の内容は CRA 公式ドキュメント、Vite 側の内容は今回の実行結果に基づいています。

環境変数はVITE_で始める

移行でいちばんつまずきやすいのが環境変数です。プロジェクト直下に .env を作り、3種類の名前を書いて試します。

VITE_API_URL=https://api.example.com
REACT_APP_API_URL=https://api.example.com
SECRET_TOKEN=abc123

// src/App.tsx
function App() {
  return (
    <ul>
      <li>VITE_API_URL: {String(import.meta.env.VITE_API_URL)}</li>
      <li>REACT_APP_API_URL: {String(import.meta.env.REACT_APP_API_URL)}</li>
      <li>SECRET_TOKEN: {String(import.meta.env.SECRET_TOKEN)}</li>
      <li>MODE: {import.meta.env.MODE}</li>
      <li>DEV: {String(import.meta.env.DEV)}</li>
      <li>PROD: {String(import.meta.env.PROD)}</li>
      <li>BASE_URL: {import.meta.env.BASE_URL}</li>
    </ul>
  )
}

export default App

開発サーバーで表示した画面の文字を、Chromium（Playwright 1.56.0）で取り出した結果です。

VITE_API_URL: https://api.example.com
REACT_APP_API_URL: undefined
SECRET_TOKEN: undefined
MODE: development
DEV: true
PROD: false
BASE_URL: /

ビルドして preview で表示すると、MODE 以降が次のように変わりました。

MODE: production
DEV: false
PROD: true
BASE_URL: /

画面のコードに渡るのは VITE_ で始まる変数だけです。 REACT_APP_ のままの変数や接頭辞のない変数は undefined になります。ビルド後の JavaScript を検索しても、SECRET_TOKEN の値（abc123）は含まれていませんでした。Vite 公式ドキュメントも、この仕組みを「意図しない値の公開を防ぐため」と説明しています。なお、VITE_ を付けた値は誰でも見られるコードに含まれるので、パスワードや秘密の鍵は入れないでください。

TypeScript で補完を効かせるには、src/vite-env.d.ts に型を書きます。

// src/vite-env.d.ts
interface ImportMetaEnv {
  readonly VITE_API_URL: string
}

index.html の中では %VITE_API_URL% と書くと値に置き換わります。title に書いて確かめたところ、配信された HTML の title が https://api.example.com になりました。

.env ファイルは、Vite 公式ドキュメントによると次の4種類が読み込まれます。

生成された .gitignore には *.local が最初から入っているので、.local で終わるファイルは Git の対象外になります。

process.envをそのまま残すとどうなるか

CRA のコードを書き換えずに持ってきた場合を再現します。

// src/App.tsx
function App() {
  return <p>{process.env.REACT_APP_API_URL}</p>
}

export default App

npx tsc -b（npm run build の前半）の出力です。

src/App.tsx(2,14): error TS2591: Cannot find name 'process'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node` and then add 'node' to the types field in your tsconfig.

開発サーバーで開くと画面には何も表示されず、ブラウザ側では次のエラーが出ました。

process is not defined

ブラウザには process というオブジェクトが無いためです。 エラー文は型定義の追加を勧めていますが、移行の場合の直し方は「process.env.REACT_APP_〜 を import.meta.env.VITE_〜 に置き換え、.env の変数名も VITE_ に変える」ことです。

PORTの指定方法も変わる

環境変数 PORT で番号を指定していた場合も書き換えが必要です。Vite で PORT=3000 npx vite と実行したところ、起動したのは http://localhost:5173/ のままでした。Vite では --port 3000 か、vite.config.ts の server.port で指定します。

移行の手順チェックリスト

• [ ] Node.js が 20.19 以上または 22.12 以上であることを確かめる
• [ ] npm create vite@latest で新しいプロジェクトを作り、src の中身を移す
• [ ] public/index.html の内容を、直下の index.html に移す（%PUBLIC_URL% は / 始まりのパスに直す）
• [ ] process.env.REACT_APP_〜 を import.meta.env.VITE_〜 に置き換える
• [ ] .env の変数名を VITE_ 始まりに変える
• [ ] npm start を使っている手順書やスクリプトを npm run dev に直す
• [ ] 配置先の設定で、出力フォルダを build から dist に変える

つまずいたときの逆引き表

よくある質問

Q. npm create vite@latest と npx create-vite は同じですか？ A. 同じものが動きます。実行時の出力にも > npx > create-vite と表示されており、npm create が create-vite というパッケージを呼び出しています。

Q. JavaScript で始めたい場合はどうしますか？ A. テンプレート名を react-ts から react に変えます。対話形式なら、Select a variant で JavaScript を選びます。

Q. リンターの質問で Oxlint と ESLint のどちらを選べばよいですか？ A. 既定で選ばれているのは Oxlint で、今回のひな形では npm run lint が oxlint を実行する設定になりました。チームで ESLint の設定を共有している場合は ESLint を選ぶ、という決め方で十分です。

Q. 開発サーバーの画面を自動でブラウザに開けますか？ A. Vite 公式ドキュメントによると、server.open を設定すると起動時にブラウザで開きます。

まとめ

• 作成は npm create vite@latest my-app -- --template react-ts。npm だけ区切りの -- が必要
• 続けて npm install → npm run dev で、http://localhost:5173/ に開発サーバーが立つ
• Node.js は 20.19 以上または 22.12 以上。合わないと EBADENGINE の警告と styleText のエラーが出る
• ポートが使用中なら自動で次の番号に移る。固定は --port、止めたいなら --strictPort
• コンテナの外やほかの機器から開くには --host
• CRA からの移行は start→dev、build→dist、REACT_APP_→VITE_、process.env→import.meta.env の4点を押さえる
• 入口はプロジェクト直下の index.html。設定は vite.config.ts に書く

参考・出典

• Vite 公式「Getting Started」 https://vite.dev/guide/
• Vite 公式「Server Options」 https://vite.dev/config/server-options
• Vite 公式「Env Variables and Modes」 https://vite.dev/guide/env-and-mode
• React 公式ブログ「Sunsetting Create React App」 https://react.dev/blog/2025/02/14/sunsetting-create-react-app
• Create React App 公式「Available Scripts」 https://create-react-app.dev/docs/available-scripts/
• Create React App 公式「Adding Custom Environment Variables」 https://create-react-app.dev/docs/adding-custom-environment-variables/

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。