Claude Codeで設計から本番公開まで3時間｜イシュー駆動＋TDD＋Cloudflare Pagesの実践記録【AI活用検証vol.60】

AIコーディングツールの評価は、コードが書けるかどうかで止まりがちです。しかし実務で効くのは、設計からデプロイまでを止まらずに通せるかです。

この検証では、Claude Codeで「プランニング → イシュー作成 → TDD実装 → PR作成・マージ → デプロイ → DNS設定」の全工程を実行しました。プランニング開始から本番公開まで約3時間、Lighthouseは Performance 100 / Accessibility 95 / Best Practices 100 / SEO 100 という結果です。

この検証の概要

結論：Issue 1件あたり5〜10分でPRマージまで到達

最も効いたのはイシュー駆動開発のサイクルです。

gh issue create / gh pr create / gh pr merge を連続実行し、Issue作成 → 実装 → PR → マージの1サイクルが5〜10分で完了。5件のIssueを約30分で全て処理しました。

ここでの要点は、コード生成が速いことではありません。GitHubの操作までツール側で完結するため、作業の切れ目が発生しないという点です。

通常の開発では、実装が終わるたびにブラウザでGitHubを開き、PRを作り、マージし、ローカルに戻る——という往復が入ります。この切り替えが1日に何度も積み重なります。gh CLI連携があると、この往復が消えます。

実績タイム

手動で行えば2〜3日はかかる作業量です。削減効果は手動開発比で約60〜70%と試算しています。

プランモード：設計を先に確定させる

実装前にプランファイルを作成し、方針をすり合わせる工程です。

この検証では、AskUserQuestionで3つの選択肢（カテゴリ構成・ページ構成・サービス名表現）を同時に提示し、方針を決めました。あわせてWebサーチエージェントで市場相場を自動調査し、料金プランの根拠を提供しています。

プランモードは「設計 → 確認 → 実装」の流れを強制するため、手戻りが少なくなります。AIに実装させるとき、方針が固まらないまま書き始めると、後から大きく直すことになります。

TDD：テスト先行を厳密に回す

実装はテスト先行（Red → Green → Refactor）で進めました。1サイクルの実行フローは次のとおりです。

1. git checkout -b feat/service-data-model
2. テスト作成（tests/data/services.test.ts）→ Red確認
3. 型拡張 + データ定義 → Green確認
4. npx astro check → 型エラー0件
5. git add → git commit → git push
6. gh pr create → gh pr merge --squash
7. git checkout main → git pull

結果はテスト13件全通過、型エラー0件。vitestのパスエイリアス設定やtsconfig.jsonのexclude修正など、テスト基盤の整備も自動で対応しています。

セキュリティ監査エージェントがDNS設定の不備を検出

この検証で最も価値があったのがここです。

DNS設定時にsecurity-auditorエージェントが14項目の監査レポートを生成し、次の問題を検出しました。

• MXレコード不足（5つ中1つしか検出されていなかった） — CRITICAL
• DMARC未設定（なりすまし対策なしの状態） — HIGH
• SPFの重複リスク
• HTMLエスケープ未実装の指摘 — MEDIUM

特にMXレコード不足は深刻です。Cloudflareの自動DNSスキャンは、5つあるはずのGoogle WorkspaceのMXレコードを1つしか拾いませんでした。気づかずにネームサーバーを切り替えていれば、メールが止まっていた可能性があります。

自動スキャンを信用してはいけない——これがこの検証で得られた最も実用的な教訓です。

Google Workspaceを壊さずにCloudflareへ移す

DNS移行で守るべきものは、メールです。移行時に必要だったMXレコードは次の5つです。

あわせてSPF（v=spf1 include:_spf.google.com ~all）とDKIM、そして自動スキャンでは検出されないDMARC（v=DMARC1; p=quarantine; rua=mailto:...）を手動で追加しました。

DMARCは初期運用では p=none（監視のみ）で始め、問題なければ段階的に p=quarantine → p=reject へ強化するのが安全です。

移行手順で押さえるべき順番

最も重要なのは順番です。

