OmochiXを検索

Esc で閉じる

AI開発

Claude CodeでAI自動開発ループを構築|仕様→実装→QA→本番監視まで【2026年版】

AIがコードを書けるようになったことで、開発速度は大きく変わり始めています。 しかし、AIに「実装して」と依頼するだけでは、開発工程全体が自動化されたとは言えません。 実際の開発には、仕様確認、実装、Preview環境へ […]

OmochiX 公開 更新 約16分で読めます
ChatGPT Image 2026年9月15日 16 41

AIがコードを書けるようになったことで、開発速度は大きく変わり始めています。

しかし、AIに「実装して」と依頼するだけでは、開発工程全体が自動化されたとは言えません。

実際の開発には、仕様確認、実装、Preview環境へのDeploy、テスト、CI、失敗原因の調査、本番反映、そしてProduction監視まで、多くの工程があります。

そこで今回考えるのが、Claude Codeを中心に開発工程そのものを一つのループへする仕組みです。

Claude Code、GitHub、Vercel Preview、QA Database、Playwright、GitHub Actions、Sentryをつなぐことで、AIがコードを書くところだけでなく、検証・修正・監視まで参加できる開発フローを構築できます。

この記事でわかること

  • AI自動開発ループ全体の構成
  • Claude Code・Vercel・Playwright・Sentryの役割
  • 実装から自動QAまでつなぐ方法
  • CI失敗や本番エラーを開発ループへ戻す考え方
  • AIへ任せる範囲と人間が残す判断

結論

AI開発の次の段階は「コード生成の自動化」ではなく、「仕様 → 実装 → Preview → QA → 修正 → Production → 監視」を一つの閉じたループにすることです。AIが何度でも安全に試せる環境を作り、Productionへの最終判断だけ人間に残す構成から始めると、自動化と安全性を両立しやすくなります。

今回作るAI Development Loop

今回の全体構成を先に見てみます。

AI Development Loop FLOW
Issue / Specification
↓
Claude Code
↓
Implementation
↓
Feature Branch
↓
GitHub
↓
Vercel Preview
↓
QA Database
↓
Playwright E2E
↓
GitHub Actions

PASS ───────────────→ Human Review
↓
FAIL
↓
Claude Code
↓
Root Cause Analysis
↓
Minimal Fix
↓
Regression Test
↓
CI / E2E

PASS
↓
Human Approval
↓
Merge
↓
Production
↓
Sentry Monitoring

NO ERROR ───────────→ Monitoring

ERROR
↓
GitHub Issue
↓
Claude Code
↓
Investigation
↓
Fix
↓
Preview / QA
↓
Human Approval
↓
Production

ポイントは、開発工程を一本道にしないことです。

テストやProduction監視で問題が見つかった場合は、再びClaude Codeへ戻し、原因調査・修正・再検証を行います。

それぞれのツールには役割がある

AI自動開発では、すべてを一つのAIへ任せる必要はありません。

それぞれのツールに明確な役割を持たせます。

Claude Code

実装と原因調査を担当します。

  • 仕様確認
  • コード実装
  • 原因分析
  • 最小修正

GitHub

変更と履歴を管理します。

  • Issue
  • Branch
  • Pull Request
  • Review

Vercel Preview

変更したアプリを本番前に動かします。

  • Preview URL
  • Branch Deploy
  • Preview Env
  • Review Environment

Playwright

実際のユーザー操作を自動検証します。

  • Browser Test
  • Authentication
  • User Flow
  • Regression

GitHub Actions

品質チェックを自動実行します。

  • Lint
  • Typecheck
  • Build
  • E2E

Sentry

Productionで発生した問題を検知します。

  • Runtime Error
  • Stack Trace
  • Release
  • User Impact

Key Point

AIを万能な一つのツールとして考えるのではなく、開発工程の中で各サービスの役割を分離すると、自動化しやすくなります。

STEP 1:Issueと仕様から開発を始める

