Vite とは？Create React App の代わりに React を始める方法【2026年版】

Vite（ヴィート）は、React などの Web アプリを作るときに使う、開発用のサーバーと、公開用のファイルを作る機能（ビルド）をまとめた道具です。React の公式ブログは、2025年2月14日に Create React App（CRA）を「新しいアプリでは非推奨」にしました。非推奨とは、新しく使うことは勧めないという意味です。React 公式は、新しいアプリならまずフレームワークから始めることを勧めています。フレームワークを使わずにゼロから始めるときは、Vite のようなビルドツールから始める、と書いています。

この記事は、これから React を始める人と、CRA で作ったプロジェクトを持っている人に向けて、Vite が何をする道具か、CRA がどうなったか、Vite で React のプロジェクトを作る手順、必要な Node.js の版を説明します。版は2026年10月10日時点で、Vite 8.3.4・create-vite 9.2.1・React 19.3.0 です。コマンドの出力例は、macOS で Node.js 24.21.0 を使って取ったものです（CRA の警告と、範囲の外の例は Node.js 21.7.1）。

先に注意が1つあります。Vite は Node.js 20.19 以上か 22.12 以上を求めます。一方で、Node.js 20 は2026年4月30日にサポートが終わっています。くわしくは「Vite に必要な Node.js の版は？」の節にまとめました。

Vite とは？何をする道具？

Vite は、今の Web のプロジェクトの開発を、速く軽くするためのビルドツールです。ビルドとは、書いたコードをまとめて、公開用のファイルを作ることです。名前はフランス語で「速い」という意味の単語で、読みは /viːt/（日本語版の公式文書では「ヴィート」）です。

Vite は、大きく2つの部分でできています。

• 開発サーバー: コードを直しながら、ブラウザーで動きを見るためのサーバーです。ネイティブの ES モジュール（ESM）の上で動き、とても速い HMR などを備えています
• ビルドのコマンド: Rolldown でコードをまとめ、本番用に最適化した静的なファイル（HTML・JavaScript・CSS など、サーバーで処理しなくてよいファイル）を出します

ESM とは、JavaScript のファイルを import で読み込み合う仕組みのことです。ESM と CommonJS の違いは、こちらの記事で説明しています。

出典: Vite 公式: Getting Started

開発サーバーは何が速い？

Vite 公式の説明（Why Vite）によると、考え方は次のとおりです。

• あまり変わらない依存（ライブラリ）は、速い道具で一度だけ先にまとめておきます
• よく変わる自分のコードは、ブラウザーが要求したときに、ネイティブの ESM で1ファイルずつ変換して渡します。ブラウザーはいまのページに要るものだけを読み込みます

Vite 公式（Why Vite の The Origins の節）は、この分け方で開発サーバーの起動がアプリの大きさによらずほぼすぐになった、と説明しています。

HMR（ホットモジュールリプレースメント）とは、ファイルを直したときに、ページ全体を読み込み直さず、そのモジュールだけをブラウザーで差し替える仕組みです。React 用の HMR（React Fast Refresh）は Vite が公式に組み込んでいて、create-vite のひな形で作れば最初から設定されています。

出典: Vite 公式: Why Vite・Vite 公式: Features（HMR）

本番用のビルドは、なぜ要る？

開発中は、まとめない ESM のままでも速く動きます。しかし公式は、本番にそのまま出すと、入れ子の import のせいでネットワークの往復が増えて効率が悪い、と説明しています。そのため、本番用にはコードをまとめる（バンドルする）ことが、いまも要ります。

昔の Vite は、開発では esbuild、本番のビルドでは Rollup という2つの道具を使っていました。Vite 8（2026年3月12日）からは、Rust で書かれた Rolldown 1つにまとめています。Vite 8 の発表記事は、これでビルドが最大 10〜30 倍速くなる、と書いています。発表では、ベンチマークで Rollup より 10〜30 倍速く、esbuild と同じくらいだとしています（Vite 自身の発表の数です）。

出典: Vite 公式: Why Vite（A Unified Toolchain）・Vite 8.0 is out!

