Hello World
2026/3/29
このポートフォリオを作るにあたって何を考え、どんな技術を選び、何を意識したのかを書き残しておきます。
なぜ TanStack Start を選んだか
Next.js ではなく TanStack Start を選んだ理由は、大きく4つあります。
型安全ルーティング
TanStack Router のタイプセーフなルーティングが最大の決め手でした。ルートパラメータ、サーチパラメータ、ローダーの戻り値がすべて TypeScript に推論される。Zod スキーマでサーチパラメータをバリデーションすれば、ランタイムの型安全もついてくる。存在しないルートへの <Link> はコンパイル時にエラーになるので、ブログ記事のスラッグ管理でリンク切れを防げます。
Next.js の useSearchParams() が型なしの URLSearchParams を返すのに対して、TanStack Router はルート定義から型が流れてくる。この差は一度味わうとやめられません。
Vite ベースの開発体験
TanStack Start は Vite ベースなので、開発サーバーのコールドスタートが 300-500ms、HMR が 50-100ms。ポートフォリオのようにデザインを何度も微調整するプロジェクトでは、この速度差が効いてきます。
2026年初頭に Rolldown 1.0 RC が Vite に統合され、プロダクションビルドも Rollup の 10-30 倍高速になりました。TanStack Start はこの恩恵をそのまま受けられる。Next.js の Turbopack も速いですが、Vite のプラグインエコシステム全体にアクセスできる柔軟性は得られません。
シンプルなメンタルモデル
TanStack Start のアプローチは「普通の React を書いて、必要な場所にサーバー最適化を足す」。Next.js App Router の「Server Components がデフォルト、インタラクティビティはオプトイン」とは逆の発想です。
createServerFn は明示的な RPC エンドポイントで、何がサーバーで実行されるかがコード上で一目瞭然。HTTP メソッドも GET / POST / PUT と細かく指定できる。Next.js の 'use server' ディレクティブの暗黙的な境界管理と比べて、デバッグ時に迷いません。
ポートフォリオのコードがそのまま技術力のデモンストレーションになるので、「マジック」の少ないフレームワークの方が都合がいい。
デプロイの自由
Cloudflare Workers、Netlify、Vercel、Node.js サーバー、Bun、Deno、AWS Lambda — TanStack Start はプラットフォーム非依存です。特定のインフラに縛られず、このサイトも Vercel にデプロイしていますが、いつでも乗り換えられる安心感があります。
技術スタック
- Framework: TanStack Start + TanStack Router
- Styling: Tailwind CSS v4（
@theme inlineでテーマ定義） - UI コンポーネント: Base UI（Tooltip, Collapsible など headless で使用）
- コンテンツ管理: Content Collections（ブログ、Experience、AI Projects を Markdown で管理）
- フォント: iA Writer（本文）、iA Writer Mono（コード）、Lora（見出し・セリフ）
- アニメーション: Motion（ロゴのストローク描画）、CSS
@keyframes（背景エフェクト）
コンテンツ管理
ブログ記事、職務経歴、AI プロジェクトはすべて Content Collections で Markdown 管理しています。frontmatter にメタデータを書き、renderMarkdown で HTML に変換。型安全なので typo があるとビルド時にエラーで気づけます。
これから
このポートフォリオ自体が、自分が普段やっている「コンポーネント設計 × AI」の実験場でもあります。Generative UI の考え方を取り入れたコンポーネント体系の試行、LLM との連携など、学んだことをこのブログに書いていく予定です。