自動開発の入口は、いきなりコードを書くことではありません。

まず「何を作るのか」を明確にします。

Issueに含めたい情報

  • 目的
  • 実装内容
  • 変更してよい範囲
  • 変更してはいけない範囲
  • 完成条件
  • 必要なテスト

AIへ曖昧な指示を渡すほど、完成判定も曖昧になります。

そのため、Issueを単なるタスク名ではなく、AIが実装判断に利用できる仕様書として扱います。

STEP 2:Claude CodeがFeature Branchで実装する

仕様が決まったらClaude Codeへ実装を任せます。

このとき、mainへ直接変更するのではなくFeature Branch上で作業させます。

Implementation Rule FLOW
Issue
↓
Claude Code
↓
Read Specification
↓
Read Existing Code
↓
Feature Branch
↓
Minimal Implementation
↓
Related Tests
↓
Commit
↓
Push

ここで重要なのが、毎回大きく書き換えさせないことです。

原因や仕様に直接関係する範囲を中心に変更し、差分を小さく保つ方がレビュー・テスト・ロールバックを行いやすくなります。

STEP 3:Vercel Previewへ自動Deployする

BranchへPushしたら、その変更を実際に動く環境へ展開します。

Vercel Previewを使えば、Productionを変更せずにBranchごとのアプリを確認できます。

Production

実ユーザーが利用する環境です。

  • Production DB
  • Production Secrets
  • Real Users

Preview

変更を安全に確認する環境です。

  • Preview URL
  • QA DB
  • Test Accounts

環境を分離する

PreviewからProduction Databaseや本番用外部サービスへ接続すると、テストのつもりで実データを変更する可能性があります。Preview用DB・テストアカウント・環境変数を分離する設計が重要です。

STEP 4:QA専用データでPlaywrightを実行する

Previewが完成したら、ブラウザを使ったE2Eへ進みます。

Playwrightでは、実際のユーザー操作に近い流れを自動化できます。

E2E Example FLOW
Open Preview
↓
Login QA User
↓
Create Data
↓
Edit Data
↓
Submit Form
↓
Verify Result
↓
Check Database State
↓
PASS / FAIL

ここで重要なのが、テスト用のデータを毎回人間が準備しないことです。

QA専用Tenant、QA User、Seed Dataなどを用意しておけば、AIやCIが何度でも同じ条件からテストできます。

STEP 5:GitHub Actionsで品質チェックする

E2Eだけではなく、静的な品質チェックも自動化します。

代表的なValidation

  • Lint
  • Typecheck
  • Unit Test
  • Build
  • Playwright E2E

人間が毎回コマンドを一つずつ実行するのではなく、開発プロジェクト側に一括Validationを用意すると扱いやすくなります。

Validation Pipeline FLOW
Code Change
↓
Lint
↓
Typecheck
↓
Unit Test
↓
Build
↓
E2E
↓
Validation Report

STEP 6:CIが失敗したらClaude Codeへ戻す

ここからが、単なるCIとAI開発ループの大きな違いです。

通常のCIでは、FAILしたところで人間へ通知されます。

AI開発ループでは、その失敗を再びClaude Codeへ渡します。

CI Repair Loop FLOW
GitHub Actions
↓
FAIL
↓
Claude Code
↓
CI Status
↓
Job Log
↓
Git Diff
↓
Playwright Result
↓
Root Cause Analysis
↓
Minimal Fix
↓
Regression Test
↓
Push
↓
CI Again

これにより、人間が毎回ログを開き、原因を探し、AIへ貼り付け直す作業を減らせます。

重要なのは「テストを通すこと」ではない

AIへCI修正を任せるときに最も危険なのが、PASSだけを目的にしてしまうことです。

禁止したい修正

Assertion削除、テストのskip、期待値の緩和、根拠のないTimeout延長などによってテストを緑にしても、問題を解決したことにはなりません。

