このサイトを TanStack Solid Start で作った理由

私は10年経験のフルスタックエンジニアで、現在は海外チームとのリモート契約案件を探しています。このサイトは私のポートフォリオでありブログでもあります。今回は、なぜこのサイトを Solid.js + TanstackStart 構成にしたのかを書きます。

なぜ個人サイトなのか

求人プラットフォームはマッチング側の都合で最適化されていて、詳細に私がこれまでに何を作ったか・何をしてきたかを表現するのには向いていないと感じています。これに対して個人サイトはレジュメに載せられ、完全に自分自身でコントロールできて自分を表現できる場所です。文字数制限もなく、英語と日本語の両方で自分の言葉で職歴を語れます。

なぜ TanStack Solid Start なのか

私は日頃 React と Vue を使っているので、あえて仕事で使っていないスタックを選びました。

理由は2つ:

新しいスタックを使ってみることが評価力を保つ。 私の最近の仕事の一つとして、AI支援開発がどこで機能し、どこで失敗するかを見極めることです。これまで使ったことのないフレームワークで作るのはまさにこれに対するトレーニングになり、ネタにもなります。
TanstackStart は静的サイトに適してる。 TanStack Start はすべてのルートをプレーンなHTMLに事前レンダリングします:

// vite.config.ts
import { tanstackStart } from '@tanstack/solid-start/plugin/vite'

export default {
  plugins: [
    tanstackStart({
      prerender: { enabled: true, crawlLinks: true },
    }),
  ],
}

crawlLinks を有効にすると、クローラーが / から内部リンクを辿ってページごとにファイルを書き出します。Cloudflare Pages にデプロイされるのはHTMLとCSS、小さなハイドレーション用ペイロードだけ。サーバーランタイムもデータベースもありません。

TanStack Router の型安全なファイルベースルーティングも本当に快適です。ルートはファイル、パラメータは型付き、Link コンポーネントは to の宛先をコンパイル時に検証してくれます。

URLプレフィックスによるバイリンガル

サイトは / が英語、/ja が日本語です。ブログ記事は言語ごとに独立しています。私の母国語は日本語なので、日本語から英語への翻訳には Nani!? 翻訳を活用しています。フロントマターの translationKey でペアをリンクし、片方の言語だけの記事も成立します。その場合、言語スイッチャーはもう一方の言語のブログ一覧にフォールバックするようにしています。 Nani!? は AI を利用した、非常に優れた翻訳ツールで愛用しています。作者の catnose さんのファンでもあります。

デザインはミニマルに

アクセントカラーは1色、本文は読みやすい行長の1カラム、ライト/ダークは prefers-color-scheme だけで処理 — 切り替え用のJavaScriptはありません。記事はビルド時にパースされる Markdown ファイルで、marked でレンダリングし、Tailwind の typography プラグインでスタイリングしています。

今後の予定

AIネイティブな開発ワークフローについての記事を増やしていく予定です。Claude Code や Codex をスペック駆動のコンテキストとどう使うか、実際に本番で機能したこと。このような経験をお探しの方は、お気軽に連絡してください。