React と TypeScript はどう扱う？

• .jsx と .tsx のファイルは、設定なしで使えます（JSX の変換は Oxc Transformer が行います）
• React のプロジェクトでは、公式のプラグイン @vitejs/plugin-react を使います。開発中の Fast Refresh と、自動の JSX ランタイムを有効にします
• Vite は .ts のファイルを JavaScript に変換するだけで、型チェックはしません。型チェックは、エディタとビルドの手順に任せる前提です

最後の点は、あとで出てくる npm run build が tsc -b && vite build になっている理由です。

出典: Vite 公式: Features（JSX・TypeScript）・@vitejs/plugin-react の README

Vite を土台にしている道具

Vite 公式は、Nuxt・SvelteKit・Astro・React Router などが Vite を土台に選んだと書いています。Laravel や Ruby on Rails も、フロントエンドの部分に Vite を組み込んでいます。

出典: Vite 公式: Why Vite

Create React App はどうなった？

Create React App（CRA）は、複数の道具を1つの推奨の設定にまとめた、React のアプリを作る道具です。React の公式ブログによると、CRA を出した2016年には、新しい React のアプリを作るはっきりした方法がありませんでした。CRA は、この問題を、複数の道具を1つの推奨の設定にまとめることで解きました。

2025年2月14日に、新しいアプリでは非推奨になった

React の公式ブログ「Sunsetting Create React App」（2025年2月14日）は、新しいアプリでの CRA を非推奨にし、既存のアプリには、フレームワークか、Vite・Parcel・Rsbuild のようなビルドツールへ移ることを勧めました。理由として挙げているのは、次の2つです。

• CRA には今、活動している保守担当がいない
• 同じ問題をすでに解いているフレームワークが、多くある

CRA の限界として、公式は「始めるのは簡単だが、高い性能の本番アプリを作るのが難しい制約がいくつかある」と書いています。例として、ルーティング（画面の切り替え）・データの取得・コード分割（読み込みを分ける仕組み）について、CRA は特定の仕組みを持っていない、と説明しています。

出典: React 公式ブログ: Sunsetting Create React App

今の CRA の状態

同じ公式ブログは、CRA は「保守だけの状態（maintenance mode）で動き続ける」と書いています。React 19 で動く新しい版も出した、とあります。また、CRA の Web サイトと GitHub にも、非推奨の表示が付きました。

CRA の README は、CRA を次のように説明しています。2017〜2021 年に React のプロジェクトを始める主な道具の一つだったが、今は長い停止状態にある。チュートリアルの途中なら続ける価値はあるが、CRA で本番のアプリを始めることは勧めない。

つまり、公式の言い方は「廃止」でも「使えない」でもなく、「新しいアプリには勧めない。保守だけで動き続ける」です。

出典: CRA の GitHub（README）

新しく作ろうとすると警告が出る

発表の日から、CRA で新しいアプリを作ろうとすると、非推奨の警告が出ます。警告は、1回のインストールにつき1回だけです。npx [email protected] --version を流したときの出力は、次のとおりです（macOS・Node.js 21.7.1・npm 10.5.0。プロジェクトは作らず、版の表示だけ。npm WARN deprecated の行は省きました）。

create-react-app is deprecated.

You can find a list of up-to-date React frameworks on react.dev
For more info see:https://react.dev/link/cra

This error message will only be shown once per install.
5.1.0

文の中では「error message」と書かれていますが、終了コードは 0 で、そのまま版を表示しました。この記事では「警告」と呼びます。

いまの版

2026年10月10日時点の npm の情報は、次のとおりです（公開日は UTC）。

パッケージ	最新の版	公開日
create-react-app（CRA を作るコマンド）	5.1.0	2025年2月15日
react-scripts（プロジェクトに入る本体）	5.0.1	2022年4月12日

react-scripts 5.0.1 が対応を宣言している TypeScript は、3 系と 4 系までです。TypeScript の最新は 7.0.2 です。

出典: npm: create-react-app・npm: react-scripts・npm: typescript

React の公式が今勧めている始め方は？

