ポートフォリオを Astro 5 + Agent で1日で作った話 — 破壊的変更に3回ハマりながら完成した記録
目次（6件）
「ポートフォリオないの？」と言われて、ない、と答えた。
エンジニアとして発信を続けているのに、自分の作ったものをまとめたページがどこにもなかった。my-blog はあるが、プロジェクト一覧のページではない。履歴書に書くような「これを作りました」を見せる場所が必要だと感じ、1日で作ることにした。
BEFORE — 「ポートフォリオ」が存在しない状態
my-blog はある。記事を書いている。でも「作ったもの一覧」がない。
職務経歴書やSNSで「このプロジェクトを見てください」と言いたくても、リンク先がない。ブログ記事を探してもらうしかなく、読む側に余計な手間をかけていた。
必要なのはシンプルなもの。Hero セクションに自己紹介、Skills にできること、Projects に作ったもの、Contact に連絡先——それだけのシングルページLPがあればいい。
AFTER — Astro 5 製シングルページLPが動いている状態
- Hero: 名前・キャッチコピー・主要リンク
- Skills: 技術スタックをカテゴリ別に表示
- Projects: Markdown から自動生成されるプロジェクトカード
- Contact: メール・SNSリンク
my-blog と同じ Warm テーマの CSS 変数（--background・--surface・--ink・--accent）を完全移植したので、見た目に統一感がある。プロジェクト詳細ページは Content Collections + glob loader で Markdown から動的に生成される。
Agent との協働プロセス
構成を決めてから実装までを Agent に委ねた。自分がやったのは「こういうページが欲しい」という設計の決断と、ビルドエラーが出たときの調査だけ。
- 技術スタック決定 — Astro 5 + Tailwind CSS v4 + TypeScript。静的サイト生成（SSG）で完結させる
- ファイル構成 — コンポーネント8 + レイアウト1 + ページ2 + データ2 + コンテンツ2 + 設定5、計20ファイルを一括生成
- CSS変数の移植 — my-blog のテーマをそのままコピーし、ブランド統一
- 3エージェント並行レビュー — コード品質 / デザイン・UI / SEO・メタの3機を同時起動してレビューを並行実施
- Blocking 6件を修正 — OGP絶対URL化・
aria-label追加・skip-to-mainリンク・:focus-visibleスタイル・.env.localの.gitignore追加・その他
困った具体例 — Astro 5の破壊的変更に3回ハマった
| # | 状況 | 困りごと | 解消 |
|---|---|---|---|
| 1 | Content Collections の定義 | type: "content" で設定 → ビルドエラー | Astro 5 では glob loader への移行が必須。loader: glob({ pattern: "**/*.md", base: "./src/content/projects" }) に変更 |
| 2 | エントリの参照 | project.slug でURLを生成 → undefined になる | Astro 5 では slug が廃止されて id に変更。project.id に書き換えて解決 |
| 3 | レンダリング関数 | project.render() でHTMLを取得 → エラー | Astro 5 では render(project) という形式に変更（astro:content からインポート）。メソッドからユーティリティ関数に変わっていた |
3つとも「Astro 4 → 5 の破壊的変更」が原因だった。ビルドエラーのメッセージが「○○は存在しません」という素っ気ないものだったが、エラーメッセージをそのまま Agent に渡すと即座に「Astro 5 の API 変更です」と特定してくれた。自分で Astro 5 のドキュメントを読む必要がなかった。
結果
- 作業時間: 約1日（設計30分 + 実装4時間 + レビュー修正1時間）
- 生成ファイル数: 20ファイル
- Blocking指摘: 6件、全件修正済み
- ビルドエラー: Astro 5の破壊的変更で3回、全件解決
- コスト: $0（静的ファイル、画像生成なし）
Agent なしだと Astro 5 の破壊的変更を調べるだけで半日かかっていたと思う。エラーを渡せば即座に原因と修正方法が返ってくるので、実装に集中できた。
次の1歩
- GitHub push → Vercel デプロイ: リポジトリを公開してURLを持てる状態にする
- OG画像の生成: SNSでシェアされたときに表示されるサムネイルを作る
- プロジェクトサムネイル: ProjectCard の画像を eyecatch 生成スキルで作成する