AIには最初から修正ルールを渡しておきます。

Repair Rules TEXT
・仕様を維持する
・原因を特定してから変更する
・最小差分で修正する
・失敗テストをskipしない
・assertionを弱めない
・無関係なファイルを変更しない
・修正後に回帰テストする
・仕様変更が必要なら停止して報告する

STEP 7:PASSしたらHuman Reviewへ進む

すべてのValidationがPASSしたら、Productionへ出せる候補になります。

ただし、ここですぐ自動Mergeする必要はありません。

おすすめ構成

AIには実装・テスト・原因調査・修正まで任せ、Productionへ入れる最後の判断だけHuman Approvalとして残します。

人間はすべてのコードを書くのではなく、AIが作った差分、テスト結果、リスク、仕様との一致を確認します。

人間のレビューも変わる

AI開発では、人間の役割が「コードを書く人」から「判断する人」へ少しずつ移ります。

AI

  • 実装
  • テスト
  • 原因調査
  • 修正
  • 差分報告

Human

  • 仕様判断
  • 優先順位
  • 高リスク変更
  • Production承認
  • ビジネス判断

STEP 8:ProductionへDeployする

Human Reviewを通過したらmainへMergeし、Productionへ反映します。

ここで開発は終了ではありません。

実際のユーザーが使い始めて初めて分かる問題があるためです。

STEP 9:SentryでProductionを監視する

Productionへ出したあとはSentryのような監視ツールでRuntime Errorを検知します。

Production Monitoring FLOW
Production
↓
Real User
↓
Runtime Error
↓
Sentry
↓
Stack Trace
↓
Release Context
↓
Impact
↓
Issue

CIやE2Eでは「本番前」を守り、Sentryでは「本番後」を守ります。

STEP 10:本番エラーを再び開発ループへ戻す

Sentryで問題が見つかった場合、そのエラーを開発工程へ戻します。

Production Repair Loop FLOW
Sentry Error
↓
GitHub Issue
↓
Claude Code
↓
Root Cause Analysis
↓
Regression Test
↓
Minimal Fix
↓
Feature Branch
↓
Preview
↓
Playwright
↓
CI
↓
Human Review
↓
Production

ここまでつながることで、開発工程は直線ではなく循環する仕組みになります。

これがClosed Loop Development

従来の開発では、多くの工程が人間の手作業によって分断されていました。

Traditional Development FLOW
Developer writes code
↓
Human tests
↓
Human checks CI
↓
Human investigates errors
↓
Human fixes
↓
Human deploys
↓
Human watches errors

AI開発では、この間にある手作業を少しずつつないでいきます。

Closed Loop Development FLOW
Specification
↓
AI Implementation
↓
Automatic Preview
↓
Automatic QA
↓
Automatic Validation
↓
Automatic Investigation
↓
Automatic Repair
↓
Human Approval
↓
Production
↓
Automatic Monitoring
↓
Issue Detection
↓
AI Investigation
↓
Repair
↓
Human Approval

完全自動化を最初から目指さない

ここまで見ると、「全部AIへ任せればいい」と考えたくなるかもしれません。

しかし、実際には段階的に自動化する方が安全です。

  1. 1

    AI実装

    まずコード作成だけAIへ任せます。

  2. 2

    自動QA

    Preview・Validation・E2Eを自動化します。

  3. 3

    自動原因調査

    CI失敗の分析をAIへ任せます。

  4. 4

    自動修正

    低リスクな修正だけAIへ許可します。

  5. 5

    Production監視連携

    Sentryなどの障害情報を開発へ戻します。

  6. 6

    Human in the Loop

    最終承認や高リスク判断を人間に残します。

AIを止める条件も設計する

AI自動化では「何をできるか」だけでなく、「どこで停止するか」が重要です。

Humanへ戻したいケース

  • 仕様変更が必要
  • Database Migrationが必要
  • 認証・権限ロジックを変更する
  • 決済や請求へ影響する
  • 大量のファイル変更が必要
  • 原因を特定できない
  • 同じ問題を複数回修正してもFAILする