CRA の代わりに何で始めるかについて、React 公式の「Creating a React App」の頁は、新しいアプリやサイトを作るなら、まずフレームワークから始めることを勧めています。Vite は、その次の「ゼロから作る」側の選択肢です。

勧められているフレームワーク

フレームワーク	作るコマンド	保守している所
Next.js（App Router）	npx create-next-app@latest	Vercel
React Router（v7）	npx create-react-router@latest	Shopify
Expo（ネイティブアプリ向け）	npx create-expo-app@latest	Expo 社

ほかに、TanStack Start（ベータ）と RedwoodSDK も紹介されています。

「フレームワークだとサーバーが要るのでは」と思うかもしれません。公式は、フルスタックのフレームワークでもサーバーは必須ではない、と書いています。どれもクライアントだけの描画（CSR）・SPA・静的サイト生成（SSG）に対応していて、CDN や静的ホスティングに置けます。SPA（シングルページアプリ）とは、1つの HTML の中で、JavaScript が画面を切り替えるアプリのことです。

React 公式の言い方では、ビルドツール・描画・ルーティング・データの取得・コード分割をまとめた道具を「フレームワーク」と呼びます。目安として、公式は「アプリにルーティングが要るなら、たぶんフレームワークを使うほうがよい」と書いています。

出典: React 公式: Creating a React App・React 公式ブログ（フレームワークを勧める理由と目安）

フレームワークを使わずに、Vite で始めるのは？

React 公式は、フレームワークを使わずにゼロから始めるのは、次のどれかのときだとしています。

• 既存のフレームワークに合わない制約がある
• 自分でフレームワークを作りたい
• React の基本を学びたい

その場合は、Vite・Parcel・Rsbuild のようなビルドツールから始めます。Vite のコマンドは、公式の頁に載っています。

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

公式は、この道について次の注意も書いています。

• ゼロから作る道は、自分用のフレームワークを作るのとほぼ同じです。あとで SSR（サーバー側の描画）・SSG・React Server Components が要るようになったら、自分で作ることになります
• Vite のようなビルドツールで始めると、クライアントだけの SPA から始まり、ルーティング・データの取得・スタイルの仕組みは入っていません。公式が挙げる例は、ルーティングが React Router・TanStack Router、データの取得が TanStack Query・SWR・RTK Query（GraphQL なら Apollo・Relay）です

なお、Vite は React 公式が勧めるフレームワークの一つ、React Router のビルドツールとしても使われています。

出典: React 公式: Build a React App from Scratch

Vite で React（TypeScript）のプロジェクトを作るには？

React 公式のコマンドをそのまま使います。先に、必要な Node.js の版を満たしているか確かめてください（次の節）。

作るコマンド

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

my-app はプロジェクト名（フォルダ名）で、好きな名前に変えられます。react-ts は、TypeScript の React のひな形です。npm 7 以降では、--template の前に -- が要ります。

作ったときの出力は、次のとおりです（create-vite 9.2.1・macOS・Node.js 24.21.0。Scaffolding project in … の行のパスと、> で始まる行は省きました）。このときは端末ではない環境で流したので、質問は出ませんでした。

$ npm create vite@latest my-app -- --template react-ts
…
└  Done. Now run:

  cd my-app
  npm install
  npm run dev

npm create vite@latest は、create-vite という道具を取ってきて動かすコマンドです。create-vite が、プロジェクトのひな形を作ります。--template を付けずに npm create vite@latest だけを流すと、質問に答える形で作れます。質問は、create-vite 9.2.1 のソースによると、次の順です。

1. Project name:（プロジェクト名）
2. Select a framework:（フレームワーク）
3. Select a variant:（React なら TypeScript・TypeScript + React Compiler・JavaScript・JavaScript + React Compiler など）
4. Which linter to use?（Oxlint か ESLint。React のひな形のとき）
5. Install with npm and start now?（依存を入れて、開発サーバーまで起動するか）

質問の画面そのものは、この記事では確かめていません。

npm 以外の道具で作る

