Hubpin 開発記録

このページについて

最終更新: 2026-09-04 / 現在: v1.0(外部サービスからの自動取り込み)を実装中

転職用のポートフォリオとして、個人でWebアプリ「Hubpin」を作っています。
Zenn・ブログ・X・GitHub に散らばった自分の発信を、1か所に集めて見せるハブサイトです。

2026年8月17日に v0.5(カードの登録・編集・並び替えと、公開ページ)を公開しました。
いまは、外部サービスから記事を自動で取り込む v1.0 を作っています。

設計と判断は自分で行い、実装も原則自分で書いています。AIには手順書・レビュー・調査を任せています。

記事は起きた順に並べています。上から読むと、題材を決めるところから順に追えます。
載せているのは公開済みの記事だけで、書きかけの分は公開のたびに足していきます。
ほかの作品の記録は 個人開発の記録 にまとめています。

この作品で決めたこと

作る前に、外せない3つを決めました。迷ったらここに戻ります。

1. 公開ページは静的サイト並みの速さを保つ(事前生成する)
2. カードの追加・編集・並び替えができる(認証つき)
3. 外部の発信を自動で取り込む

1. 題材を決めるまで(2026年7月下旬〜8月上旬)

1作目を公開したあと、2作目の題材を決めるのに2週間ほどかかりました。
案を出しては落とし、「自分にしか作れない」と「自分に作れる」が別のことだと分かった時期です。

2. 計画を立てる(8月上旬)

工程表と見積を作った時期です。
「1日に何時間使えるか」を外したところから始まり、AIとの分担の形もここで決めました。

3. 設計(8月4日〜6日)

URLの構造・画面のレイアウト・データの形を決めた時期です。
手書きで組んでいたレイアウトが、データを可変にした瞬間に破綻して、作り直しました。

4. 実装 v0.5(8月6日〜13日)

作りながら踏んだことを、テーマごとにまとめています。
どれも上から順に読むと、同じ勘違いがどう解けていったかが追えます。

手順書と見積のこと(9本)

実装の前に手順書を書く運用にしています。
書いてあることは速く終わり、書いていないことは見積どおりかかりました。
その手順書自体が罠を仕込んでいたこともあります。

型のこと(9本)

「型を書いた」と「型が守ってくれる」は別のことでした。
書いた型が誰にも検証されていない状態から始まって、**AIが書いた存在しない値が
すべての検査を通り抜ける**ところまで行きます。

1. 壊れていないコードに出た型エラーが、指していたのは設計の穴でした
2. 「エラーが出ないまま間違っている」を4件並べたら、2種類に分かれました
3. 値がある保証だと思って付けていた「!」は、確認しないと決めた印でした
4. 「item: Item」と書いた型は、誰にも検証されていませんでした
5. DBから型を生成したら、1箇所だけ手書きより弱くなりました
6. AIが書いた存在しない値が、型検査もLintもDBの型も通り抜けました
7. 文字数の上限を決めようとしたら、切っている場所がどこにもありませんでした
8. 1つの数字で足りたのは、2つの基準がたまたま近かっただけでした
9. asが危険かどうかは、書いた場所で決まった

レンダリングとビルド(5本)

'use server''use client' が何を宣言しているのかを、取り違えたまま進めていました。
最後は「静的に焼く」と決めた判断が、ビルドを外部サービスに依存させるところまで繋がります。

1. use server が宣言していたのは、実行場所ではありませんでした
2. Client Component だから動的だと思っていたページが、静的に焼けていました
3. 静的生成にした瞬間、ビルドが外部サービスに依存し始めました
4. 開発サーバーと本番ビルドが、同じ言葉で別のことを言っていました

Next.js そのものについては、教材を選ぶところから詰まりました。

権限まわり(RLS・6本)

データベース側で守ると決めたのに、書いたポリシーが1行も読ませてくれないところから始まり、
逆に見せすぎていたことに4日後に気づくまでの話です。
後半の2本は、守れていることを「証明する」側の話になります。

1. RLSポリシーを7本書いても、データは1行も読めませんでした
2. RLSのポリシーを足すほど、見える範囲が広がりました
3. 権限の検証が通ったのは、そのとき他人がいなかったからでした
4. 二重に防御していたら、片方が壊れていることが見えなくなりました
5. RLSが効いている証明に、でたらめなIDは使えなかった
6. updateは0行でもエラーにならないのに、insertはエラーになる

フォームと並び替え

フォームの共通化・入力チェック・並び替えで踏んだことです。順次公開していきます。

準備中です。

5. 公開する(8月16日〜17日)

hub.mt-tk.com に v0.5 を公開した2日間の話です。
公開前のセキュリティレビュー、本番環境の設定を「予想してから測る」こと、
個人サイトのトップを新しいアプリへ向ける切り替えまで含みます。順次公開していきます。

準備中です。

6. v0.5 の振り返り(8月19日〜27日)

公開したあとに、工程表とのズレ・実績時間・「作れたが説明できないコード」を棚卸しした時期です。
順次公開していきます。

準備中です。

7. v1.0 外部サービスからの自動取り込み(8月24日〜)

Blog・Zenn・GitHub から記事を自動で取り込む部分を作っています。
取り込みの処理・毎日の自動実行・取得ログまでが範囲です。順次公開していきます。

準備中です。

技術的な詳細は Zenn に書いています

このページは「何をどう決めたか」の流れを追うためのものです。
再現できる形の技術メモは Zenn に分けています。上から起きた順です。