CRAからVite移行5ステップ｜React開発を爆速化【2026年版】

「yarn start、なんか遅くない？」

そう感じたことがあるなら、あなたのプロジェクトはすでに移行のサインを出しています。結論はシンプルで、create-react-app（CRA）からViteへの移行は5ステップ・30分で終わり、開発体験は別物になります。

CRAは学習用途には優秀でしたが、実務の現場ではほとんど使われなくなりました。この記事では、既存のReactプロジェクトをそのままViteへ移行する手順を、実際にハマりやすい落とし穴と一緒に解説します。

この記事でわかること
・CRAが「遅い」と言われる構造的な理由
・既存プロジェクトをViteへ移行する5ステップ
・移行後にハマりやすい落とし穴と対処法
・2026年時点のViteの最新バージョンとNode.js要件

create-react-appが「遅い」と言われる本当の理由

多くの駆け出しエンジニアが最初に触れるのが create-react-app（CRA）です。かつてはReact公式チュートリアルでも紹介されていたため、「これが標準なんだ」と思い込んでいる人も多いでしょう。

しかし現実は違います。

CRAの内部はWebpackというバンドラー（大量のJSファイルを1つにまとめるツール）で動いており、プロジェクトが大きくなるほど起動・ビルド時間が膨らみます。100ファイルを超える規模になると、yarn start だけで10秒以上待たされることも珍しくありません。Webpackがどういう仕組みで動いているかはWebpack+Reactの環境構築を手を動かして理解する記事で解説しています。

知っておきたい事実
・React公式ドキュメントの推奨ツールからCRAは外れ、2025年に開発終了（サンセット）が正式にアナウンスされた
・現在の公式推奨はViteなどのビルドツール、またはNext.jsなどのフレームワーク
・新規プロジェクトでCRAを選ぶ理由は2026年にはもう無い

私が参画してきた現場でも、CRA時代は「起動待ち」と「ホットリロード待ち」で1日あたり数十分を失っていました。ビルドツールの差は、積み重なると年間で数十時間の差になります。これが移行すべき最大の理由です。

Viteが「爆速」と呼ばれる理由

Viteはフランス語で「速い」を意味します。名前の通り、その速さが最大の武器です。

CRAとの違いを一言で言うと、「全部まとめてからサーバーを起動するか、必要なものだけ即座に返すか」の違いです。

CRA（Webpack）：起動時にすべてのファイルをバンドルしてからサーバーを立ち上げる
Vite：ブラウザがリクエストしたファイルだけを即座に変換して返す（ESモジュール方式）

この設計の違いだけで、開発サーバーの起動が数秒〜数十秒 → ほぼ一瞬に変わります。「保存した瞬間にブラウザへ反映される」体験は、一度味わうと戻れません。

なお、2026年7月時点の最新メジャーバージョンはVite 8です。本番ビルドがRust製バンドラー「Rolldown」に置き換わり、ビルドもさらに高速化されました。動作要件はNode.js 20.19以上、または22.12以上です。移行前に node -v でバージョンを確認しておきましょう。Nodeの切り替えにはnvmが便利です。

移行手順：5ステップで完了

では実際の移行手順です。既存のCRAプロジェクトをそのままViteに移行します。プロのコツをひとつ先に言うと、移行作業は必ず専用ブランチを切り、アプリが正常に動く状態から始めてください。移行起因の不具合と元からのバグを切り分けられなくなるのが、現場で一番よく見る失敗です。

Step 1：必要なパッケージをインストールする

yarn add -D vite @vitejs/plugin-react
yarn remove react-scripts

react-scripts（CRAの本体）を削除し、ViteとReactプラグインをdevDependenciesに追加します。

Step 2：package.json のスクリプトを書き換える

"scripts": {
  "start": "vite",
  "build": "vite build",
  "preview": "vite preview"
}

これで yarn start を実行したときにViteが起動します。

ひとつ補足すると、Viteの標準テンプレートでは開発サーバー起動コマンドは "start" ではなく "dev" が慣例です。上の例はCRAの yarn start に慣れたチームがそのまま使えるようにした書き方なので、Vite流に揃えたい場合は "dev": "vite" としてください。新しくジョインするメンバーの混乱を減らせます。

Step 3：vite.config.js をルート直下に作成する

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

export default defineConfig({
  plugins: [react()]
})

Viteの設定ファイルです。Reactプロジェクトで必要な最小限の設定はこれだけ。Webpackの長大なconfigを見てきた人ほど、このシンプルさに驚くはずです。

Step 4：index.html を修正・移動する

ファイル移動：/public/index.html → /index.html（ルート直下）

Viteはルートにある index.html を起点として動作します。CRAは public/ フォルダを参照していたので移動が必要です。

次に index.html の中身を2点修正します。

① %PUBLIC_URL% を削除する

<!-- 変更前 -->
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

<!-- 変更後 -->
<link rel="icon" href="/favicon.ico" />

%PUBLIC_URL% はCRA固有の記法です。Viteでは使えないため、シンプルなパスに書き直します。