Vite 公式の頁には、npm 以外の道具のコマンドも載っています。npm・yarn・pnpm の違いは、こちらの記事で説明しています。

道具	コマンド
npm	npm create vite@latest
Yarn	yarn create vite
pnpm	pnpm create vite
Bun	bun create vite
Deno	deno init --npm vite

プロジェクト名とひな形をコマンドで指定することもできます。npm 以外の例として、Vite 公式は pnpm の pnpm create vite my-vue-app --template vue を載せています（-- は要りません）。この記事で出力まで確かめたのは、npm だけです。

出典: Vite 公式: Getting Started（Scaffolding Your First Vite Project）

選べるひな形とオプション

React 用のひな形は4つあります。

ひな形	中身
react	JavaScript
react-ts	TypeScript
react-compiler	JavaScript と React Compiler
react-compiler-ts	TypeScript と React Compiler

create-vite 9.2.1 の --help に出るオプションは、次のとおりです。

オプション	意味
-t, --template	使うひな形を指定する
-i, --immediate	依存を入れて、開発サーバーまで起動する
--eslint	React のひな形で、Oxlint の代わりに ESLint を使う
--overwrite	作る先のフォルダが空でないとき、中身を消して作る
--interactive / --no-interactive	質問する／しないを決める

プロジェクト名に . を渡すと、今のフォルダに作ります。--overwrite は、フォルダの中身を消すので、使う前に何が入っているかを確かめてください。

できあがるもの

react-ts のひな形でできるファイルは、次のとおりです（node_modules を入れる前）。

.gitignore
.oxlintrc.json
README.md
index.html
package.json
public/favicon.svg
public/icons.svg
src/App.css
src/App.tsx
src/assets/hero.png
src/assets/react.svg
src/assets/vite.svg
src/index.css
src/main.tsx
tsconfig.app.json
tsconfig.json
tsconfig.node.json
vite.config.ts

package.json の scripts と、type の部分は次のとおりです。

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

vite.config.ts は、React のプラグインを入れただけの短いものです。

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

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

CRA との大きな違いは、index.html の場所です。Vite では、index.html が public の中ではなく、プロジェクトの直下にあって、アプリの入り口になります。ひな形の index.html には、<script type="module" src="/src/main.tsx"></script> と書かれています。index.html の中の URL は自動で直るので、CRA の %PUBLIC_URL% のような特別な書き方は要りません。

出典: Vite 公式: Getting Started（index.html and Project Root）

入る版と、TypeScript・リンターのこと

2026年10月10日に npm install で入った版は、次のとおりです（Node.js 24.21.0・npm 11.19.0）。package.json では ^ や ~ を付けた範囲で書かれているので、入る版は日によって変わります。

パッケージ	入った版
vite	8.3.4
react・react-dom	19.3.0
@vitejs/plugin-react	6.1.2
typescript	6.0.3
oxlint	1.87.0
@types/react	19.3.0

注意したいのは、TypeScript が 7 ではなく 6.0 系であることです。create-vite 9.2.1 の react-ts は、typescript を ~6.0.2 で入れます。TypeScript 7 に上げる話は、TypeScript 7 の記事で説明しています。

リンター（コードの書き方の誤りを調べる道具）は、react-ts のひな形では既定で Oxlint です。npm run lint で動き、ひな形のままだと次のように出ました（> で始まる行と時間の行は省きました）。ESLint を選んだ場合は、この記事では流していません。

$ npm run lint
Found 0 warnings and 0 errors.

Vite に必要な Node.js の版は？

Vite 公式は、Node.js 20.19 以上（20 系）か、22.12 以上が要る、と書いています。ひな形によっては、もっと新しい Node.js が要ることもあるので、パッケージマネージャーが警告を出したら上げる、とも書いています。npm のパッケージに書かれた対応の範囲も同じ ^20.19.0 || >=22.12.0 です（vite 8.3.4・create-vite 9.2.1・@vitejs/plugin-react 6.1.2 で確かめました）。

この範囲は Vite 7 のときと同じです。Vite 公式によると、この範囲なら Node.js がフラグなしで require(esm) に対応していて、Vite を ESM だけで配れるからです。

