AI駆動開発で技術ブログを構築 - Claude Code × Gemini の実践録

はじめに

2025年、AI活用はもはや「補助的なツール」ではなく「標準的な開発手法」になりつつあります。 本記事では、実際に技術ブログを立ち上げる過程で、複数のAIツールをどのように組み合わせ、どう活用したかを記録します。

技術スタック概要

モノレポ構造

hagyyyy.me.blog/
├── api/                    # バックエンド (NestJS)
│   ├── src/
│   ├── prisma/
│   └── package.json
├── web/                    # フロントエンド (Next.js)
│   ├── src/
│   └── package.json
├── .claude/                # Claude Code設定
│   ├── commands/           # カスタムコマンド
│   └── prompts/            # プロンプトテンプレート
├── .gemini/                # Gemini Code Assist設定
└── docs/                   # ドキュメント

フロントエンド (/web)

• Next.js 15 (App Router)
• TypeScript
• Tailwind CSS v4

バックエンド (/api)

• NestJS
• TypeScript
• Prisma ORM
• JWT認証

インフラ

• Vercel(ホスティング)
• Vercel Blob (画像ストレージ)
• Supabase (PostgreSQL)

開発ツール

• Claude Code (コード生成の主力)
• Gemini Code Assist (GitHub連携レビュー)
• Playwright MCP(動作確認自動化)
• Gemini MCP (設計壁打ち & コードレビュー)

AI駆動開発のワークフロー

1. 設計フェーズ: Gemini MCP での壁打ち

プロジェクト初期の設計検討では、Gemini の MCP (Model Context Protocol) を Claude Code に設定し、実装方針の壁打ち相手として活用しました。

具体的な活用例:

# Claude Code内での対話例
User: 記事のサムネイル画像のアップロード機能を実装したい。設計方針を提案してください。

[Claude Codeが応答]
- サムネイル画像のアップロード機能を実装するためには、以下のような設計が必要です。

User: Gemini MCPにレビューを依頼してください。

[Gemini MCPが応答]
- 設計方針に問題があります。
- セキュリティ面での問題があります。

[Claude Codeが応答]
- 設計方針を修正しました。
- セキュリティ面での問題を修正しました。

User: 設計方針を修正したので、実装を開始してください。

2. 実装フェーズ: Claude Code + カスタムコマンドの活用

コード生成の主力はClaude Codeが担当しました。 プロジェクト固有の品質チェックやGit操作を効率化するため、.claude/commands/配下にカスタムコマンドを定義しました。

カスタムコマンドの活用

.claude/commands/quality-check.md - 品質チェック自動化

# モノレポ構造に対応した品質チェック
/quality-check

# 実行内容:
# API ディレクトリ:
#   - npm run format (Prettier)
#   - npx prisma format
#   - npm run lint (ESLint)
#   - npx tsc --noEmit (型チェック)
#   - npm run test:cov (テストカバレッジ)
#
# WEB ディレクトリ:
#   - npm run format
#   - npm run lint
#   - npx tsc --noEmit
#   - npm run build (Next.jsビルドチェック)

.claude/commands/git-push.md - プッシュ前品質保証

# 品質チェック → git add → commit → push を一括実行
/git-push

# 実行フロー:
# 1. APIとWEBの両ディレクトリで品質チェック
# 2. エラーがあれば修正を実施
# 3. 再チェックして全て成功したら:
#    - git add -A
#    - git commit -m "適切なコミットメッセージ"
#    - git push

.claude/commands/create-pr.md - PR自動作成

# 高品質なPRを自動生成
/create-pr

# 機能:
# - 変更ファイルとコミット履歴を分析
# - 適切なprefix自動判定 (feat/fix/refactor等)
# - 技術的詳細を含むPR本文生成
# - CI/CD監視と自動修正（最大3回）

実装の流れ:

// 1. Claude Codeに要求
"記事一覧を表示するAPIエンドポイントを作成して。
ページネーション、カテゴリフィルター、タグフィルターに対応すること"

// 2. 生成されたコード (NestJS)
@Controller('posts')
export class PostsController {
  constructor(private readonly postsService: PostsService) {}

