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

そう感じたことがあるなら、あなたのプロジェクトはすでに移行のサインを出しています。create-react-appは学習用途には優秀ですが、実は開発現場ではほとんど使われなくなっています。

この記事を読み終えるころには、たった5ステップでViteへの移行が完了し、体感できるレベルで開発速度が変わります。

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

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

しかし現実は違います。

CRAの内部はWebpackというバンドラーで動いており、プロジェクトが大きくなればなるほど起動・ビルド時間が指数的に増大します。100ファイルを超えるプロジェクトになると、yarn start だけで10秒以上かかることも珍しくありません。

💡 知っておきたい事実：Reactの公式ドキュメントは2023年に更新され、現在はViteやNext.jsが推奨ツールとして掲載されています。create-react-appは公式リストから外れています。

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

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

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

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

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

移行手順：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が起動するようになります。

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

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

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

Viteの設定ファイルです。Reactプロジェクトで必要な最小限の設定はこれだけです。シンプルさに驚くはずです。

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 のままだとエラーになります。これを忘れてハマる人が多いので注意しましょう。

移行完了！動作確認

yarn start

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

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

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

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

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

公式推奨のクリーンなテンプレートが自動生成されます。新しいプロジェクトでCRAを使う理由はもうありません。

まとめ：今日やること

やること難易度
既存プロジェクトをViteに移行する★★☆
新規プロジェクトはViteで始める★☆☆
移行後の起動速度の変化に感動する★☆☆

CRAからViteへの移行は手順通りに進めれば30分もかかりません。それだけで毎日の開発体験が別物になります。

「開発ツールは"動けばいい"ではなく"ストレスがない"を基準に選ぶ時代です」

「知ってたけどずっと後回しにしてた」という人が一番多いのがこの移行です。今日やりましょう。