Node.js 20 のサポートは終わっている

ここで、Vite の要件と、Node.js 自身の予定を並べます。Node.js リリース作業部会の予定表では、2026年10月10日時点で次のとおりです。

Node.js の系	予定表の内容	最新の版
20	2026年4月30日でサポート終了	20.20.2（2026年3月24日）
22	LTS（長期サポート版）。保守期で、2027年4月30日まで	22.23.3（2026年9月23日）
24	LTS。2026年10月20日から保守期で、2028年4月30日まで	24.21.0（2026年9月7日）
26	2026年10月28日に LTS になる予定	26.11.1（2026年10月7日。まだ LTS ではない）

Vite の要件の文だけを読むと、20.19 でよさそうに見えます。しかし、20 系は2026年4月30日にサポートが終わっています。20 系で動くかどうかは、この記事では 20 系で流していないので、確かめていません。新しく入れるなら、LTS の 22 か 24 から選ぶのが、予定表から言えることです。

奇数の版（21・23・25 など。LTS にならない版）については、Vite 公式は「CI では試していないが、サポートが終わる前なら動くはず」と書いています。Node.js 21 は2024年6月1日にサポートが終わっています。

出典: Vite 公式: Getting Started（Compatibility Note）・Vite 8.0 is out!（Node.js Support）・Vite 公式: Releases・Node.js Release の schedule.json・Node.js の index.json

範囲の外の Node.js で流すとどうなる？

範囲の外の Node.js 21.7.1（npm 10.5.0・macOS）で流した結果は、次のとおりです。比べるために、Node.js 24.21.0 では同じ手順がすべて通りました（ひな形の作成・npm install・npm run dev・npm run build・npm run preview・npm run lint）。

手順	Node.js 21.7.1 の結果
npm create vite@latest my-app -- --template react-ts --no-interactive	ひな形はできた。EBADENGINE の警告が出た
npm install	終了コード 0。vite・rolldown・@vitejs/plugin-react・oxlint で EBADENGINE の警告が出た
npm run dev	止まった。Cannot find native binding
npm run build	tsc -b は通ったが、vite build で同じエラーで止まった

EBADENGINE は、パッケージが求める Node.js の版と、今の版が合わないという警告です。このとき、rolldown の macOS 用の部品（@rolldown/binding-darwin-arm64）が入っていませんでした。エラーの文は次のとおりです（途中は省きました）。

Error: Cannot find native binding. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try `npm i` again after removing both package-lock.json and node_modules directory.

エラーの文は npm の不具合を疑うよう案内していますが、この例では Node.js の版が範囲の外でした。部品が入らなかった仕組みまでは、npm の文書で確かめていません。npm create vite@latest や npm run dev でつまずいたら、先に node -v で版を見てください。

npm run dev・build・preview は何をする？

Vite のひな形には、よく使う3つのコマンドがあります。

コマンド	何をする	見る場所
npm run dev	開発サーバーを起動する（vite コマンドを動かす。vite の別名は vite dev・vite serve）	http://localhost:5173/
npm run build	本番用にビルドする。react-ts のひな形では、先に tsc -b で型チェックをしてから vite build を流す	dist フォルダにできる
npm run preview	ビルドしたものを、手元で見る	http://localhost:4173/

出典: Vite 公式: Getting Started（Command Line Interface）

npm run dev（開発サーバー）

npm run dev を流すと、開発サーバーが起動して、次のように表示されます（Vite 8.3.4・Node.js 24.21.0。起動にかかった時間の行と、> で始まる行は省きました）。

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

ブラウザーで http://localhost:5173/ を開くと、アプリが見られます。既定のポートは 5173 です。そのポートがすでに使われていると、Vite は次の空いたポートを自動で試します。自動で次のポートに移らず止めたいときは、server.strictPort を true にします。

開発サーバーが返す index.html には、React の Fast Refresh（/@react-refresh）と、Vite のクライアント（/@vite/client）が差し込まれていました。ブラウザーの画面での動きや、HMR でモジュールが差し替わる様子までは、この記事では確かめていません。

