経緯
よくTanStack QueryやらTanStack Queryなどを見かけていましたが、この度TanStack Virtualなるものにお世話になったので改めてTanStackについて調べてみました。
概要
TanStackとはでJS/TS向けのヘッドレスUIやフレームワーク非依存型のライブラリを開発しているライブラリ群の総称です。
オープンソースで全てMITライセンスにて利用できます。
主なライブラリは
- TanStack Router
- TanStack Start
- TanStack Query
- TanStack Table
- TanStack Virtual
などがあります。詳細や他のライブラリについては後述します。
ヘッドレスUIとは
要するにヘッドレスUIとはロジックと表示を切り離すことで自由なUI設計を可能にし、再利用性を高める思想のことです。
これのお陰で色んなフレームワークに対応できるわけですね。
Reactでは選択肢が色々あったのですが、Svelteを使ったときに選択肢が少なく、非常に助けられました。
各言語ごとにドキュメントやサンプルが分かりやすくまとめられていて、SvelteやSolidJSなどの少しマイナーなフレームワークを使うならとりあえずTanStackから探してみるのも良いかもしれません。
各ライブラリ一覧
QueryとVirtual以外は使ったことが無いので詳しくは書きません。
使えそうだと思ったらTanStackの公式ページで詳細を見てください。
TanStack Router
対応
- React
- SolidJS
これは最初React Routerでいいのではと思いましたが、ルート定義に型推論が効くので便利そうです。
TanStack Start(BETA)
対応
- React
- SolidJS
TanStack Roter+Viteを手軽に構築できるもののようです。
TanStack Routerに相当の自信があると見えます。
TanStack Query
対応
- React
- Vue
- Angular
- SolidJS
- Svelte
言わずと知れた奴です。React以外も使えるのがポイント
TanStack Table
対応
- React
- Vue
- Angular
- SolidJS
- Lit
- Svelte
ここからヘッドレスUIの話が出てきます。
テーブルのレイアウトを細かく制御したい場合に向いています。
UIは何でもいいから早く作りたいという場合はあまり向いてないです。
TanStack Form(New)
対応
- React
- Vue
- Angular
- SolidJS
- Lit
- Svelte
Newと書いているので最近出来たのでしょう。
Formが絡むと面倒くさい事になりがちなので楽になるとありがたいですね。
TanStack Virtual
対応
- React
- Vue
- Angular
- SolidJS
- Lit
- Svelte
仮想スクロールのライブラリです。
svelteだと他に良いのがなくこれに辿り着きました。
TanStack Pacer(Alpha)
対応
- React
- SolidJS
デバウンス、スロットリング、キューやレート制限などの管理を行えるようです。
アルファ版なので破壊的な変更も多々あると思いますが、安定すれば期待のライブラリという感じです。
TanStack Store(Alpha)
対応
- React
- Vue
- Angular
- SolidJS
- Svelte
こちらもアルファ版です。
状態管理ライブラリのようですが、使い勝手は分かりません。
状態管理に困っている人がいれば試してみてはどうでしょうか
TanStack Range
対応
- React
結構リッチなスライダーを作れるようです。
React以外もすぐに対応するでしょう。
TanStack DB(BETA)
対応
- React
- Vue
- SolidJS
- Svelte
- Vanilla
これは普通に使ってみたいです。期待が膨らみます。
TanStack Config & TanStack Devtools
この辺は何にもわからないので割愛します
最後に
今回紹介した意図としてはReact以外のフレームワークでライブラリの少なさに困っている人の参考なればというものです。
使ってみた感想などがあればコメントや記事にしていただけるとこちらとしてもありがたいです。