「ちょっと直すだけ」が1ヶ月の泥沼に。AI開発でシステム全体を再構築する羽目になった話。

※この記事は、Claude Codeで1人開発しているSNS運用SaaS「ThreadPost」の開発日記です。

ペルソナ設定に「一人称」のドロップダウンを1つ足したかった。

ただそれだけだ。

数分で終わるはずの作業が、なぜかスタイルプレビューの長押しアニメーション実装にすり替わっていた。

型定義を1ついじった瞬間、システム全体がドミノ倒しのように崩壊した。

気づけば深夜。

36回のコミットを経て、僕は全く別のアプリを作っていた。

型定義1行が、36コミットの連鎖を引き起こした

「DetailedPersona型をスリム化し、generated_promptを直接使用」というコミットを打った瞬間、依存関係にあるUIコンポーネントが次々とエラーを吐き始めた。

Claude Codeは「じゃあここも直しますね」「あそこも不整合起きてます」と連鎖的に修正を提案してきた。

止める気はなかった。

「ペルソナ作成ウィザードのUX改善」が走り出し、気づけばLINE診断結果から発信タイプを自動選択するAPIまで作っていた。

型を疎結合にする設計が、AIとの対話の中で勝手に組み上がっていく。

企業開発なら、この規模の仕様変更は関係各所の承認だけで数週間飛ぶ。

僕は深夜の数時間で次々と本番環境にデプロイしていった。

翌朝、完全に寝不足で頭が割れるように痛かった。

楽しさの代償は常に肉体にくる。

しんたろー:
触ってたら全部つながってしまった。1つの型修正から36コミットの連鎖。Claude Codeの提案に乗り続けた結果、想定を遥かに超えるものが出来上がった。こういう開発が一番しんどくて、一番面白い。

スタイルプレビューを3回作り直した

「ペルソナ設定に発信タイプ（broadcastingType）を追加」したことで、今度はスタイルプレビューのUIが気になり始めた。

「スタイルプレビューは長押しで出して、指を離しても維持されるようにして」と指示を投げた。

ゲスト体験版でもアカウント未連携でも投稿候補が出せるように、導線も全部引き直した。

プレビュー機能は3回作り直した。

「お前さっきと同じもの持ってきたぞ」とClaude Codeに突っ込むと、ちゃんと別の実装案を出してきた。

「スタイルプレビューにスワイプ/矢印ナビゲーションを追加」し、さらに「スタイルプレビュー画像を16:9で固定トリミング」まで一気に進めた。

AIとのペアプログラミングは完全にゾーンに入っていた。

「ペルソナUI画面の不整合を修正」し、タブ名から項目の配置まで全部統一した。

この連鎖的な機能拡張の波に乗るのは、最高にワクワクした。

非同期処理の競合で3時間溶けた

「NewsSelectionModalのデフォルトカテゴリ初期化タイミング修正」。

モーダルを開いた時、無関係なニュース記事が一瞬表示されるのが気持ち悪かった。

カテゴリの設定が完了してから記事を取得するように直した。

「これで完璧だ」と思ったのも束の間、今度はカテゴリを切り替えると古い結果が残るようになった。

「NewsSelectionModal: カテゴリ切替時の古い結果表示を修正」というコミットを焦って打つ。

直らない。

古いリクエストが後から解決して状態を汚染する、典型的な競合状態だった。

クリーンアップ関数をサボった結果だ。

しんたろー:
ReactのuseEffectはマジで信用ならない。非同期処理の競合で3時間溶かした。「これ直して」ってClaude Codeに投げても、ライフサイクルの根本を理解してないと表面的なパッチしか当ててこない。10件中8件はこういう地味なやつ。

さらに動的インポートが原因で、レンダリングのタイミングまでズレていた。

画面がチラつき、ユーザー体験は最悪だった。

僕はキレて、動的インポートを窓から投げ捨てた。

「Studio UIとNewsSelectionModalの改善」で静的インポートに切り替えた。

それでも初期表示がもっさりしていた。

根本的な解決を諦め、fetchに200件のlimit制限を強行して無理やり安定させた。