開発サーバーから API を呼んで CORS エラーが出たときの考え方は、CORS エラーの記事で説明しています。

出典: Vite 公式: server.port・Vite 公式: server.strictPort

npm run build（本番用のビルド）

npm run build を流すと、dist フォルダに本番用のファイルができます。出力先の既定は dist で、build.outDir で変えられます。Vite 公式は、この dist フォルダを好きな置き場に置けば公開できる、と書いています。

ひな形で流すと、dist の中は index.html と、assets フォルダ（JavaScript・CSS・画像）、favicon.svg、icons.svg でした。assets のファイル名には、英数字の文字列が付きます。

react-ts のひな形の build は、tsc -b && vite build です。Vite が型チェックをしないので、先に TypeScript で型を調べ、誤りがなければ Vite でビルドします。

出典: Vite 公式: build.outDir・Vite 公式: Deploying a Static Site

npm run preview（ビルドしたものを見る）

npm run preview は、dist のファイルを配る手元の静的なサーバーを起動します。既定のポートは 4173 で、ひな形では次のように表示されました（> で始まる行は省きました）。

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

Vite 公式は、「本番のサーバーとして使ってはいけない。そのために作られていない」と書いています。公開前に、ビルドしたものを手元で見るためのものです。

出典: Vite 公式: Deploying a Static Site（Testing the App Locally）・Vite 公式: vite preview

環境変数は VITE_ で始める

Vite は、環境変数を import.meta.env で読めるようにします。ブラウザーで動くコードに出るのは、VITE_ で始まる変数だけです。

⚠ VITE_ の値は、ビルドのときにコードの中に埋め込まれます。API キーのような秘密を入れてはいけません。

読み込まれる .env のファイルは、次のとおりです。

ファイル	読み込まれる場面
.env	いつも読む
.env.local	いつも読む。git には入れない
.env.[mode]	指定したモードのときだけ
.env.[mode].local	指定したモードのときだけ。git には入れない

ひな形の .gitignore には *.local が入っています。.env の読み込みの動きは、この記事では流していません。

出典: Vite 公式: Env Variables and Modes

CRA から Vite に移るときに変わるところは？

先に大事なことを書きます。Vite の公式文書には、Create React App からの移行手順がありません。React 公式のブログは、既存のアプリがビルドツールへ移るときのガイドとして、Vite・Parcel・Rsbuild の3つの「CRA 移行ガイド」を挙げています。しかし、その「Vite」のリンク先は、Vite の公式ではなく、個人のブログです。そのため、この記事では「公式の移行手順」としては紹介しません。

React 公式が、既存のアプリをクライアントだけの SPA としてフレームワークへ移すガイドとして挙げているのは、Next.js・React Router・Expo の3つです。どのガイドも、リンク先の中身はこの記事では読んでいません。

出典: React 公式ブログ: How to migrate to a build tool

CRA と Vite の文書を並べると

次の表は、手順ではありません。CRA の文書と、Vite の文書（と、この記事で見た react-ts のひな形）に、それぞれ書かれていることを並べたものです。CRA の側は、この記事では流していません。

項目	CRA の文書	Vite（react-ts のひな形）
開発サーバーを起動する	npm start。http://localhost:3000	npm run dev。http://localhost:5173/
ビルドの出力先	build フォルダ	dist フォルダ
index.html の場所	public/index.html。src/index.js が入り口	プロジェクトの直下。%PUBLIC_URL% は要らない
環境変数	REACT_APP_ で始まる変数を process.env で読む	VITE_ で始まる変数を import.meta.env で読む
要る Node.js	14 以上	20.19 以上か 22.12 以上（Vite 8）
TypeScript	react-scripts 5.0.1 が対応を宣言しているのは 4 系まで	ひな形は 6.0 系
TypeScript のひな形を作る	npx create-react-app my-app --template typescript（流すと非推奨の警告が出る）	npm create vite@latest my-app -- --template react-ts

出典: CRA 公式: Getting Started・CRA 公式: Available Scripts・CRA 公式: Deployment・CRA 公式: Adding Custom Environment Variables

