こんにちは!最近、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を共有していただけると嬉しいです。