長野に転居し、コミュニティ活動をしなくなったので余った時間でポートフォリオサイトを作っている。
名前の由来は特になく、完全に語感で決めている。
技術選定
特にこだわりは無かったので、Astroを使って静的アセットとして生成するようにしている。
ホスティングは Cloudflare に。
AI
前職では AI 利用はあまり活発ではなかったので、勉強も兼ねてがっつり AI で作っている。
Claude は IDE との統合が悪すぎるので Codex の Plus プランを購入した。
新規プロジェクトでのAI導入はかなり大変だ。
AI にコードを生成してもらい、大量に赤を入れ、それをもとに AGENTS.md やガードレールを整備していく・・・
ペライチのサイトではあるが、思ったよりも時間がかかった。
AI は70点のコードをさらっと作れない
SNS ではたまに「AI で70点のコードをさらっと作る」なんて発言をたまに見るが、全然そんなことはない。
AI の書いたコードは動く。要求通りに動く。
ただし、それだけ。
ワークアラウンドな方法で実装され、付け焼き刃な修正が上に乗ることも多い。
例えば日付とタイトルからなるコンポーネントを作ったときに、このようなコードが出てきた。
---
interface Props {
date: string;
dateTime: string;
title: string;
}
const { date, dateTime, title } = Astro.props;
---
<time datetime={dateTime}>{date}</time>
{title}
もちろん、これでも動く。動くが、これで70点にはならないだろう。
なぜ日付を文字列にするのか、なぜ date と dateTime を別々で受け取るのか、全く謎である。
date に日付以外の文字列を渡すこともできてしまうし、date と dateTime の整合性も取れない。
一方で、こういったコードを Linter や Formatter, AGENTS.md などで制限することも難しい。
今のところ、良いコードを積んでおき、それを参照しながらコードを生成してもらうしかないのかなと思っている。
あと、CSS で absolute を使いまくるのはなんでなんだろうね。
もちろん画面が崩れまくる。
いかにAIの書いたコードを減らすか
現状のポートフォリオサイトはただのリンク集になっているが、リンクの項目を毎回手動で投稿するのは面倒なので、GitHub Actions で RSS からデータを取得して自動で同期を取るようにしている。
この機能ももちろん AI に作ってもらったが、AI が勝手にどんどん要件を追加していき、巨大なコードが生成されてしまった。
- 各リクエストごとに制限時間を設けつつ、全体の実行時間も管理する
- 各リクエストはパラレルで実行しつつも、同じサイトに対しては連続でアクセスしないように間隔を設ける
- リンク先のステータスを確認し、一時的なエラーのように見える場合はアーティファクトに保存して後でリトライする
- リンクがリダイレクトの場合はリダイレクト先までステータスを追う
明らかにオーバーエンジニアリングである。そもそも僕はそんなに記事書かないし・・・
ということで、このオーバーエンジニアリングを削除することにかなり時間を費やすことになった。
ここについては必須要件と任意要件に分類することで対処するようにしてみた。（AIは勝手に必須要件を追加することはできないルールにしている。）
対処を入れてからの実装がまだ無いので効果は不明だが・・・
良かったこと
ドキュメント類
プロジェクトドキュメントを入れる場所と ADR を入れる場所を最初に用意していったのは良かったように思う。
特に ADR を書いておくと「なんでこうなってるんだっけ？」と AI に質問すれば的確な回答が返ってくるので良い。
一方で、すべての変更に対して ADR を書こうとしてくるので、「プロジェクト全体に関わるものだけ書け」「ADR に仕様を書くな」など工夫する必要があった。
自分のサイトを作れた
なんだかんだで持ってなかったので、作れたのは嬉しい。
いつかはブログ機能も追加していきたいが、まだ道のりは長そう。
