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

私は10年経験のフルスタックエンジニアで、現在は海外チームとのリモート契約案件を探しています。このサイトは私のポートフォリオでありブログでもあります。コンテンツもデザインもスタックも、全部自分でコントロールできる場所。なぜこの構成にしたのかを書きます。

なぜ個人サイトなのか

求人プラットフォームはマッチング側の都合で最適化されていて、あなたが実際に何を作ったかを示すには向きません。個人サイトはレジュメに載せられる、完全に自分のもののURLです。文字数制限もなく、英語と日本語の両方で自分の言葉で職歴を語れます。

なぜ TanStack Solid Start なのか

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

新しいスタックを使ってみることが評価力を保つ。 私の最近の仕事の一部は、AI支援開発がどこで機能し、どこで失敗するかを見極めることです。慣れないフレームワークで作るのはまさにその筋のトレーニングで、書くべきネタにもなります。
実際の要件は静的サイトに合う。 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 が日本語です。ブログ記事は言語ごとに独立していて、機械翻訳ではなく各言語で自然に書きます。フロントマターの translationKey でペアをリンクし、片方の言語だけの記事も成立します。その場合、言語スイッチャーはもう一方の言語のブログ一覧にフォールバックします。

ミニマルなのは意図

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

今後の予定

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