知星図（chiseizu）

知識の語彙を「なぜ生まれたか」の系譜としてつなぎ、星図（スターマップ）として可視化する学習サイト。

本番環境: chiseizu.com

コンセプト

用語集は五十音順に並べても知識にならない。語彙は「どの前提の上に、何を解決するために生まれたか」という系譜の中で初めて理解できる——という考えから、語彙の前提関係をグラフ構造で表現した。

宇宙図（トップページ）

Astro SSG + React Islands: 全271語彙 × 詳細ページをビルド時に静的生成。星図などの動的部分だけReactの島としてclient:only/client:visibleでハイドレート
ビルド時グラフ構築: 全MDXのfrontmatterからノード・エッジ・接続度をビルド時に集計。クライアントは軽量なJSON1つを受け取り描画するだけ
Cloudflare Workers（assets-only）: サーバー処理ゼロの静的配信。カスタムドメイン + グローバルエッジ配信を無料枠で運用
GitHub Actions CD: push → 整合性検証 → ビルド（Playwright ChromiumでMermaidをSVG化）→ wrangler deployまで自動化

SSG一択（サーバーレス以前にサーバー不要）
- コンテンツは自分が執筆するMDXのみで、動的な書き込みが存在しない。閲覧履歴すらlocalStorageに閉じることで、DB・API・認証を全て不要にした
- 結果として運用コストゼロ・攻撃面ほぼゼロ・実質無限のスケーラビリティを同時に達成
Astro + React Islands
- コンテンツ主体のサイトなのでNext.jsではなくAstroを採用。デフォルトでJS 0KBのHTMLを出力し、力学シミュレーションが必要な星図だけをReactでハイドレート
react-force-graph-2d（Canvas描画）
- 235ノード + 700系譜のグラフはSVGではDOMノード数的に厳しいため、Canvas描画のforce-graphを採用。ビルド時ではなく実行時にd3-forceでレイアウトすることで、ズーム・パン・ホバーの生きたインタラクションを実現
- 初回表示のもたつきを消すため、シミュレーションを240tick予熱（warmup）してから描画
Content-as-Code（MDX + Zod）
- 語彙のfrontmatter（前提・関連・カテゴリ・抽象度）をZodで検証し、存在しない語彙への参照や未定義カテゴリをビルド失敗として検出。リンク切れのないグラフを構造的に保証

d3-forceの力学シミュレーションで描く銀河ごとの星図。ズーム・パン・ホバーに加え、日本語・英語・読みでの全文検索、カテゴリ凡例クリックでの強調、抽象度レベル（1〜5）での絞り込みができる。

エンジニアリング銀河の星図

「概要 → なぜ生まれたか → 詳細」の3部構成。右側にはフォーカス語彙と隣接1-hopだけを抽出した周辺グラフを表示し、前提・関連の重みをバーで可視化する。

語彙詳細ページ（OAuth）

読むだけでなく触って理解できるよう、40超の体験コンポーネントをMDXに埋め込んでいる。トークンバケットにリクエストを撃ち込むレート制限ラボ、Raftコンセンサスの可視化、OAuthフローのステッパー、JWT改ざん実験など。すべてclient:visibleで遅延ロードされる。

レート制限の体験コンポーネント

閲覧した星だけで描かれる自分だけの星座。訪問順が朱の番号付き破線で表示され、どの領域の空をよく眺めてきたかが残る。記録はlocalStorageにのみ保存され、外部送信は一切ない（アクセス解析も不使用）。

航海日誌

追記専用レジストリ: 全語彙の恒久順序をvocab-registry.jsonで管理。添字が航海日誌の共有URLの番号として機能するため、並び替え・削除を禁止し、CIでgit diffによる不変性検証を行う
ビルド時コンテンツ検証: 語彙の重複、レジストリ登録漏れ、銀河間参照（複雑度削減のため禁止）をビルド失敗として即座に検出
プライバシー設計: ユーザーデータを一切持たない。閲覧履歴はブラウザ内で完結し、削除ボタンも提供
コスト: Cloudflare Workers無料枠 + ドメイン代のみで運用