LoginSignup
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@toshikifu(としきふ)

tanstackをstartする

Posted at

2025年，毎月投稿2月号です．今回は型安全なルーティングが魅力のTanStack Routerのセットアップをサクッとできるtanstack Startを紹介したいと思います．

TanStackシリーズは，フロントエンド開発におけるライブラリ群です．
データ管理ライブラリTanStack Queryや，高機能なテーブル作成を補助してくれるTanStack Table，ルーティングをするTanStack Routerなどがあります．

TanStack Startを使うと，TanStack Routerなどがセットアップされたプロジェクトを素早く用意することができます．

ref: TanStack | High Quality Open-Source Software for Web Developers

TanStack Startのはじめかた

警告
TanStack Startは執筆時現在(2025/02/27)，Beta版です．

下記のコマンドで完了します. 最後のコマンドを実行するとlocalhost:3000からアプリケーションにアクセスできます．
ref: Quick Start | TanStack Start React Docs

npx degit https://github.com/tanstack/router/examples/react/start-basic start-basic
cd start-basic
npm install
npm run dev

下記がセットアップされたプロジェクトを作成することができます．

(ディレクトリイメージ)
ss.png

(立ち上がるページイメージ)
ss 1.png

このアプリはサーバーサイドで動作しているので，ブラウザのjavascriptをoffにしても動作します．

(ブラウザのjava scriptをoffにしてる様子)
ss 2.png

構成の紹介

app/router.tsxにてreact-routerの設定をしています．このrouteTreeというのが，自動生成されるルーティングを型安全にしている本体です．

app/router.tsx
import { createRouter as createTanStackRouter } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'
import { DefaultCatchBoundary } from './components/DefaultCatchBoundary'
import { NotFound } from './components/NotFound'

export function createRouter() {
	const router = createTanStackRouter({
		routeTree, // これが自動生成されるやつ
		defaultPreload: 'intent',
		defaultErrorComponent: DefaultCatchBoundary,
		defaultNotFoundComponent: () => <NotFound />,
		scrollRestoration: true,
	})
	return router
}

declare module '@tanstack/react-router' {
	interface Register {
		router: ReturnType<typeof createRouter>
	}
}

このようにリンクに型が割り当てられ，存在しないリンクを指定できないようになっています．
(エディタで予測が出ている様子)
ss 4.png

また，パスだけではなく，パラメータも型安全の恩恵を受けることができます．app/posts/$postIdへと遷移するLinkタグにpostIdパラメータがないと警告が出ます
(パラメータがなくて型エラーが起きてる様子)
ss 6.png

新しいrouteを作成してみます．
appq/router/test.tsxファイルを作成してみると，まず雛形が自動作成されます．

また，routeTreeの方にも自動で変更が入ります．

const UsersRoute = UsersImport.update({
	id: '/users',
	path: '/users',
	getParentRoute: () => rootRoute,
} as any)

+ const TestRoute = TestImport.update({
+	id: '/test',
+	path: '/test',
+	getParentRoute: () => rootRoute,
+	} as any)

...

蛇足ですが，/testの部分を書き換えることはできません．書き換えても保存のタイミングで自動修正されてしまいます．

高度なルーティング機能と実践例

TanStack Routerは、シンプルなルーティングだけでなく，複雑なアプリケーションに必要な高度な機能を備えています．ここでは，いくつかの実践例と活用方法を紹介します．

ネストされたルートの実装

複雑なUI構成では，共通レイアウトや部分的なエラーハンドリングを実現するために，　ルートをネストして定義するケースが多くなります．たとえば、ユーザー情報ページでは，概要，詳細，設定など複数の子ページを持たせることが考えられます．以下は，その一例です．

// 例: app/router.tsx の一部
const ProfileRoute = ProfileImport.update({
	id: '/profile',
	path: '/profile',
	getParentRoute: () => rootRoute,
	component: ProfileLayout,
} as any)

const ProfileDetailsRoute = ProfileDetailsImport.update({
	id: '/profile/details',
	path: '/details',
	getParentRoute: () => ProfileRoute,
	component: ProfileDetails,
} as any)

const ProfileSettingsRoute = ProfileSettingsImport.update({
	id: '/profile/settings',
	path: '/settings',
	getParentRoute: () => ProfileRoute,
	component: ProfileSettings,
} as any)

このように，親ルートに共通レイアウト（ここでは ProfileLayout）を設定することで，全体のデザインやエラーハンドリングを統一できます．

型安全なパラメータ管理

TanStack Routerの大きな魅力は，ルート定義が自動生成され，型安全にリンクやパラメータを扱える点です．たとえば，/posts/$postIdというルートに対して，リンクを作成する際には以下のように必須パラメータがコンパイル時にチェックされます．

// Linkコンポーネントの例
<Link to={PostsRoute} params={{ postId: '123' }}>
	投稿123を見る
</Link>

もしpostIdパラメータを指定しなければ，エディタ上で即座に警告が表示され，誤ったルーティング実装を防止できます．これにより，リファクタリング時のリスクも大幅に低減されます．

エラー処理とフォールバックのカスタマイズ

各ルートごとに独自のエラーコンポーネントを定義できるため，予期せぬエラー発生時にもユーザーに適切なフィードバックを提供できます．グローバルなエラーハンドリングと，各ルート固有のエラーバウンダリを組み合わせることで，アプリ全体の堅牢性を高められます．

// 例: app/router.tsx
const router = createTanStackRouter({
	routeTree,
	defaultPreload: 'intent',
	defaultErrorComponent: DefaultCatchBoundary,
	defaultNotFoundComponent: () => <NotFound />,
	scrollRestoration: true,
})

さらに，特定のルートでより詳細なエラー情報を表示するために，各ルートにカスタムのエラーコンポーネントを割り当てることも可能です．たとえば、データフェッチ中のエラーや認証エラーに対して，専用のUIを表示することができます．

SSR（サーバーサイドレンダリング）との連携

TanStack Routerはサーバーサイドレンダリング（SSR）にも対応しており，JavaScriptがオフの場合でも動作する設計となっています．これにより，初回ロード時のパフォーマンス改善やSEO対策が期待できます．特に，TanStack Queryとの連携を通じてサーバー上でデータを先に取得し，クライアントへシームレスに受け渡すことが可能です．

// SSR対応の例（Next.jsなどとの統合イメージ）
export async function getServerSideProps(context) {
	// サーバー上でデータを取得する処理
	const data = await fetchDataForRoute(context.params)
	return { props: { data } }
}

この仕組みにより，ユーザーはページロード時に必要なデータが既に用意された状態で表示され，快適な体験を享受できます．

まとめ

今回の記事では，型安全なルーティングが魅力のTanStack Routerを，tanstack startを利用して簡単にセットアップする方法と，その高度な機能についてご紹介しました．以下のポイントが特に注目すべき点です．

  • 型安全性
    自動生成されるルート定義により，リンクやパラメータの誤用が防止され，開発効率とコードの堅牢性が向上

  • ネストされたルート
    共通レイアウトやエラーハンドリングを効率的に実装可能

  • 柔軟なエラー処理
    各ルートごとにカスタムのエラーコンポーネントを設定でき，ユーザーに対して適切なフィードバックを提供

  • SSR対応
    サーバーサイドレンダリングとの連携により，初期表示のパフォーマンス改善とSEO効果が期待できる

これらの機能を活用することで，より堅牢でメンテナブルなフロントエンドアプリケーションの構築が可能となります．

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?