Zenn
🌴

【React/CRA/TypeScript】create‑tsrouter‑app で実現する次世代React SPA

2025/03/22に公開
React
TypeScript
cra
TanStack Router
tech

登壇をしてきたよ

皆さん、こんにちは。今回は、従来のCreate React App（CRA）が抱えていた課題を背景に、「create‑tsrouter‑app」という次世代のReact SPA生成ツールについて、先日のReactTokyo MeetUP#3にて登壇してきました。そこで紹介したCRAの問題点と、それを解決するためにViteとTanStack Routerをどのように組み合わせたか、その内部構造や実装、CLIオプションについて記事にて描かせていただきます。菊田 佑輔
当日の様子
https://speakerdeck.com/yusukekikuta0509/21-lt
登壇資料

題材選定の背景

CRAは長らくReact環境構築の定番ツールとして利用されてきました。しかし、近年以下のような課題が浮き彫りになっています。

  • メンテナンス不足 & React 19 非対応
    依存関係の不整合や新APIの取り込みが滞り、最新のReactバージョンとの互換性が失われています。

  • カスタマイズの困難さ
    内部設定を変更するためにejectが必須となるため、プロジェクト全体の柔軟性が著しく低下します。

  • ビルド・起動速度の問題
    Webpackベースの仕組みにより、開発サーバーの起動やビルドに時間がかかり、現代の高速な開発要求に対応しきれません。

これらの理由から、CRAは公式に非推奨とされ、ViteやNext.js、TanStack Routerなど、よりモダンなツールへの移行が進んでいます。

create‑tsrouter‑app の技術的特徴

「create‑tsrouter‑app」は、CRAの使い勝手を維持しつつ、最新のツールチェーンであるViteと、型安全で柔軟なルーティングライブラリであるTanStack Routerを組み合わせた新たなSPA生成ツールです。ここでは、主な技術的特徴とその実装例を見ていきましょう。

1. Vite ベースの高速ビルド

  • 高速起動とHMR
    ViteのESモジュール最適化により、開発サーバーが瞬時に起動し、ホットモジュールリプレースメント（HMR）によって素早いフィードバックが得られます。

  • プラグイン統合
    vite.config.ts では、Reactプラグインに加え【TanStackRouterVite】プラグインを使用し、ルートの自動生成やコード分割をシームレスに実現しています。

2. TanStack Router との統合

ファイルベースルーティング

プロジェクトのルートは src/routes/ 配下に配置するだけで自動定義され、型安全なAPIが利用可能です。例えば、以下のようなコードでルート定義を行います。

// src/routes/__root.tsx
import { createRootRoute, Link, Outlet } from '@tanstack/react-router';
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools';

export const Route = createRootRoute({
  component: () => (
    <>
      <nav className="p-4 bg-gray-100">
        <Link to="/" className="mr-4 [&.active]:font-bold">Home</Link>
        <Link to="/about" className="[&.active]:font-bold">About</Link>
      </nav>
      <hr />
      <Outlet />
      <TanStackRouterDevtools initialIsOpen={false} />
    </>
  ),
});

個別ページの定義

各ページは createLazyFileRoute を利用して、シンプルかつ型安全に定義できます。以下はホームページとAboutページの例です。

// src/routes/index.tsx
import { createLazyFileRoute } from '@tanstack/react-router';

export const Route = createLazyFileRoute('/')({
  component: () => (
    <div className="p-4">
      <h1>Welcome to create‑tsrouter‑app!</h1>
      <p>This is the home page of our TanStack Router based app.</p>
    </div>
  ),
});

// src/routes/about.tsx
import { createLazyFileRoute } from '@tanstack/react-router';

export const Route = createLazyFileRoute('/about')({
  component: () => (
    <div className="p-4">
      <h1>About</h1>
      <p>This page explains the advantages of using create‑tsrouter‑app over traditional setups.</p>
    </div>
  ),
});

エントリーポイントの自動生成

CLIによってルートツリーが自動生成され、RouterProviderに渡されます。以下のコード例はその一例です。

// src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { createRouter, RouterProvider } from '@tanstack/react-router';
import { routeTree } from './routeTree.gen';

const router = createRouter({ routeTree });

declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router;
  }
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

3. CLI オプションによる柔軟なカスタマイズ

create‑tsrouter‑app では、CLIオプションによりプロジェクト生成時に細かな設定が自動反映されます。
例えば、以下のようなオプションが用意されています。

  • --template: ファイルベース or コードベースルーティングの選択
  • --tailwind: Tailwind CSS の導入有無
  • --package-manager: 使用するパッケージマネージャの指定

これにより、初期設定の手間を大幅に削減し、プロジェクトの柔軟性とスケーラビリティを高めることができます。

4. TypeScript と最新ツールチェーンの統合

  • 型安全な開発
    TypeScriptをフル活用しており、tsconfig.json や ESLint の設定も最新ルールに最適化されています。

  • Biome 連携
    フォーマッティングやリントツールとの統合もオプションとして用意され、チーム全体でのコード品質維持が容易です。

create‑vite との比較

従来の create‑vite テンプレートの場合、基本的なReactアプリが生成されるだけで、ルーティングやコード分割の仕組みは自前で実装する必要がありました。以下は create‑vite によるシンプルなReactアプリの例です。

// src/App.tsx (create‑viteの場合)
import React from 'react';

function App() {
  return (
    <div className="App p-4">
      <h1>Hello Vite + React!</h1>
      <p>This is a simple React app generated by create-vite.</p>
    </div>
  );
}

export default App;

実際の使用感としては：

  • create‑tsrouter‑app
    ルーティング、コード分割、開発用ツール（TanStackRouterDevtools）などが最初から組み込まれているため、SPAとしての機能がすぐに利用可能です。

  • create‑vite
    シンプルなアプリが生成されるものの、必要な機能を後から自分で追加する手間がかかり、設定や統合に時間がかかる場合があります。

このため、create‑tsrouter‑appは、最新のReact開発環境に必要な機能を網羅しており、初期設定からスケーラブルなSPAの構築が可能となっています。

まとめ

create‑tsrouter‑appは、Viteの高速ビルドとTanStack Routerの柔軟かつ型安全なルーティングを組み合わせた、React 19時代の最先端SPA生成ツールです。
実際に使用してみると、ルート自動生成やCLIによる柔軟なカスタマイズがもたらす開発体験（DX）の向上を実感できます。
最新のReactエコシステムを体感するために、ぜひ create‑tsrouter‑app をお試しください！

ご清聴ありがとうございました。

この記事が、皆さんのReact開発環境の選定やプロジェクト立ち上げの参考になれば幸いです。ご意見・ご質問はコメント欄でお待ちしております！

【参考】

Discussion

ログインするとコメントできます