こんにちは！最近、Reactプロジェクトを始める際の定番だった「Create React App（CRA）」が公式に非推奨（deprecated）になりました。長年React開発の入り口として親しまれてきたツールですが、2025年1月にFacebook（Meta）のチームが正式に非推奨宣言を行いました。

この記事では、この変更が何を意味するのか、そして代わりにViteを使ってReactプロジェクトを始める方法について、初心者にもわかりやすく解説します。

Create React Appが非推奨になった理由

CRAは長い間、Reactの学習を始めるための素晴らしいツールでした。しかし、時間が経つにつれていくつかの問題点が目立つようになりました：

開発サーバーの起動が遅い
ビルド時間が長い
設定のカスタマイズが難しい（ejectしないと内部設定を変更できない）
最新のReact（React 19）との互換性問題

GitHubのプルリクエスト#17003で、CRAの開発者たちは「本番環境での使用を推奨しない」と明言し、代わりにReact公式サイトで紹介されている代替ツールの使用を勧めています。

Viteとは？なぜ良いのか？

Vite（ヴィート、と発音します）はVue.jsの作者であるEvan You氏によって作られた、モダンなフロントエンド開発ツールです。Reactだけでなく、Vue、Svelte、Vanilla JSなど様々なフレームワークに対応しています。

Viteの主な利点：

超高速な開発サーバー: ホットモジュールリプレイスメント（HMR）が非常に速く、開発体験が格段に向上します
短いビルド時間: 本番用ビルドもCRAと比べて大幅に高速です
シンプルな設定: 必要に応じて簡単に設定をカスタマイズできます
最新技術への対応: ES Modules、React 19など最新の技術に対応しています
軽量: 必要なものだけを含むため、プロジェクトが軽量です

Viteで新しいReactプロジェクトを始める方法

それでは実際に、Viteを使ってReactプロジェクトを始める方法を見ていきましょう。コマンド一つで簡単にセットアップできます！

1. プロジェクトの作成

以下のコマンドを実行するだけです：

# npm を使う場合
npm create vite@latest my-react-app -- --template react

# または yarn を使う場合
yarn create vite my-react-app --template react

# または pnpm を使う場合
pnpm create vite my-react-app --template react

TypeScriptを使いたい場合は、reactの代わりにreact-tsテンプレートを指定します：

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

2. プロジェクトフォルダに移動

cd my-react-app

3. 依存関係のインストール

npm install
# または yarn、pnpm

4. 開発サーバーの起動

npm run dev
# または yarn dev、pnpm dev

これだけで、高速な開発サーバーが起動し、ブラウザでhttp://localhost:5173/（デフォルト）にアクセスすれば新しいReactアプリが表示されます！

Create React AppからViteへの移行

すでにCreate React Appで作ったプロジェクトがある場合、Viteへの移行は少し手間がかかりますが、それほど難しくありません。

主な手順は：

Viteプロジェクトを新規作成する
package.jsonから必要な依存関係を新しいプロジェクトに追加する
srcフォルダの内容を新しいプロジェクトにコピーする
一部のインポートパスやコードを調整する（CRAとViteでは若干の違いがある）

詳細な移行手順は必要に応じて別の記事で解説しますね！

まとめ

Create React Appが非推奨になったことは、React開発の新しい時代の始まりを意味します。Viteを使うことで：

開発速度が格段に向上する
最新のReactの機能をすぐに使える
シンプルで軽量なプロジェクト構造を維持できる

特に初心者の方にとって、Viteの方がCRAよりも使いやすいと感じるかもしれません。設定が透明で、カスタマイズも簡単なので、Reactの学習に集中できます。

これからReactを学び始める方、新しいReactプロジェクトを始める方には、ぜひViteを試してみることをおすすめします！

みなさんのViteでの開発体験はいかがですか？コメントで感想やTipsを共有していただけると嬉しいです。

参考リンク