$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ReactTokyo 3/21 LT
Search
Yusuke Kikuta
March 21, 2025
1
1.7k
ReactTokyo 3/21 LT
Yusuke Kikuta
March 21, 2025
Tweet
Share
More Decks by Yusuke Kikuta
See All by Yusuke Kikuta
Zenncafe 1st LT
yusukekikuta0509
0
700
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Embracing the Ebb and Flow
colly
88
4.9k
Become a Pro
speakerdeck
PRO
31
5.7k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Designing for Performance
lara
610
69k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
196
70k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
355
21k
Building a Modern Day E-commerce SEO Strategy
aleyda
45
8.3k
Large-scale JavaScript Application Architecture
addyosmani
515
110k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.1k
Producing Creativity
orderedlist
PRO
348
40k
Transcript
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よりもその利便性から開発体験が向上すると感じる
ぜひ皆さんも試してください!