Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
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.6k
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
670
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Music & Morning Musume
bryan
46
6.9k
GitHub's CSS Performance
jonrohan
1032
470k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
Building Applications with DynamoDB
mza
96
6.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Designing for humans not robots
tammielis
254
26k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
640
Embracing the Ebb and Flow
colly
88
4.9k
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よりもその利便性から開発体験が向上すると感じる
ぜひ皆さんも試してください!