Create React Appが非推奨となり、これからは主にフレームワークを利用することになりそうなので軽くおさらいしてゆく

Create React Appが公式で非推奨となりました

2010年代の後半から長らくReact環境構築のデファクトとなっていた% create-react-appですが、先日（2025-01-29）に公式で非推奨となりました。

2016年頃に、webpack(+dev-server, style-loader), Babel, ESLintといったモダンフロントエンド開発で必須となる静的解析ツール+コンパイラの環境構築を誰でも簡単に構築できるようFacebookから公開されたのが初めてで、現在は

• アクティブなメンテナが不在であること
• 各フレームワークなどでそれぞれ環境構築が提供されていること

といったような理由から非推奨となったようです。

今回は、これからの代替となりそうなフレームワークやライブラリのおさらいを改めて行いたいと思います。

create-react-app is deprecated.

You can find a list of up-to-date React frameworks on react.dev
For more info see: react.dev/link/cra

This error message will only be shown once per install.

Vite

まず初めにViteのご紹介です。
ここ数年で一気に台頭してきたESモジュールのビルドツールです。% npm create vite@latestでインタラクティブに環境構築が行えます。

% npm create vite@latest

> npx
> create-vite

✔ Project name: … vite-project
✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC

純粋なReactのみの環境構築がしたい（SPAではなくUIライブラリとしてのみReactを使用したい・お好みのルーティングやキャッシュ管理ライブラリを使用したい）方は現状最も手っ取り早い方法なのかなと思います。

様々なフレームワークで利用されているので、少なくとも向こう数年の間はかなり目にすることが多くなるかと思います。

Next.js

続いてはNext.jsです。
こちらはSPAで課題となるファイルサイズの肥大化や、WebAPIの通信間で発生するセキュリティ対策をサーバサイドレンダリングやBFFアーキテクチャといった形で解決できるようなReactベースのフルスタックフレームワークとなります。

こちらも% npx create-next-app@latestの利用でインタラクティブに環境構築が行えます。

% npx create-next-app@latest

✔ What is your project named? … my-next-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
Creating a new Next.js app in /Projects/my-next-app.

Using npm.

Initializing project with template: app-tw 


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- postcss
- tailwindcss
- eslint
- eslint-config-next
- @eslint/eslintrc

• v13.4からstableとなったApp Routerで大幅に強化 & 難化されたビルドキャッシュ
• 動的 / 静的レンダリング及びこの先多分正式に採用されていくであろうPartial Pre-Renderingのようなレンダリング戦略
• React Server Component / Server ActionsといったReact v19の最新機能

上記のような内容をキャッチアップし続けられる技術力、そしてVercelをLifetime Respectして一生一緒にいてあげられる精神力が必要だというのが個人的な考えです。
全国的に利用されるような大規模なwebアプリケーションで、様々な場所から低レイテンシで利用されたいなどのニーズがある場合は特に有効な選択肢（Vercel含め）となるんじゃないかと思います。

React Router v7, Remix v2

React Router v7です。
もともとReact Routerチームが開発していたReactフレームワークでRemixがありましたが、こちらがReact v19の対応を見送る & 実質的なReact Routerフレームワークだったためにv3としてリリースされず、React Router v7として統合されることとなりました。

create-react-appとも縁が深く、2017~2019年頃からフロントエンド開発をされている方はここで作った環境にReact Routerを加えてSPA開発を行ったことも多いかと思います。

こちらも% npx create-react-router@latestでインタラクティブに・・。

% npx create-react-router@latest


         create-react-router v7.1.5

   dir   Where should we create your new project?
         ./my-react-router-app

      ◼  Using default template See https://github.com/remix-run/react-router-templates for more
      ✔  Template copied

   git   Initialize a new git repository?
         No

  deps   Install dependencies with npm?
         Yes

      ✔  Dependencies installed

  done   That's it!

         Enter your project directory using cd ./react-router
         Check out README.md for development and deploy instructions.

         Join the community at https://rmx.as/discord

React v19の新機能を見送り、Remixでいいやという方は% npx create-remix@latest

% npx create-remix@latest


 remix   v2.15.3 💿 Let's build a better website...

   dir   Where should we create your new project?
         ./my-remix-app

      ◼  Using basic template See https://remix.run/guides/templates for more
      ✔  Template copied

   git   Initialize a new git repository?
         No

  deps   Install dependencies with npm?
         Yes

      ✔  Dependencies installed

  done   That's it!

         Enter your project directory using cd ./remix-app
         Check out README.md for development and deploy instructions.

         Join the community at https://rmx.as/discord

両者の主な特徴としては先に述べたNext.jsにも見受けられる

• jQuery.ajaxやFetch APIといったクライアントサイドに依存しないデータフェッチによる表示パフォーマンスの向上
• loaderを用いた並列フェッチ処理によるRequest Waterfallの最適化（Nested Routes）
• それなのにSPA modeというクライアントサイドで動かす設定が存在するという器のデカさ

といった自分のような激浅フロントエンド開発者からすれば聖母マリアのようなReactフレームワークとなっております。
キャッチアップ少なめでフルスタックフレームワークを利用したい方、諸々の事情でSPA開発を行いたい方におすすめとなります。

TanStack Router

@tanstack/react-queryで有名なTanStackが開発しているルーティングライブラリです。
こちらはフレームワークではなく単なるルーティングライブラリのためにデプロイ時の実行環境を必要としません。

前はなかったような気がするのですが、こちらも% npm create @tanstack/router@latestの利用で構築可能です。

% npm create @tanstack/router@latest


> npx
> create-router

? Enter the project name ./tanstack-router-app
? Select a bundler vite
? Select an IDE vscode
? Open the generated project using vscode after creation? yes
✔ dependencies installed
✔ project built
Success Created tanstack-router-app at /Projects/tanstack-router-app

opening tanstack-router-app in vscode

start the development server in a terminal in vscode via:
  npm run dev

他にはなかったモジュールバンドラの選択肢が存在します。（vite, webpack, rspack）

TanStack Query & Routerの組み合わせはSPA開発において特に強力で、

• (Query) クライアントサイドでのデータフェッチに伴って起こり得る状態と副作用の管理を容易に行えるAPIの提供
• (Query) フェッチされたデータに関するサーバ側の状態やキャッシュ管理、バックグラウンドでのrevalidateをサポート
• (Router) Type-safeなナビゲーション
• (Router) File-basedルーティングとファイル自動生成による素晴らしい開発体験
• (Router) TanStack Queryなどと併用したデータのライフサイクル管理を容易にするAPIの提供

といったような、主にSPAで素晴らしい開発体験が得られます。Next.jsやReact Routerといった設計哲学がMPAと似たような考えに回帰していく中、自身を取り巻く環境やその他諸々の理由で中々フルスタックフレームワークに踏み切れない・・・という方に特におすすめな選択肢となります。

終わりに

以上、これからcreate-react-appに置き換わっていくであろうフレームワークの環境構築やちょっとした特徴をおさらいできました。
自身が直近で関わっているプロジェクトではNuxt3を利用しているので、Reactについては肌感が少し薄い部分もありますが何かの参考になれば幸いです。

最後までお読みいただき、ありがとうございました！