自分の発信を1か所に集めるハブサイト「Hubpin」を、個人で作りました。
制作の経緯は「Hubpin 開発記録」に時系列でまとめています。
Claude Code を取り入れながら、設計から実装まで一人で進めています。
複数のブログやサービスから記事を集めて、1つのページに並べる機能を作っていました。
工程の計画では、保存先のテーブルを作って、取得する処理を3媒体ぶん書いて、最後に画面へ出す順番になっていました。
素直な順序だと思います。
ただ、この並びで進めると、6時間以上のあいだ画面が何も変わりません。
順番を入れ替えました
取得する処理を1行も書かないうちに、表示のほうを先に通すことにしました。
まず保存先のテーブルに、手でダミーの行を入れます。
その状態で公開ページを作ると、カードが3件並びます。
中身は自分で入れた嘘のデータです。
次に取得の処理を書くと、そのダミーが本物の最新記事に置き換わります。
やることの総量は同じですが、途中で画面が動きます。
根拠は、前の工程の実測でした
思いつきではなく、同じ開発の中に比較できる材料がありました。
ある工程の手順では、初めて触る技術が1つしかないのに、見積の4.8倍かかっています。
別の工程の手順では、初めて触る技術が3つあったのに、0.8倍で収まりました。
数だけ見ると逆です。
違いは割り方でした。
0.8倍で終わったほうは、4段階に割って、各段階の終わりに動く状態を作っています。
未知の数ではなく、動く状態が途中に挟まっているかどうかで差がついていました。
どこで切り上げても形が残るように並べました
そこで、手順ごとの到達点をこう置きました。
土台だけ作った時点では、まだ何も動きません。
次の手順まで進むと、カードが3件並びます。中身はダミーです。
その次で、3件が本物に変わります。ここで1媒体ぶんが完成します。
最後まで行くと、3媒体とも動きます。
途中で中断しても、2番目以降ならスクリーンショットが撮れる状態です。
副産物がありました
取得の処理を書いているとき、保存できたかどうかを画面で確認できました。
以前はデータベースの管理画面を開いて、テーブルの中身を見に行っていました。
表示が先にできていると、ブラウザを更新するだけで済みます。
デバッグの往復が短くなったぶん、こちらのほうが効いていたかもしれません。