表にあるとおり、環境変数の名前（REACT_APP_ と VITE_）と読み方（process.env と import.meta.env）は違います。ファイルの書き換え方など、移行の細かい手順は、Vite の公式文書に書かれていないので、この記事では扱いません。

よくある質問

Vite の読み方は？

/viːt/ で、日本語版の Vite 公式文書は「ヴィート」と書いています。名前はフランス語で「速い」を意味する単語です。

Create React App は非推奨になった？もう使えない？

非推奨になりました。ただし、公式は「使えない」とは書いていません。React 公式ブログは、2025年2月14日に、新しいアプリでの CRA を非推奨にしました。CRA は保守だけの状態で動き続ける、とも書いています。CRA の README は、チュートリアルの途中なら続ける価値はあるが、CRA で本番のアプリを始めることは勧めない、と書いています。くわしくは「Create React App はどうなった？」の節にあります。

Vite と Next.js の違いは？どっちを使う？

役割が違います。React 公式は、Next.js を、新しいアプリを始めるために勧めるフレームワークの一つとして挙げています。Vite は、開発サーバーとビルドの道具（ビルドツール）です。React 公式は、まずフレームワークから始めることを勧めています。ゼロから作る人のために、Vite のようなビルドツールから始める道も案内しています。目安として、公式は「アプリにルーティングが要るなら、たぶんフレームワークを使うほうがよい」と書いています。くわしくは「React の公式が今勧めている始め方は？」の節にあります。

npm create vite@latest でエラーになるのは？

まず node -v で Node.js の版を確かめてください。Vite 8 は、20.19 以上か 22.12 以上を求めます。範囲の外の Node.js 21.7.1 では、ひな形は作れましたが、npm run dev と npm run build が Cannot find native binding で止まりました。そのほかの原因は、この記事では確かめていません。くわしくは「Vite に必要な Node.js の版は？」の節にあります。

vite preview とは？npm run dev と何が違う？

npm run dev は、コードを直しながら見るための開発サーバーです。npm run preview は、npm run build で作った dist の中身を、手元の http://localhost:4173/ で見るためのものです。公式は、preview を本番のサーバーとして使ってはいけない、と書いています。

まとめ

• Vite は、開発サーバー（ネイティブの ESM、HMR）と、本番用にまとめるビルドの2つでできたビルドツール。Vite 8 からは、まとめる道具が Rolldown 1つになった
• Create React App は、2025年2月14日に新しいアプリでは非推奨になった。保守だけの状態で動き続けるが、本番のアプリを CRA で始めることは勧められていない
• React 公式が新しいアプリに勧めるのは、まずフレームワーク。ゼロから作るなら、Vite のようなビルドツールから始める
• React と TypeScript のプロジェクトは、npm create vite@latest my-app -- --template react-ts で作る。npm 7 以降は --template の前に -- が要る
• Vite 8 は Node.js 20.19 以上か 22.12 以上が要る。ただし Node.js 20 は2026年4月30日にサポートが終わっている
• npm run dev は開発、build は本番用の dist、preview は手元で見るだけ（本番には使わない）。環境変数は VITE_ で始め、秘密は入れない
• Vite の公式文書に、CRA からの移行手順は無い。CRA と Vite の違いは、それぞれの文書を並べて確かめる

参考資料

• Vite 公式: Getting Started
• Vite 公式: Why Vite
• Vite 公式: Features
• Vite 公式: Deploying a Static Site
• Vite 公式: Env Variables and Modes
• Vite 公式: Releases
• Vite 8.0 is out!
• React 公式ブログ: Sunsetting Create React App
• React 公式: Creating a React App
• React 公式: Build a React App from Scratch
• Create React App の GitHub（README）
• CRA 公式: Getting Started
• @vitejs/plugin-react の README
• Node.js Release の schedule.json
• npm: vite

※この記事は、公式の資料をもとに AI（Claude）で下書きし、2026年10月10日時点の公式の資料と照らして確かめてから公開しています。誤りに気づいたらお問い合わせからお知らせください。