  @Get()
  async findAll(
    @Query() query: FindPostsQueryDto,
  ): Promise<PaginatedPostsDto> {
    return this.postsService.findAll(query);
  }
}

// 3. 品質チェック
/quality-check

// 4. Git操作
/git-push

3. 動作確認フェーズ: MCP Playwright による自動化

従来は手動でブラウザを開いて動作確認していましたが、MCP Playwrightを導入することで、この作業を一部削減しました。

活用例:

# Claude Codeへの指示
"画像アップロード機能を実装したので、Playwright mcpを使い動作確認してください"

[Claude CodeがMCP Playwrightを使用]
1. ブラウザを起動
2. http://localhost:3000/posts/new にアクセス
3. 画像をアップロード
4. 画像がアップロードされることを確認
5. スクリーンショットを撮影して報告

メリット:

• 手動テストの時間を大幅削減
• 複雑な操作フローも自動実行
• スクリーンショットで視覚的に確認可能
• レグレッションテストが容易

4. レビューフェーズ: Gemini Code Assist での自動レビュー

GitHub上でのコードレビューにはGemini Code Assistを活用しました。

レビュープロセス:

1. Claude CodeでPRを作成（/create-prコマンド使用）
2. Gemini Code AssistがGitHub上で自動レビュー
3. 指摘事項をClaude Codeで修正
4. 再レビュー → マージ

Gemini Code Assist設定 (.gemini/config.yaml):

code_review:
  disable: false
  comment_severity_threshold: MEDIUM

memory_config:
  disabled: false

ignore_patterns:
  - "node_modules/**"
  - ".next/**"
  - "dist/**"
  - "prisma/migrations/**"

have_fun: false

.gemini/styleguide.mdでコーディング規約を明示:

# Hagyyyy Blog - コーディングスタイルガイド

## useEffect Policy（重要）

useEffectは外部システムとの同期にのみ使用する

## セキュリティガイドライン

### OWASP Top 10 対策

1. Broken Access Control
   - 全エンドポイントで認証・認可をチェック
   - ユーザーIDはJWTトークンから取得

2. Injection
   - Prismaのパラメータ化クエリを使用

・・・

アーキテクチャ詳細: 3層アーキテクチャの実装

レイヤー構成

api/src/
├── <module>/
│   ├── <module>.controller.ts    # プレゼンテーション層
│   ├── <module>.service.ts       # ビジネスロジック層
│   └── dto/                      # データ転送オブジェクト
├── prisma/                       # データアクセス層
│   └── prisma.service.ts
└── auth/                         # 認証モジュール
    ├── guard/
    └── strategy/

各層の責務

プレゼンテーション層 (Controllers):

• HTTPリクエスト/レスポンスの処理
• バリデーション（形式チェック）
• 認証・認可

ビジネスロジック層 (Services):

• ビジネスルールの実装
• トランザクション管理
• ドメイン知識の集約

データアクセス層 (Prisma):

• データベース操作（Prisma経由）
• 外部API連携
• キャッシュ管理

なぜこのアーキテクチャなのか

本技術ブログは基本的なCRUD操作が中心で複雑なビジネスルールが少なく大規模プロジェクトではないため、3層アーキテクチャ（レイヤードアーキテクチャ）で十分な設計品質を保てると考えました。

AI駆動開発のポイント

AI駆動での開発はもはや避けては通れないと思います。 むしろAIに振り回されず開発の質と速さを担保できる技術が今後の重要なポイントです。 AI駆動で開発するにあたりブラックボックス化させず品質を担保するために以下がポイントです。

• テスト駆動開発で品質を担保する（テストを必ず書かせてテストをパスする）
• E2EのMCPを活用して動作確認フローを自動化する。
• レビューもAIで自動化して簡略化する。
• セキュリティ、アーキテクチャ、コード品質はガイドライン化して品質担保させる。どの程度のレベルで担保されるべきかは人間が引き続き意思決定するところなので学習は継続する。

参考

• https://developers.google.com/gemini-code-assist/docs/customize-gemini-behavior-github?hl=ja
• https://github.com/microsoft/playwright-mcp