ReactTokyo 3/21 LT - Speaker Deck

ReactTokyo 3/21 LT

by Yusuke Kikuta

Embed

Start on current slide

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

TanStack Routerとの統合

Slide 8

Slide 8 text

個別ページの定義

Slide 9

Slide 9 text

個別ページの定義

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

create-viteの場合

Slide 15

Slide 15 text

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