見出し画像

TanStack RouterとTanStack Queryの違いを簡単にまとめてみた

とりむぎ@ソフトウェアエンジニア(仮)

先日のLT会で、TanStack RouterとTanStack Queryというツールを初めて知ったので、メモ感覚でどのようなツールなのかを簡単にまとめておきます！


TanStack Router

特徴

  • ルーティングライブラリ
    TanStack Routerは、Webアプリケーション内でページ遷移を管理するためのライブラリ。

  • 宣言的ルーティング
     ルート（ページ）を宣言的に定義し、URLに応じて表示するコンポーネントを切り替える。
    宣言的ルーティングとは
    あらかじめ「このURLのときにはこのページを表示する」と決めておく方法。例えば、`/home`ならホームページ、`/about`なら紹介ページを表示するといった具合で、URLに応じて自動的に表示する画面を切り替えることができる。

  • 動的ルート
    パラメータを使って動的にルートを生成できる。
    （例えば、/user/:idのように）
    動的ルートとは
    URLの一部を変数のように使って、ページを作る仕組み。例えば、/user/:idというルートでは、:idが変数になる。これにより、/user/1や/user/2など、異なるユーザーのページにアクセスできる。つまり、同じルート定義で色々なページを簡単に作れるようになる。

  • ネストされたルート
    親ルートと子ルートを定義し、複雑なルーティング構造を簡単に管理できる。


使う目的

  • ページ遷移の管理
    Webアプリケーションで複数のページを持つ場合、それぞれのページへの遷移を管理するために使用する。

  • URLベースの状態管理
     URLのパラメータやクエリを使ってアプリケーションの状態を管理する。
    URLベースの状態管理とは
    Webアプリケーションの状態をURLに反映させることで、共有、ブックマーク、履歴管理を容易にする手法。クエリパラメータやパスパラメータ、ハッシュフラグメントを使って実装される。


メリット

  • シンプルなAPI
    直感的で使いやすいAPIを提供していて、初心者でも簡単に導入できる。

  • パフォーマンス
    軽量で高速なルーティングを実現しする。
    （TanStack Routerがページの切り替えを素早く行えるという意味。TanStack Routerは必要なコードだけを読み込むから、無駄なデータを読み込むことはなく、ページの表示が速くなる。これによって、ユーザーがページを移動するたびにスムーズな体験が提供できる。

  • 拡張性
    ネストされたルートや動的ルートをサポートしており、複雑なアプリケーションでも柔軟に対応できる。複雑なページ構成や動的なページ生成に簡単に対応できるため、大規模なアプリケーションでも柔軟に対応できる。



TanStack Query

特徴

  • データフェッチングライブラリ
    TanStack Queryは、サーバーからデータを取得して、キャッシュ管理を行うためのライブラリ。

  • キャッシュ管理
    データのキャッシュを自動的に管理し、再フェッチを最小限に抑える。
    キャッシュ管理とは
    頻繁に使用するデータを一時的に保存しておくことで、次にそのデータが必要になったときに、すばやくアクセスできるようにする仕組みのこと。これによって、サーバーへのリクエスト回数を減らして、アプリケーションのパフォーマンスを向上させることができる。

  • リアクティブデータフェッチ
    データの変更をリアルタイムで反映させることができる。

  • エラーハンドリング
    データフェッチ中のエラーを簡単に処理できる。


使う目的

  • データの取得と管理
    サーバーからデータを取得し、そのデータを効率的に管理するために使用する。

  • キャッシュの最適化
     データのキャッシュを自動的に管理し、無駄な再フェッチを防ぐ。


メリット

  • 簡単な導入
    シンプルなAPIで、データフェッチやキャッシュ管理を簡単に導入できる。

  • パフォーマンスの向上
    キャッシュ管理によって、無駄なデータフェッチを減らし、アプリケーションのパフォーマンスを向上させる。

  • リアクティブなUI
    データの変更をリアルタイムで反映させることができ、UXを向上させる。


まとめ

TanStack Routerは、Webアプリケーションのページ移動を管理するためのツールで、URLを使ってページの状態を管理したり、階層的なページ構成ができるのが特徴である。

一方、TanStack Queryは、サーバーからデータを取得して、そのデータを効率よく管理するためのツールで、データのキャッシュやリアルタイム更新が得意。

どちらのツールも、Webアプリケーションの開発にとても役立ちそう。それぞれの目的に合わせて使い分けることで、アプリケーションをより効率的で高性能にすることができる。

初心者にも使いやすい設計になっているようので、ぜひ試してみたい！

この記事が気に入ったらサポートをしてみませんか？