Astro — 骨格と配信#

• Pages — src/pages/ のファイルがそのままルート
• Content Collections — posts / talks を MDX + Zod で型付け
• ビルド時生成 — OGP（satori）/ RSS / sitemap / expressive-code
• View Transitions — スライド遷移

React — Island で動かす#

• グラフ — Highcharts（Treemap / Burndown / PV）
• 3D 背景 — three.js + R3F（ASCII / Orbital）
• 検索 — Fuse.js（PostSearch / TalkSearch）
• 外部データ — GitHubActivity / PopularPosts
• カウントダウン — LifeProgress / CreativeLifeCountdown

始めたときの認識#

• 「Astro なんとなく軽そう」で採用
• 「ちゃんと動く ＝ ヨシ」で進めた

例：画像の置き場所#

• 当時は画像を貼り付ける体験を優先して全部 public/talks/foo.png に直置き→<img src="/talks/foo.png"> で参照。
• Astroの astro:assets , <Image> が活用できていないことにしばらく経って気付く

→後からまとめて書き直した#

• 画像 — public/ → src/assets/ + astro:assets
• CodeBlock — client:load の React → astro-expressive-code（ビルド時）
• SEO / 見出し — 手書き → rehype-slug / autolink-headings / sitemap

感想#

• 色々な作り方を許容してくれるので、一旦好奇心先行で作って後から改善できる。モチベ維持しやすい
• MCPを使いつつ都度改善がいい
• 自分で頑張っても不慣れさからAstroに合った書き方かを見落しがちなので諦め。

始めたときの認識#

• スライド機能を作る途中、トップページで使っている ASCII 装飾をスライドにも入れたい！
• 学び① のノリで「一旦置いて、後で詰めればいける」と思った

実際に起きたこと#

• 1 スライド目はちゃんと動く
• View Transition で別スライドに遷移すると getImageData: Value is not of type 'long' で drei がクラッシュ。遷移の瞬間だけ throw する

原因になっていた VT の挙動#

1. VT は遷移中、古い DOM と新しい DOM が一瞬同居する
2. 新しい DOM が出てきた直後、Canvas は「幅 0」のフレームを経由する
3. そこで React Island がマウントされ、drei が getImageData を呼ぶと throw

「マウント時 ＝ サイズが確定した DOM」という前提が、VT の遷移中だけ崩れる

LLM と粘った結果#

試した順: rAF 1 つ挟む → VT 完了を待つ → ResizeObserver

• 着地点 — ResizeObserver で Canvas の実寸が出た瞬間にマウント
• 保険 — drei が出す一回限りのエラーは window で preventDefault

同じことやる人がいたら参考に。