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
React開発をシンプルに!TanStackによる統一的なライブラリ選定
Search
high-g
February 15, 2025
3
490
React開発をシンプルに!TanStackによる統一的なライブラリ選定
high-g
February 15, 2025
Tweet
Share
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Site-Speed That Sticks
csswizardry
5
490
How GitHub (no longer) Works
holman
314
140k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Become a Pro
speakerdeck
PRO
27
5.3k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
104
19k
Faster Mobile Websites
deanohume
306
31k
Transcript
React開発をシンプルに! TanStackによる統一的な ライブラリ選定 2025/02/15【ORION】エンジニア交流会 #2
フロントエンドエンジニア KINTOテクノロジーズ(株)所属 TSKaigi 2025, TSKaigi Kansai Staff
谷 郁弥 (high-g) ※ハイジと読みます
前提
React + Vite 環境下での ライブラリ選定のお話
あくまで、解のひとつ
時間が短いので広く浅く紹介
Reactで開発する際の課題
ライブラリ選定がムズい&つらい
ルーティング、データフェッチ、 状態管理、フォーム制御・・・
React Router, SWR, Apollo Client, Redux, Jotai, Zustand, Formik, React
Hook Form...
それぞれの領域で最善のライブラリが 何なのかが分かりにくい
ライブラリ選定で悩む時間を最小限にしたい
出典:https://tanstack.com/
TanStackとは 「Web開発者のための高品質なOSS」
Headless, type-safe, & powerful utilities for Web Applications, Routing, State
Management, Data Visualization, Datagrids/Tables, and more.
出典:ヤマサ醤油株式会社
TanStackの各種ライブラリ紹介
TanStack Query
TanStack Query - 概要 - データフェッチライブラリ - フェッチ、キャッシュ、同期、更新を非常に簡単にする - 類似ライブラリ
- SWR, Apollo Client, RTK Query - 特筆 - 高機能かつ軽量 - 類似ライブラリの中で最人気(GitHub Star 換算)
TanStack Query
TanStack Router
TanStack Router - 概要 - ファイルベースの型安全なルーティングライブラリ - 類似ライブラリ - React
Router - 特筆 - routes/にtsxファイルを作成すると自動でルーティング + 型の生成 - <Link /> や useNavigate を使用する際、ルーティング先を補完 - Search Paramsで多様な型、ネスト構造を扱うことが可能 - 高機能かつ軽量(React Router 46KB、TanStack Router 23.8KB )
TanStack Store
TanStack Store - 概要 - フレームワークに依存しない状態管理ライブラリ - 状態を大小様々な単位で切り出しができる - 類似ライブラリ
- Redux, Recoil, Zustand, Jotai - 特筆 - Jotaiに少し似ている(個人的には、Jotaiの方が好き) - Store部分のコード分離ができれば、Jotaiとそこまで差がないかも - 現時点で、v0.7.0
TanStack Store
TanStack Form
TanStack Form - 概要 - フォームを処理するための究極のソリューション(と公式が謳っている) - 類似ライブラリ - Formik,
React Hook Form, React Final Form, Conform - 特筆 - Formikに似た制御コンポーネントだが、型安全で補完が強い - バンドルサイズが類似ライブラリと比べても軽量(7.6KB) - zodやvalibotなど、既存のバリデーションライブラリも使用可 - 現時点で、v0.42(リリース候補モード)
TanStack Form
まとめ
まとめ - Reactのライブラリ選定をシンプルにする解のひとつとして “TanStack” という手段 - TanStack Query, TanStack
Router からお試しを - TanStackには、今回紹介した以外のフレームワークやヘッドレスUIも 存在するので興味があったら使ってみてください ※自分はTanStackのコントリビューターではありません
プロポーザル大募集 2/28 締め!!!!
おわり