② index.jsx の読み込みを追加する

<!-- </body>の直前に追加 -->
<script type="module" src="/src/index.jsx"></script>

CRAは index.jsx を自動で読み込んでくれていましたが、Viteでは index.html 内で明示的に指定する必要があります。

Step 5：ファイルの拡張子を変更する

App.js  →  App.jsx
index.js  →  index.jsx

ViteはJSXを含むファイルに .jsx 拡張子を要求します。.js のままだとエラーになります。JSXを含むファイルだけ変更すればOKです。

移行完了！動作確認

yarn start

サーバーが起動したら http://localhost:5173 にアクセスしてください（CRAは3000番ポートでしたが、Viteのデフォルトは5173番です）。

これまでと同じ画面が表示されれば移行成功です。起動の速さを体感してください。

移行でハマりやすい3つの落とし穴

手順自体は簡単ですが、現場で移行を何度か経験した立場から、実際に詰まりやすいポイントを挙げておきます。

① 環境変数が読めなくなる

初心者が一番ハマるのがここです。CRAの process.env.REACT_APP_XXX はViteでは動きません。プレフィックスを VITE_ に変え、import.meta.env で読むのがVite流です。

// CRA（変更前）
const apiUrl = process.env.REACT_APP_API_URL

// Vite（変更後）: .env側も VITE_API_URL にリネームする
const apiUrl = import.meta.env.VITE_API_URL

② テスト（Jest）がそのままでは動かない

CRAにはJestが同梱されていましたが、Viteには含まれません。Vite環境ではAPI互換のVitestへ乗り換えるのが定番です。Jestとほぼ同じ書き味なので、テストコードの書き換えは最小限で済みます。Jest自体の考え方はReact+Jestの入門記事が参考になります。

③ ESLint/Prettierの設定がCRA前提のまま

eslint-config-react-app はCRA前提の設定です。移行後はVite+React+TypeScript向けのESLint/Prettier構成に組み直すとキレイに収まります。ツールを1つにまとめたいならBiomeという選択肢も2026年の有力株です。

もうひとつ、地味に忘れやすいのがAPIプロキシです。CRAでは package.json の "proxy" フィールドで済んでいましたが、Viteでは vite.config.js に書き直します。

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': 'http://localhost:8000'
    }
  }
})

「移行後にAPIだけ404になる」ときは、まずここを疑ってください。

移行の判断基準：ViteかNext.jsか

「CRAをやめる」と決めたとき、実は移行先は2択あります。

Viteへ移行：SPA構成をそのまま維持できる。管理画面・社内ツール・ログイン後アプリに最適。移行コストは今回の通り最小
Next.jsへ移行：SEOや初回表示速度が重要な、公開ページ中心のサービス向け。SSR/SSGが手に入るが、ルーティングやデータ取得の書き換えが必要で移行コストは大きい

現場の判断としては、「検索流入が要らないアプリならVite、要るサービスならNext.js」でほぼ間違いありません。今のコード資産を活かして最短で開発体験を改善したいなら、まずVite移行が正解です。

補足：新規プロジェクトをViteで始めるなら

既存プロジェクトではなく、新規でViteを使いたい場合はコマンド一発で完了します。

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

公式のクリーンなテンプレートが自動生成されます（このテンプレートの起動コマンドは npm run dev です）。TypeScriptで始めるなら --template react-ts を指定しましょう。

まとめ：今日やること

CRAは公式に開発終了。新規でも既存でも、2026年に選ぶ理由はない
移行は5ステップ・30分。専用ブランチを切って一気にやる
環境変数（VITE_プレフィックス）・テスト（Vitest）・ESLint設定の3点だけ追加ケア
最新はVite 8。Node.js 20.19+ / 22.12+ を用意する

開発ツールは「動けばいい」ではなく「ストレスがない」を基準に選ぶ時代です。「知ってたけどずっと後回しにしてた」という人が一番多いのがこの移行です。今日やりましょう。

ちなみに、ViteやVitestのようなモダンな開発環境を語れるエンジニアは、転職市場でも面接での評価が一段変わります。環境構築で毎回つまずいて独学が止まりがちなら、スクールで基礎を固めてしまうのも近道ですし、すでに実務経験があるなら転職エージェントに市場価値を聞いてみると自分の現在地が分かります。学習の全体像はReact入門の学習ロードマップもあわせてどうぞ。

よくある質問（FAQ）

Q. Viteの最新バージョンとNode.jsの要件は？

2026年7月時点の最新メジャーはVite 8です。バンドラーがRust製のRolldownに置き換わり、本番ビルドが大幅に高速化されました。Node.jsは20.19以上または22.12以上が必要なので、古いNodeを使っている場合は先にアップデートしてください。

Q. 移行したら真っ白な画面になりました。原因は？

定番の原因は3つです。index.htmlに <script type="module"> の追記を忘れている、%PUBLIC_URL% が残っている、JSXを含むファイルの拡張子が .js のまま、のどれかをまず疑ってください。ブラウザの開発者ツールのConsoleを見れば、ほぼ確実に原因が特定できます。