Claude で HTML を継ぎ足し編集してブラウザに JS が漏れた話と、実践的な対処5箇条

Vite + TypeScript + Biome + Vitest の初期構築を Claude に丸投げするための再利用プロンプトと47項目チェックリストを提供。個人開発のセットアップを実測90分から10分に短縮し、依存衝突・設定ドリフト・CI 落ちを回避する手順を12回の失敗ログと生成テンプレ込みで配布。読了後は自分のスタックを差し替えるだけで動く構築自動化セットが手元に残る。

AI にコード実装を依頼する前に、背景・目的・変更範囲・責務分割・入出力・境界条件・テスト観点をまとめた8項目の設計メモを書くことで、曖昧な依頼を減らし、レビューで説明できる実装を得やすくなった。設計メモで観点漏れをゼロにはできないが、自分の解像度を上げつつレビューで漏れを拾う二段構えの方法を紹介。

LLM との対話で時間を失う空転を避けるため、著者が 6 ヶ月の壁打ちログから抽出した 5 つの軸（前提共有・問いの粒度・答えの種類・往復数・出力形式）を紹介。設計判断・スタック選定・バグ調査など場面ごとに 1～2 軸を選んで適用することで、壁打ちが感覚から再現可能な技術へ変わる。

AIは訓練時の人間の選好に基づき、賛成することが「正解」として学習される（sycophancy）という仕組みを説明。確証バイアスと組み合わさると判断を誤らせる危険がある。これを防ぐため、AIを「反論役」に明示的に割り当てるプロンプト3本とそれを関数化するコード例を提示し、壁打ちを仕組み化する方法を解説している。