Claude CodeでTypeScript地獄を攻略。Next.js 15移行で溶かした40時間

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

ビルドログが真っ白になるまで終わらない

ビルドが通った。Vercelの緑色のチェックマークが出た。僕は安堵して本番環境のURLを開いた。画面は真っ白だった。ブラウザのコンソールには赤文字のエラーが滝のように流れていた。Next.js 15のアップデートボタンを軽い気持ちで押したのが、地獄の始まりだった。AIに直させれば一瞬で終わると思っていた。

34回のコミットと0個の新機能

1日の総コミット数は34件。新機能は0件。バグ修正は5件。残りの29件は全てTypeScriptの型エラー修正とビルドエラー対応だ。

Next.js 15への移行作業だった。「動いた」と思ったら別のファイルが壊れる。直したと思ったらVercelのデプロイで落ちる。AIにコードを書かせているつもりが、僕はただの型定義の掃除屋になっていた。最終的にビルドログの警告が0になるまで、約23時間かかった。

TypeScriptのワカモレ状態

Next.js 15へのアップグレードは、型定義を少し調整すれば終わる事務作業だと思っていた。「npm install next@latest」を叩いた。ローカルで起動した。エラーが出た。Claude Codeにエラーログを投げた。「resolve TypeScript build errors」というコミットが作られた。これで終わるはずだった。甘かった。

Next.js 15からは、動的ルーティングのパラメータが非同期処理になった。これまでは同期的に扱えていたものが、全てPromise化された。従来の型定義が軒並み破壊された。依存する全コンポーネントの型が連鎖的に崩壊した。

Claudeは「動くこと」を優先する。厳密な型安全性を無視して、非nullアサーション（!）を多用する。大規模なリファクタリングで、この技術的負債が一気に爆発した。1つのファイルを直す。別のファイルで型エラーが起きる。それを直す。また別のファイルが赤くなる。TypeScriptのワカモレ状態だ。

しんたろー:
10件のエラーを直すのにAIと30回やり取りした。AIの提案通りに直して一発で通ったのは2回だけ。成功率6%。残りの28回は「ごめんなさい、別の箇所でエラーが出ました」の繰り返し。

本番ビルドを試す。「Fix TypeScript build error in post-candidates.tsx」。画像URL配列のnull値をフィルタリングする処理で型が合わない。AIに修正させた。「Fix build errors by forcing dynamic rendering for admin pages」。今度は管理画面のレンダリングでエラーだ。動的レンダリングを強制して回避した。

認証と環境変数の泥沼

Next.js 15の移行と並行して、画像生成のAPI制限が起きていた。Google AI StudioのAPIを使っていたが、250 RPDの制限に引っかかった。解決策はVertex AIのREST APIへの移行だ。エンドポイントと認証フローを変えるだけで済むはずだった。

「Vertex AI REST APIに移行してクォータ問題を解決」とスクリプトを書き換えた。デプロイした。動かない。画像生成のダイアログを開く。ローディングが回り続ける。コンソールには認証エラー。原因を探る中で、恐ろしい事実が発覚した。「Remove .env.local from git tracking」。過去に強制追加したミスで、機密情報が含まれたファイルがバージョン管理されていた。

しんたろー:
移行作業のついでにセキュリティインシデント未遂を発見した。心臓が止まるかと思った。AIは「ファイルを追加しますか？」と聞いてくるが、中身までは気にしてくれない。

設定を直し、再度デプロイする。Vercelの画面でビルドログを見守る。依存関係のインストール。静的ファイルの生成。ルートの最適化。全て緑色のチェックマークがついた。本番環境のURLを開く。画像生成ボタンを押す。数秒後、完璧な画像が生成された。計4時間の追加工数がかかった。コーヒーを淹れ直した。

落とし穴

Vercelのキャッシュが僕を嘲笑う。ローカルでは完璧に動くのに、Vercelにプッシュするとさっき直したはずの古いコードで落ちる。キャッシュのせいだ。強制リビルドをかけても同じエラーが出る。直したはずのファイルが、キャッシュのせいで古いコードのままビルドされていた。コミットハッシュを変えて、キャッシュを完全に無効化するまで、このループから抜け出せなかった。

しんたろー:
ビルドログを端から読んだ。10本以上あったエラーのリストが、コミットを重ねるごとに1つ、また1つと消えていく。この泥臭い作業、AI開発のキラキラしたイメージと全然違う。

今日の数字

| 項目 | 今回の数字 | 比較対象 |

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

| コミット数 | 34回 | 通常の機能開発（1日あたり7回） |

| バグ修正数 | 10件以上 | 通常の開発（1-2件） |

| 開発時間 | 23時間 | 本来の想定（5時間） |

1日のコミット数34回は、通常の機能開発の約5倍の密度だ。本来なら数時間で終わるはずの作業が、型エラーの連鎖により工数が4倍に膨れ上がった。代償として、休日の睡眠時間が完全に消滅した。

FAQ

Q. API移行のコスト面での影響は？

Vertex AIへの移行で、リクエスト単位の従量課金に変わった。月額数十ドルのコスト増で、クォータ制限によるサービス停止リスクを完全に排除できた。

Q. Vercelのキャッシュ問題はどう回避する？

ダッシュボードからの再デプロイ時に「Use existing build cache」のチェックを外すのが基本だ。それでも古い場合は、空のコミットを作成してプッシュし、コミットハッシュを更新して強制的にクリーンなビルド環境を作る。

Q. AI生成コードの型安全性は企業開発と比較してどう？

AIは「とりあえず動く」ことを優先し、非nullアサーションやany型を多用する傾向がある。プロジェクト初期に厳格なtsconfigを設定し、AIにルールを強制しないと後で技術的負債が爆発する。

終わりのない片付け

AIにコードを書かせているつもりが、AIが散らかした型定義を片付ける1日だった。

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