「GuestLimitDialogをLINE誘導に変更 & NewsModal初期表示高速化」というコミットには、妥協と疲労が詰まっている。

美しいコードより、動くコードが正義だ。

落とし穴：スワイプUIが左端から動かない

スタイルプレビューにスワイプ機能を実装しようとした。

「スタイルプレビューをImagePreviewModalと同じスワイプ方式に統一」というコミットだ。

指の動きに合わせて画像がスライドする、あの気持ちいいUIを作りたかった。

しかし、スワイプ座標を管理するstateがコンポーネントの再レンダリングで初期化され続けた。

結果として、画像が常に左端に張り付く現象が発生した。

画面上では「スワイプできる」風のUIが出ているのに、実際は「左端から動かない固定画像」を必死にスワイプするシュールな状態だ。

僕は無表情で画面をこすり続けた。

指の摩擦でスマホの画面が熱くなった。

ローカル変数とstateの使い分けを間違えると、こういう間抜けなバグが生まれる。

Reactのレンダリングサイクルを甘く見た結果だ。

Claude Codeに「なんで動かないの」と投げたら、「stateの初期化タイミングを見直してください」と返ってきた。

それ、最初から言えよ。

今日の数字

| 指標 | 結果 | 比較対象 |

|---|---|---|

| 総コミット数 | 36件 | 先週の平均は1日8件。今日は完全に暴走した |

| 変更ファイル数 | 42ファイル | 普段の機能追加は5ファイル程度 |

| DBクエリ並列化 | 14個 | 直列実行から並列実行へ。企業なら仕様策定だけで1ヶ月 |

| プレビュー作り直し | 3回 | 同じものを持ってきたClaude Codeに3回突っ込んだ |

14個のDBクエリを完全並列実行に修正した。

直列で叩くのは、スーパーで14回レジに並び直すようなものだ。

並列化で体感速度は爆上がりした。

ただし、同時接続数が跳ね上がるため、Supabaseのコネクションプールが枯渇するリスクも抱え込んだ。

速さを手に入れた代わりに、スケーラビリティの爆弾を抱え込んだ。

最適化とは、常に別の場所に負荷を押し付ける行為だ。

ペルソナの自動停止機能も実装した。

「3日非アクティブ自動停止とペルソナ有効/無効トグル」のコミットだ。

ただ、cronジョブが本当に3日後に正確に発火するのか、まだ本番環境で確認できていない。

時限爆弾を仕込んで、爆発を待っている状態だ。

よくある質問

Q. 14個のDBクエリを並列化すると、Supabaseのコネクションプールはどうなりますか？

A. 瞬間的なコネクション数が最大14倍に跳ね上がる。Supabaseの無料プランはコネクション上限が低いため、同時アクセスが重なるとプール枯渇でシステム全体がダウンするリスクがある。今回はトラフィックが少ない段階での実装なので許容したが、ユーザーが増えたら即座に見直す。

Q. ReactのuseEffectで競合状態が起きたとき、Claude Codeはどう対処しましたか？

A. 最初は「条件分岐を追加してください」という表面的なパッチを提案してきた。3回突き返してようやく「クリーンアップ関数でリクエストをキャンセルする」という根本解に辿り着いた。AIに投げる前に「競合状態が原因」と明示すると、最初から正しい方向に来る。

Q. 型定義のリファクタリングで連鎖爆発を防ぐ方法はありますか？

A. 正直、今回は防げなかった。TypeScriptの型がビジネスロジックと密結合していると、変更の影響範囲は事前に読めない。企業なら影響調査だけで1週間かける作業を、僕はClaude Codeのエラー出力を見ながらリアルタイムで対処した。1人開発の強みはここで、「壊れたら直す」を高速で回せる。

システムは生き物だ

「ちょっと直すだけ」が、気づけばシステム全体の再構築につながっていた。

型定義1行から始まって、36コミット、42ファイル変更、深夜の頭痛。

ThreadPostは今日も、僕の想定を超えて育っている。

👉 ThreadPostでSNS運用を自動化する