GitHub Copilot × Claude Code × Agent Skills で実現する半AI駆動開発

はじめに

GitHub Copilotを使っていたところ、Claude Codeが社内で使えるようになりました。せっかくなので、両方を使ってみることにしました。
今回作りたいのは、社内の資産管理とリスク管理を統合したシステムです。しっかりやるなら、Clean Architecture + CQRSで実装しようと考え、Agent SkillsやMCPサーバーなども試してみました。
まずは第一歩として、資産管理機能の実装から始めました。実際にやってみて困ったことや、うまくいったことを書いていきます。

プロジェクト概要

作りたいもの

社内の資産管理、そのリスクやリスクアセスメント、および監視測定を管理するシステムです。

今回は最初のステップとして、資産管理のCRUD機能を実装しました。

技術スタック

バックエンド

.NET 8.0、Clean Architecture + CQRS
MediatR、FluentValidation、AutoMapper
Entity Framework Core + PostgreSQL
JWT認証

フロントエンド

Vue 3 + TypeScript
Vite、Pinia、Vue Router
Tailwind CSS 4

AI支援ツール

GitHub Copilot
Claude Code
Agent Skills（公式カスタム4種類）
MCP サーバー

開発プロセス

Phase 1: 仕様書作成

既存プロジェクトを参考に、Claude とGitHub Copilotで仕様書を作りました。
「とりあえずコードを書かせる」のではなく、最初にClaudeとCopilotを用いて、ディレクトリ構造やコーディング規約を含む7つの設計書を整備しました。

作ったのは以下の7つ。

プロジェクト概要
ディレクトリ構造
API設計
データベース設計
コーディング規約
コマンド集
チェックリスト

最初は簡単に作るつもりでしたが、せっかくなのでClean Architectureでやってみることにしました。

Phase 2: バックエンド構築

GitHub Copilotをメインに、Clean Architectureの原則に基づき、役割を明確に分離して実装しました。

Core（Domain / Application層）

エンティティ、ビジネスロジック、およびCQRSの核となる Commands / Queries / Handlers、Validatorsを機能ごとに整理。

Infrastructure（インフラ層）

データアクセスの実体（DbContext、リポジトリ実装）、マイグレーション、および外部認証サービス（JWT生成の実装）を担当。

WebAPI（Presentation層）

コントローラーとDI設定。フロントエンド（Vue.js）のホストもここで行います。

依存方向が常に内側（Core）に向くよう、GitHub Copilotで雛形を作りつつ、複雑な参照関係についてはClaude Codeでアーキテクチャレビューを行いながら進めました。

Phase 3: Agent Skillsの導入

バックエンド構築後、Agent Skillsを導入しました（構築前にすればよかったと反省…）

Anthropic公式のskill-creatorを使って、カスタムSkillsを3つ作成。プロジェクト構成を読み込ませて、必要だと思われるものを分析してもらい、プロジェクト固有のSkillsを作りました。

skill-creator
新規Skills作成用（Anthropic公式）。
こちらを使って以下のようなSkillsを作成しました。

feature-generator
エンティティから、バックエンド+フロントエンドのCRUD機能を一括生成。このプロジェクトのClean Architecture + CQRSパターンに沿った形で、Entity、DTO、Commands、Queries、Handlers、Validators、Controllerを生成します。

clean-code-checker
コード品質チェック。このプロジェクトのアーキテクチャ構成を理解した上で、アーキテクチャ違反やコードスメルを検出します。

vue-component-generator
再利用可能なVueコンポーネントを生成。プロジェクトのTailwind CSS設定やコーディング規約に沿ったコンポーネントを作成します。

「なんちゃって」レベルのSkillsなので、生成後の調整は必要かもしれません。

Phase 4: フロントエンド構築

Skillsを使ってVue画面を生成開始。ここで問題が発生しました。

Tailwind CSS v4で画面崩れ

Skillsを使ってVue画面を生成したところ、Tailwindクラスは付いているのにスタイルが全く適用されない状態になりました。原因を調べてみると、Tailwind CSS v4での設定方法の変更が原因でした。

従来の@tailwindディレクティブから@import "tailwindcss";への変更が必要だったのですが、設定ファイルを確認すればすぐ気づける問題なのに、コンポーネントのソースばかり見ていて、なかなか気づけませんでした。

ここで威力を発揮したのがSerenaとPlaywright（MCP）です。
GitHub CopilotのMCPサーバ機能を使うことで、AIが実際にブラウザを操作しながらCSS問題を特定してくれました。style.cssの記述を修正した結果、ログイン画面や登録画面が美しく表示されるようになりました。

新しいバージョンのフレームワークを使う場合は、ブラウザで実際に動かして確認するのもありだと実感しました。

実際の画面

まだ機能は多くないですが、できた画面は以下のようになりました。

学んだこと

ツールの使い分け

私の使い方としては、こんな感じで使い分けていました。

GitHub Copilot: コード補完、定型コード生成、MCP利用（仕様書補完、エラー調査）
Claude Code: Agent Skills利用による開発、リファクタリング

もちろん、GitHub CopilotでもClaude Codeでも、やろうと思えば同じことができるかと思います。使用制限もありますので、それぞれのツールの得意分野を活かしつつ、状況に応じて使い分けると効率的でした。

Skillsはもっと学びたい

良いSkillsを作るにはコツが必要だと感じました。プロジェクトのパターンを明確にすること、汎用性と具体性のバランス、メンテナンス方法など。

チーム全体で活用できる仕組みを作りたいです。

ブラウザで確認しながら解決

比較的新しいライブラリを使うと、古いバージョンの書き方に引っ張られるという罠があります。MCPサーバーでブラウザ操作しながら調査できるのは便利でした。

ツールの使用制限に注意

GitHub Copilot
Serena MCPを使わないと、ソース解析を行う際にプレミアムリクエストが急激に増加します。プレミアムリクエストは月末にリセットまでリセットされないため、使いすぎると月末困ります。

Claude Code
使用制限が早めに来ますが、数時間でリセット。実際の開発はClaudeCode、設計の骨組みやソース分析、エラー調査はGitHub Copilotと使い分けました。

開発期間

全体で約4時間で、ユーザー管理（JWT認証）、資産のCRUD、ダッシュボード、機密性レベルの管理などが完成しました。

AI支援なしだとここまですぐには難しいので、工数削減は計り知れないです。

今後やりたいこと

リスク管理機能の追加

資産だけでなく、リスクアセスメントや監視測定も同じシステムで管理したいです。ISMSの運用では、資産とリスクが密接に関連しているため、統合管理できれば効率的だと考えています。

Slack連携

監視測定の期限をSlackで通知したり、AIを使ってSlack上で承認・報告を完結させたりできればと思います。例えば「監視測定の期限が近づいています」という通知に、Slackで「完了しました」と返すと、AIが内容確認して自動反映するようなイメージです。

Agent Skillsの進化

チーム全体で共有できるSkillsライブラリを作りたいです。他のプロジェクトでも利用できるような汎用的なSkillsを整備していきたいと考えています。

MCPサーバーの活用拡大

今はソース解析やフロントエンドのデバッグに使っていますが、E2Eテストやパフォーマンステストにも使えそうです。

AIツールは日々進化しているので、これからも活用していきたいと思います。

Where Ideas Meet Innovation