ネームサーバーを切り替える前に、Cloudflare側のレコードを完璧にしておくこと。切り替えた後にレコード不足が判明すると、その時点でメールが止まります。

ネームサーバー切り替え前の確認観点は次のとおりです。

1. MXレコードが5つ全て揃っているか（表示が切れている場合はクリックしてフル値を確認）
2. SPFレコードがルートドメインに1つだけか（複数あるとエラー）
3. DKIMの値がGoogle Workspace管理画面と一致するか
4. メール送信サービス側のDNSレコードが全て「Verified」か
5. DMARCが追加されているか

ハマったポイント

もうひとつ、Squarespace Domainsでのネームサーバー変更にも詰まりました。変更画面に既存ネームサーバーの「削除ボタン」がなく、「カスタム ネームサーバーを使用」ボタンをクリックすると入力フォームに切り替わる仕様です。直感的ではないため、事前に知っておくと迷いません。

AIに任せられない領域

この検証では、Claude Codeが直接扱えない領域も明確になりました。

• OS権限が絡む操作 — npmキャッシュの権限問題は sudo が必要で、手動介入が必要（セキュリティ的には正しい挙動）
• Cloudflare / ドメイン管理サービスのGUI操作 — 直接実行はできず、スクリーンショットベースの案内にとどまる

ただし後者については、ステップバイステップの案内が正確で、スクリーンショットを共有しながら進められました。「代わりに操作する」ことはできなくても、「正しく案内する」ことはできるという整理になります。

出力品質

Astro 6 + @astrojs/cloudflare の組み合わせでLighthouse全項目90点以上が容易に達成できることも確認できました。ゼロJSをデフォルトとし、インタラクション部分のみReact Islandsにする設計です。

ランニングコスト

よくある質問

Claude Codeで開発のどこまでを任せられますか？

プランニング、イシュー作成、TDD実装、PR作成・マージ、デプロイ設定までを一気通貫で実行できます。OS権限が絡む操作と外部サービスのGUI操作は手動介入が必要ですが、後者は正確な手順案内が可能です。

どのくらい速くなりますか？

この検証では手動開発比で約60〜70%削減と試算しています。手動なら2〜3日かかる作業量を約3時間で完了しました。Issue 1件あたりは5〜10分でTDD実装〜PRマージまで到達しています。

DNS移行で最も注意すべき点は？

ネームサーバーを切り替える前に、Cloudflare側のレコードを完璧にしておくことです。特にMXレコードは自動スキャンが全て拾わないことがあるため、5つ全て手動で確認してください。切り替え後にレコード不足が判明するとメールが止まります。

セキュリティ監査エージェントは何を見つけましたか？

14項目の監査レポートを生成し、MXレコード不足（CRITICAL）、DMARC未設定（HIGH）、SPFの重複リスク、HTMLエスケープ未実装（MEDIUM）などを検出しました。コードレビューだけでなくDNS設定の監査にも使えることが確認できました。

まとめ

• Claude Codeでプランニング → Issue → TDD実装 → PR → デプロイ → DNS設定を約3時間で完了（手動なら2〜3日相当）
• Issue 1件あたり5〜10分でPRマージまで到達。5件を約30分で処理
• プランモードが「設計 → 確認 → 実装」を強制するため手戻りが少ない
• security-auditorエージェントがMXレコード不足とDMARC未設定を事前検出。Cloudflareの自動DNSスキャンは信用しない
• 成果物はLighthouse Performance 100 / Accessibility 95 / Best Practices 100 / SEO 100、ホスティング費用0円
• OS権限操作と外部サービスのGUI操作は手動介入が必要。ただし手順案内は正確

AI駆動開発の価値は、コードを書く速度より「工程をまたぐときに止まらないこと」にあります。イシュー管理やデプロイまで同じ場所で扱えると、その効果がはっきり出ます。

株式会社AI棒では、こうしたAI活用の検証を日々行い、企業の開発体制へのAI導入を支援しています。ご相談はお問い合わせフォームから、継続的な伴走支援についてはAI参謀をご覧ください。