はじめに
「とりあえずReactを触ってみたい」——そう思ったとき、真っ先に候補に挙がっていたツールをご存知でしょうか。それがCreate-React-App（通称CRA）です。2017年の登場以来、複雑な設定を一切気にせずReactの開発環境を整えられるツールとして、非常に多くの開発者に使われてきました。
ただし、ここで正直にお伝えしなければならないことがあります。CRAは2025年2月、React公式チームによって**非推奨（Deprecated）**であることが正式にアナウンスされました。この記事では、CRAがこれまで果たしてきた役割を振り返りながら、なぜ非推奨になったのか、そして今後どのツールへ移行すべきかを整理していきます。
Create-React-Appとは
Create-React-Appは、Facebook（現Meta）が公開していたReactプロジェクトのスキャフォールディングツールです。Webpack・Babel・ESLintといった設定をすべて内部に隠蔽し、コマンド一つでビルド環境が整った状態のReactアプリケーションを生成できることが最大の特徴でした。
しかし2025年2月14日、React公式は次のように表明しました。
Create React Appは2017〜2021年頃においてReactプロジェクトを立ち上げるための重要なツールの一つでしたが、現在は長期停滞（long-term stasis）状態にあります。
つまり、動かなくなったわけではないものの、今後大きな機能追加やメンテナンスは行われず、新規プロジェクトでの採用は推奨されない立場になったということです。
主な特徴（歴史的な役割）
- ゼロコンフィグ -
npx create-react-app一つでWebpack・Babelの設定を意識せずに開発を始められた - エコシステムの入り口 - 多くのReact入門書やチュートリアルの標準環境として採用され、学習コストを大きく下げた
ejectによる拡張性 - 標準設定で足りない場合はejectコマンドで内部設定を展開し、自由にカスタマイズできた
なぜ非推奨になったのか
主な理由は次の3点に整理できます。
- 長期間メンテナンスが停止していた - 過去2年以上、目立った機能アップデートがなされていませんでした
- React 19との相性問題 - 内部依存関係の古さから、React 19環境ではそのままでは動作しない不具合が報告されています
- ビルド速度の限界 - 内部で使用しているWebpackは、Vite・esbuild・SWCといった近年の高速バンドラーと比べて起動・ビルドが遅く、開発体験の面で見劣りするようになりました
インストール
現時点でもコマンド自体は実行可能ですが、新規プロジェクトでの利用は推奨されません。既存プロジェクトの挙動を確認する目的などで使う場合は、以下のコマンドで生成できます。
# npxを使う場合
npx create-react-app my-app
# npmでグローバルインストールする場合（非推奨）
npm install -g create-react-app
create-react-app my-app
実行するとreact・react-dom・react-scriptsが依存関係としてインストールされ、src/App.jsなどの雛形ファイルが生成されます。
基本的な使い方
生成されたプロジェクトの構成はシンプルです。
my-app/
├── public/
│ └── index.html
├── src/
│ ├── App.js
│ └── index.js
└── package.json
src/App.jsはごく普通のReactコンポーネントとして書けます。
// src/App.js
import { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
return (
<div className="App">
<h1>Create-React-Appの動作確認</h1>
<p>カウント: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}
export default App;
# 開発サーバーの起動
npm start
# 本番用ビルド
npm run build
npm startで開発サーバーが立ち上がり、npm run buildでWebpackによる最適化済みの静的ファイルがbuild/ディレクトリに出力されます。この体験自体は非常にシンプルで、CRAが長年支持されてきた理由がよく分かります。
実践的なユースケース
現在CRAと向き合う開発者が直面するのは、「新しく作る」ではなく「既存プロジェクトをどうするか」という判断です。代表的なケースを見てみましょう。
ケース1: 既存のCRAプロジェクトを保守する
すぐに移行できない事情がある場合、当面はCRAのまま保守を続けることも選択肢です。ただしセキュリティパッチが提供されない点は踏まえ、依存パッケージの脆弱性はnpm auditなどで定期的に確認しておくことをおすすめします。
npm audit
ケース2: Viteへ移行する
React公式もベースツールとして推奨しているのがViteです。既存のCRAプロジェクトからの移行は、大まかに次のステップで進められます。
# 新しいVite + Reactプロジェクトを作成
npm create vite@latest my-app -- --template react
cd my-app
npm install
その後、既存のsrc/配下のコンポーネントをそのままコピーし、環境変数名をREACT_APP_からVITE_プレフィックスに書き換える、public/index.htmlの記述をVite用に調整するといった作業を行えば、多くの場合は問題なく移行できます。
ケース3: フルスタックが必要ならNext.jsへ
SEOやサーバーサイドレンダリングが必要なプロダクトであれば、Next.jsへの移行がより適した選択になります。ルーティングやデータフェッチの仕組みごと刷新する必要はありますが、長期的なメンテナンス性を考えると有力な選択肢です。
まとめ
Create-React-Appは、Reactの学習・開発の敷居を大きく下げ、エコシステムの発展に貢献してきたツールです。しかし2025年2月に公式から非推奨が発表されて以降、新規プロジェクトでの採用は推奨されなくなりました。
- 新規プロジェクトではViteやNext.jsなど、公式が推奨する後継ツールを選ぶこと
- 既存のCRAプロジェクトは、すぐに動かなくなるわけではないものの、セキュリティ面のリスクを踏まえて計画的な移行を検討すること
すでにCRAで動いているプロジェクトを抱えている方は、この記事で紹介したViteへの移行手順を参考に、少しずつ次のステップへ進んでみてはいかがでしょうか。