1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Create React Appが非推奨になった件について

Posted at

こんにちは!最近、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の主な利点:

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

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への移行は少し手間がかかりますが、それほど難しくありません。

主な手順は:

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

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

まとめ

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

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

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

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

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

参考リンク

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?