React開発をシンプルに！TanStackによる統一的なライブラリ選定

Slide 1

Slide 1 text

React開発をシンプルに！   TanStackによる統一的な   ライブラリ選定   2025/02/15【ORION】エンジニア交流会 #2  

Slide 2

Slide 2 text

フロントエンドエンジニア   KINTOテクノロジーズ（株）所属   TSKaigi 2025, TSKaigi Kansai Staff   谷郁弥 (high-g) ※ハイジと読みます  

Slide 3

Slide 3 text

前提 

Slide 4

Slide 4 text

React + Vite 環境下での  ライブラリ選定のお話 

Slide 5

Slide 5 text

あくまで、解のひとつ 

Slide 6

Slide 6 text

時間が短いので広く浅く紹介 

Slide 7

Slide 7 text

Reactで開発する際の課題  

Slide 8

Slide 8 text

ライブラリ選定がムズい＆つらい 

Slide 9

Slide 9 text

ルーティング、データフェッチ、  状態管理、フォーム制御・・・ 

Slide 10

Slide 10 text

React Router, SWR, Apollo Client, Redux, Jotai, Zustand, Formik, React Hook Form... 

Slide 11

Slide 11 text

それぞれの領域で最善のライブラリが  何なのかが分かりにくい 

Slide 12

Slide 12 text

ライブラリ選定で悩む時間を最小限にしたい  

Slide 13

Slide 13 text

出典：https://tanstack.com/  

Slide 14

Slide 14 text

TanStackとは  「Web開発者のための高品質なOSS」 

Slide 15

Slide 15 text

Headless, type-safe, & powerful utilities for Web Applications, Routing,  State Management, Data Visualization, Datagrids/Tables, and more.  

Slide 16

Slide 16 text

出典：ヤマサ醤油株式会社  

Slide 17

Slide 17 text

TanStackの各種ライブラリ紹介  

Slide 18

Slide 18 text

TanStack Query  

Slide 19

Slide 19 text

TanStack Query  - 概要  - データフェッチライブラリ  - フェッチ、キャッシュ、同期、更新を非常に簡単にする  - 類似ライブラリ  - SWR, Apollo Client, RTK Query  - 特筆  - 高機能かつ軽量  - 類似ライブラリの中で最人気（GitHub Star 換算） 

Slide 20

Slide 20 text

TanStack Query 

Slide 21

Slide 21 text

TanStack Router  

Slide 22

Slide 22 text

TanStack Router  - 概要  - ファイルベースの型安全なルーティングライブラリ  - 類似ライブラリ  - React Router  - 特筆  - routes/にtsxファイルを作成すると自動でルーティング + 型の生成  - や useNavigate を使用する際、ルーティング先を補完  - Search Paramsで多様な型、ネスト構造を扱うことが可能  - 高機能かつ軽量（React Router 46KB、TanStack Router 23.8KB ） 

Slide 23

Slide 23 text

TanStack Store  

Slide 24

Slide 24 text

TanStack Store  - 概要  - フレームワークに依存しない状態管理ライブラリ  - 状態を大小様々な単位で切り出しができる  - 類似ライブラリ  - Redux, Recoil, Zustand, Jotai  - 特筆  - Jotaiに少し似ている（個人的には、Jotaiの方が好き）  - Store部分のコード分離ができれば、Jotaiとそこまで差がないかも  - 現時点で、v0.7.0 

Slide 25

Slide 25 text