create‑tsrouter‑app で実現する次世代 React SPA Vite×TanStack Router の内部構造と実 装

INTRODUCTION Name: YusukeKikuta Job: BlockChain dev / DeFi projectCEO NEW! Age: 19 SNS: X:＠yusuke_05092005

CRAの背景と課題 メンテナンス不足 カスタマイズの困難さ 起動速度の問 題 ⚙

create‑tsrouter‑appにフォーカス CRAの使い勝手を維持しつつ、 内部をViteとTanStack Routerで再構築した 次世代のCRA….!

What is create-tsrouter-app?? 1. Viteベースの高速ビルド 2. TanStack Routerとの統合 3. CLIオプションによる柔軟なカスタマイズ 4. TypeScriptと最新ツールチェーンの統合

Viteベースの高速ビルド ● 高速起動と HMR ○ viteのESモジュール最適化により開発サーバーを高速で構築 ● プラグイン統合 ○ vite.config.tsの中でReactプラグインに加えて TanStackRouterプラグインを使用して ルートの自動生成とコード分割を実現

TanStack Routerとの統合

個別ページの定義

個別ページの定義

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

CLIオプションによる柔軟なカスタマイズ ● オプション例 --template, --tailwind, -- package-manager などを指定可能で初期設定の手間の削減に繋がる

TypeScriptと最新ツールチェーンの統合 ● 型安全な開発 ○ TypeScroptをフル活用しているので最新ルールに合わせて最適化されている ● Blome連携などが可能 ○ フォーマッティングやリントツールとの統合オプションも用意されている。

create-viteとの比較 ● create-viteテンプレートの場合 ○ 基本的な ReactAppが作成されるだけ ● 実際の使用感 ○ 最初からルーティングが組み込まれてる分の利便性の高さ

create-viteの場合

まとめ ● create-tsrouter-appはViteの高速ビルドと TanStack Routerの柔軟かつ型安全 な最先端の SPAツール ● 個人的には create-viteよりもその利便性から開発体験が向上すると感じる ぜひ皆さんも試してください！