OmochiX View

AIを安全に自動化するには「できること」を増やすだけでなく、「やってはいけないこと」と「人間へ戻す条件」を明文化する必要があります。

権限もProductionと分離する

AIエージェントへ大きな権限を与えれば自動化できる範囲は増えます。

しかし、それだけ失敗したときの影響範囲も大きくなります。

AIに許可する

  • Feature Branch
  • Preview
  • QA Database
  • Test Data
  • CI Logs

慎重に扱う

  • main
  • Production DB
  • Production Secrets
  • Billing
  • Admin Permissions

AIが何度失敗してもProductionへ影響しない環境を先に作る方が、単純にAIの能力を上げるより重要な場合があります。

少人数開発ほど効果が大きい

大規模な開発チームでは、実装、QA、レビュー、運用などを複数人で分担できます。

一方、少人数の開発では、一人がこれらすべてを担当するケースがあります。

そのため、実装速度だけをAIで上げても、QAや障害対応が人間のままだと、そこが新しいボトルネックになります。

重要な変化

AI開発で重要なのは、一人の開発者が何倍もコードを書くことだけではありません。これまで別の担当者が行っていた実装・テスト・障害調査・修正の一部をAIエージェントへ移し、人間が意思決定へ集中できる構造を作ることです。

最終的には「開発するAI」から「開発工程を回すAI」へ

AIコーディングツールは、最初はコードを生成するための道具でした。

しかしGitHub、CI、Preview環境、ブラウザテスト、監視ツールまで接続すると、その役割は変わります。

AI Developer Evolution FLOW
Code Generator
↓
Coding Assistant
↓
Implementation Agent
↓
QA Agent
↓
Repair Agent
↓
Development Agent
↓
Development System

ここから先は、一つのAIがコードを書くという発想ではなく、開発工程そのものをAIが回せるように設計することが重要になってきます。

3行まとめ

  • Claude Code・Vercel Preview・Playwright・GitHub Actions・Sentryをつなぐと、実装から本番監視まで一つの開発ループにできる
  • CI失敗やProductionエラーを再びClaude Codeへ戻すことで、実装 → 検証 → 修正 → 再検証を循環させられる
  • Productionへの最終承認や高リスク変更はHuman in the Loopとして残し、安全な環境から段階的に自動化する

次はAI開発チームを並列化する

一つのClaude Codeが一つのタスクを処理するだけでも、開発効率は大きく変わります。

しかし次の段階では、複数のタスクを複数のAIエージェントへ分け、同時に開発を進める構成も考えられます。

次の記事では、Issueを複数のAIエージェントへ割り当て、Feature Branchごとに並列開発し、QAとReviewを統合する「AI開発チーム」の設計を考えていきます。

あわせて読みたい

Claude CodeでCI失敗を自動修正する

GitHub Actionsの失敗から原因調査・最小修正・再テストまでをAI開発フローへ組み込む方法を解説します。

記事を読む

あわせて読みたい

Sentry × Claude Codeで本番エラー対応を自動化

Productionで検知したエラーを開発フローへ戻し、原因調査・修正・再検証までつなぐ方法を解説します。

記事を読む

AI開発支援

自社の開発工程をAI化したい方へ

Claude Code、GitHub Actions、Vercel、Playwright、Sentryなどを組み合わせ、実装からQA・障害対応までつながるAI開発環境の設計を支援します。

AI開発について相談する

出典:Anthropic Claude Code Action公式ドキュメント / Vercel公式ドキュメント / Microsoft Playwright公式ドキュメント / Sentry公式ドキュメント

NEXT STEP

次に知りたいAI情報へ。

自分に合うAIツールを探す 最新のAIニュースをもっと見る

OmochiXをフォロー

最新のAIニュースや活用情報をSNSでも配信しています。