ReactTokyo 3/21 LT

Transcript

1. create‑tsrouter‑app で実現する次世代 React SPA Vite×TanStack Router の内部構造と実 装
2. INTRODUCTION Name: YusukeKikuta Job: BlockChain dev / DeFi projectCEO NEW! Age: 19 SNS: X:＠yusuke_05092005
3. CRAの背景と課題 メンテナンス不足 カスタマイズの困難さ 起動速度の問 題 ⚙
4. create‑tsrouter‑appにフォーカス CRAの使い勝手を維持しつつ、 内部をViteとTanStack Routerで再構築した 次世代のCRA….!
5. What is create-tsrouter-app?? 1. Viteベースの高速ビルド 2. TanStack Routerとの統合 3. CLIオプションによる柔軟なカスタマイズ 4. TypeScriptと最新ツールチェーンの統合
6. Viteベースの高速ビルド • 高速起動と HMR ◦ viteのESモジュール最適化により開発サーバーを高速で構築 • プラグイン統合 ◦ vite.config.tsの中でReactプラグインに加えて TanStackRouterプラグインを使用して ルートの自動生成とコード分割を実現
7. TanStack Routerとの統合
8. 個別ページの定義
9. 個別ページの定義
10. エントリーポイントの自動生成
11. CLIオプションによる柔軟なカスタマイズ • オプション例 --template, --tailwind, -- package-manager などを指定可能で初期設定の手間の削減に繋がる
12. TypeScriptと最新ツールチェーンの統合 • 型安全な開発 ◦ TypeScroptをフル活用しているので最新ルールに合わせて最適化されている • Blome連携などが可能 ◦ フォーマッティングやリントツールとの統合オプションも用意されている。
13. create-viteとの比較 • create-viteテンプレートの場合 ◦ 基本的な ReactAppが作成されるだけ • 実際の使用感 ◦ 最初からルーティングが組み込まれてる分の利便性の高さ
14. create-viteの場合
15. まとめ • create-tsrouter-appはViteの高速ビルドと TanStack Routerの柔軟かつ型安全 な最先端の SPAツール • 個人的には create-viteよりもその利便性から開発体験が向上すると感じる ぜひ皆さんも試してください！