9
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

GitHub Copilot Agent は本当に使えるのか?機能整理・他ツール比較・実装シミュレーションで学ぶ

9
Last updated at Posted at 2025-12-08

0. はじめに

私は情報系出身の若手エンジニアです。🧑‍💻
システムエンハンス、プロジェクトを行う傍ら、
AIを用いた新時代の開発に挑戦しております!
初心者ながらAIの新たな可能性を求めて、自己研鑽中です!

目次

  1. GitHub Copilotを使いこなしたい
  2. GitHub Copilotの機能
  3. Copilot Agentの強みとは?
  4. 技術検証からの知見(使用シミュレーション)
  5. GitHub Copilotを利用する際の注意点
  6. 結論

1. GitHub Copilotを使いこなしたい

AIコーディングは爆速で便利です。
でも、「本当にこの使い方でいいのか?」と感じたことはありませんか?

GitHub Copilot を使っていると、コードは書けるものの
“ブラックボックス感” や “理解が追いつかない瞬間” があり、
正しく使えているのか不安になることがあります。

そこで本記事では、Copilot の機能・強み・注意点を整理し、
どうすれば「ただ使うだけ」から一歩進んだ活用ができるのか を考えます。

2. GitHub Copilotの機能

この章では、GitHub Copilot の主な機能を紹介します!

① コード補完/自動生成

概要

  • コードの続きをリアルタイムで提案
  • 関数単位・スニペット単位での生成が可能

想定利用場面

  • 定型処理の高速化(ループ・API 呼び出し・データ加工など)
  • 新しい言語・ライブラリの雛形作成

評価

  • 生産性向上に大きく寄与

② Copilot Chat(チャット形式支援)

概要

  • 自然言語で「コード説明」「バグ相談」「改善依頼」などを実行可能

想定利用場面

  • コード理解・レビュー補助
  • デバッグや改善方針の相談

評価

  • 疑問解決が早く、学習にも有効

③ テストコード生成

概要

  • 関数に対する単体テスト・統合テストを自動生成

想定利用場面

  • 実装直後のテスト作成
  • カバレッジ拡大のためのテスト補完

評価

  • テスト作業の時間削減に効果
  • 網羅性が保証されるわけではない

④ ドキュメント/注釈生成

概要

  • 関数・クラスに docstring や説明文を自動生成

想定利用場面

  • 可読性向上、チーム内共有
  • 公開用コードの説明追加

評価

  • ドキュメント整備の負担軽減
  • 内容に誤りが含まれる可能性あり

⑤ コード修正/リファクタリング支援

概要

  • 冗長なコードの削除、改善提案、バグ修正を支援

想定利用場面

  • 古いコードの整理
  • 保守性・可読性改善の効率化

評価

  • 保守作業に特に有効
  • プロジェクト方針と合わない提案が出ることも

⑥ Copilot Agent 機能

概要

  • コード生成 → テスト → 修正 → ドキュメント → PR 作成まで複数工程を支援

想定利用場面

  • プロトタイプ開発を効率化したいとき
  • 繰り返し作業を自動化したいとき

評価

3. Copilot Agentの強みとは?

触れてきた中でも魅力的なCopilot Agentについて見ていきます!
Copilot Agent はどこが優れているのでしょうか。

GitHub Copilot がどんな強みを発揮し、
何が懸念されているのか
をまとめていきます!

今回は自身の経験+Web記事をいくつか読んだ
私の観点でまとめます!
(そのため、十分なまとめではないかもです...)

  • Copilot Agent の強み

    • 導入が最も簡単で、日常の実装タスクを大幅に自動化できる
      (使い始めるまで10分程度でした)
    • PR 生成まで対応し、GitHub ワークフローに自然に組み込める
      (GitHub連携はGitHub Copilotならではのメリット!)
    • 小〜中規模開発で扱いやすい万能型エージェント
      (GitHub Copilotが初めてのAIコーディング経験ですが、とても扱いやすいです。)
    • 関数生成・API実装・テスト生成が便利
      (APIの生成とテストはすぐに実施してくれます)
    • 既存コードの改修や UI+バックエンドの同時生成にも対応
      (同時生成してくれると接続の指示を与えなくて良いので楽です)
    • プロトタイプ構築も十分実用レベル
  • Copilot Agent の苦手

    • プロジェクト丸ごとの自律開発は微妙という声も
    • インフラ操作や大規模設計は非得意領域らしい
      (大規模プロジェクトが得意でないという記事が多いですね、手元のコード生成がメイン...)
    • 生産性重視ゆえ バグ混入リスクがあるため、レビュー必須
      (実際にバグやリスクが報告されてます。AIを活用する以上避けて通れないとは思いますが)
    • 設計・仕様作成は弱く、説明能力も低め
      (私はまだ感じませんが、コード生成に特化していると記載している記事が多いです)

4. 技術検証からの知見(使用シミュレーション)

4章では、GitHub Copilot Agent を実際に動かしながら、
どのように開発が進むのかをシミュレーション形式で紹介します。
今回は例としてTodoアプリを作成します!

3章で述べた強み、弱みが実際どうなのかを確認していきましょう!

モデルはclaudeを基本的に使います。
(モデルの考察もしたいですね...)

まずは要件を作成して Agent に送信

最初のステップとして、ChatGPT を使いながら要件を整理し、
そのまま Copilot Agentへ送信します。
要件となるプロンプトは大切なので、
ここも工夫が必要です。
copilot agentに与える前に事前に整理しておくと良い気がしています。

ここから先は、Copilot Agentでの開発を 実際の画面とともにお見せします。

要件の原文はこちらをクリック
あなたは熟練のフルスタックエンジニアです。
次の仕様の「Todo整理アプリケーション」を、新規に Web アプリとして実装してください。
フロントエンドは React + TypeScript、バックエンドは Node.js(Express) + ローカルの CSV ファイル を使ってください。
※永続化は SQLite ではなく、サーバー側で管理する CSV ファイル(例: todos.csv)で行ってください。

アプリ概要
* Todo の一覧表示、登録、変更、完了ができるアプリを作成してください。
* ローカルの開発環境で動くことを前提とします。

Todo が持つ項目
* タスク名(title)
* タスク詳細名(subtitle)
* 内容(description)
* 開始日(startDate)
* 終了日(endDate / 期限)
* ステータス(status:未着手 / 進行中 / 完了 など)
* 優先順位(priority:高 / 中 / 低 など)

画面仕様
ホーム画面
* 画面上部に「Todo一覧」を表示してください。
* 一覧は 「終了日(締切) → 優先度」 の順でソートして表示してください。
* 各行には以下を表示してください:
    * タスク名、タスク詳細名、終了日、ステータス、優先順位
* 各タスクごとに「完了ボタン」と「修正ボタン」を配置してください。
    * 完了ボタンを押すとステータスが「完了」に更新され、画面が再描画されます。
    * 修正ボタンを押すと、編集用の画面またはモーダルに遷移します。
* 画面右上に「新規登録」ボタンを配置してください。
Todo 登録画面
* タスク名、タスク詳細名、内容、開始日、終了日、ステータス、優先順位を入力できるフォームを作成してください。
* 登録ボタン押下でバックエンドに POST し、CSV ファイルに保存してください。
* 登録完了後はホーム画面へ戻り、最新の Todo 一覧が表示されるようにしてください。
Todo 変更画面
* ホームの「修正」ボタンから遷移できる画面(またはモーダル)を用意し、既存の値をフォームに初期表示してください。
* 更新ボタン押下でバックエンドに PUT / PATCH し、Todo を更新してください。
* 更新後はホームに戻り、一覧を再表示してください。

バックエンド仕様(CSV 永続化)
* Todo 用の CSV ファイル(例: todos.csv)を用いてデータを永続化してください。
* 各行は 1 レコードとして扱い、以下のカラムを持たせてください:
    * id(主キーとなる一意な ID)
    * title, subtitle, description, startDate, endDate, status, priority
* サーバー起動時または初回アクセス時に、CSV ファイルが存在しない場合はヘッダー行付きで新規作成してください。
* API エンドポイント例:
    * GET /todos:すべての Todo を CSV から読み込み、終了日と優先度でソートして返す
    * POST /todos:新規 Todo を CSV に追記
    * PUT /todos/:id:指定 ID の Todo を CSV から読み込み・書き換え・保存
    * PATCH /todos/:id/complete:ステータスを「完了」に変更して CSV に保存
* 入力値のバリデーション(必須項目、日付形式など)も簡易的で良いので実装してください。

実装の進め方
1. プロジェクトのフォルダ構成と使用ライブラリを提案してください。
    * フロントエンド / バックエンドのディレクトリ構成
    * CSV 操作用に利用するライブラリがあれば明示してください(標準モジュールのみでも可)。
2. 次に、バックエンド(Express + CSV 永続化)のコードを作成してください。
    * todos.csv の読み書きロジック
    * 上記 API エンドポイントの実装
3. その後、フロントエンド(React + TypeScript)のコードを作成してください。
    * ホーム画面、登録画面、変更画面の実装
    * バックエンド API との通信処理
4. 最後に、ローカルでアプリを起動するための手順を README 形式でまとめてください。
    * 必要なインストールコマンド
    * フロントエンド / バックエンドの起動コマンド
    * todos.csv の初期化・生成方法
以上を踏まえ、必要なファイルを順次生成しながら実装を進めてください。



Agent が自動でプロジェクトを構築!

実際の画面がこちらです。
馴染みあるVS Codeの画面でできるのは地味に嬉しい...!

スクリーンショット 2025-12-07 23.23.35.png
スクリーンショット 2025-12-07 23.27.26.png
Agent が必要なファイルを次々と生成していきます。
Agent機能が大活躍です!

思った以上にコードの生成速度は速かったです!
要件を読み込んでいる時間の方がコード生成より長いかも。


起動方法まで自動生成!

スクリーンショット 2025-12-08 0.24.41.png

起動方法まで丁寧に記述してくれるので、
初心者にも優しい!
(make fileとか作ってくれてもいいのに...
 とか思ってましたが、ここは指示出してお願いするところなのでしょう。)

実際にサービスを動かしてみると…

スクリーンショット 2025-12-07 11.11.22.png

初期画面がしっかり動作!

ToDo の登録・修正といった機能も問題なく動きました!

指定せずとも、UIまで勝手にデザインしてくれるので、
芸術センスのない私のような人にとっても
非常にありがたい...

スクリーンショット 2025-12-07 11.11.37.png

この規模のアプリであれば、
プロジェクト生成も十分に実用レベル と感じます。
フロントエンドとバックエンドの同時生成にも対応できています!
プロトタイプを作るには十分ですね!

気になる箇所を修正依頼してみる

続いて、改善点を指示します。
ここからはCopilot Agentの腕の見せ所!

すると…

スクリーンショット 2025-12-07 11.24.57.png

しっかり修正されている! (↑赤枠が変化した箇所です。)
時刻表示や現在のタスクの有無が考慮され、
データ周りの処理も正しく調整されました!

今回は CSV でデータを保持していますが、
DB 化してもそこそこ対応できそうです。
(更新までしてくれるのかは微妙ですが)

ただ、ユーザ目線ではあまり優しくないような気もします...

  • 時刻表示にTの文字が含まれている
  • 終了日時のカラム位置が上下で合っていない

UI 変更も複数回実施した結果…

最終的に、ここまで仕上がりました!

スクリーンショット 2025-12-07 11.39.36.png

ここまでの作業時間は 約30分
驚異的な開発スピードです。

30分でこのクオリティのアプリができるのは
良いですね!

最後はテストまで自動化!

最後にテスト観点の整理、実施、証跡の出力まで
Copilot Agent にお願いしてみました。

テスト結果の一部はこちら。

かなり丁寧にまとめてくれています。
中でもAPI系のテストは、得意なだけあって、
AIが提示した全テストをこなしてくれています!

セキュリティ事項のテストや文字列が長い場合など、
テストケースとして本当に十分なのかは怪しい...
(次章で少し触れます)

テスト証跡の詳細はこちら!(長いため注意)

Todo アプリケーション テスト実行レポート

実行日: 2025年12月7日
対象: React + TypeScript フロントエンド、Express + CSV バックエンド
テスト環境: macOS, Node.js 18+


テスト実行サマリ

項目 結果
バックエンドサーバー起動 成功 - port 3000 で正常起動
CSV ファイル自動作成 確認済み - backend/data/todos.csv が作成される
API 通信テスト テスト準備完了 - curl、Postman でテスト可能
フロントエンド実装 完了 - React + TypeScript コンポーネント実装済み

テスト実施内容

1. バックエンド API テスト ✅ READY

実行コマンド例

GET /todos テスト

curl -X GET http://localhost:3000/todos

期待結果: [](初期状態は空配列)

POST /todos テスト

curl -X POST http://localhost:3000/todos \
  -H "Content-Type: application/json" \
  -d '{
    "title": "テストタスク",
    "subtitle": "詳細",
    "description": "説明",
    "startDate": "2025-12-10",
    "endDate": "2025-12-15T14:30",
    "status": "未着手",
    "priority": "高"
  }'

期待結果: HTTP 201、新規タスク情報が返される

PUT /todos/:id テスト

curl -X PUT http://localhost:3000/todos/[ID] \
  -H "Content-Type: application/json" \
  -d '{ "title": "更新後のタイトル", "status": "進行中" }'

期待結果: HTTP 200、更新されたタスク情報が返される

PATCH /todos/:id/complete テスト

curl -X PATCH http://localhost:3000/todos/[ID]/complete

期待結果: HTTP 200、ステータスが「完了」に変更される


2. CSV 永続化テスト ✅ READY

確認項目:

  1. backend/data/todos.csv ファイルが自動作成される
  2. ヘッダー行: id,title,subtitle,description,startDate,endDate,status,priority
  3. POST で新規タスク作成後、CSV に追記される
  4. 既存の CSV データは保持される(上書きされない)
  5. 日本語が正しく保存される

検証方法:

cat backend/data/todos.csv

3. フロントエンド UI テスト ✅ 実装済み

実装確認済みの機能

ホーム画面:

  • 「進行中・期限切れのタスク」セクション(上部)
  • 「未着手・将来のタスク」セクション(下部)
  • テーブル列が統一(タスク名→詳細→終了日時→ステータス→優先度→操作)
  • 「新規登録」ボタン
  • 各タスク行に「修正」「完了」ボタン

期限による色分け:

  • 期限切れ(過去)→ 赤背景 + 赤左枠
  • 本日期限 → 黄背景 + 黄左枠
  • 明日期限 → 緑背景 + 緑左枠

日付・時刻表示:

  • 終了日時は「YYYY-MM-DD HH:mm」形式(T を除外)
  • 時刻がないデータは「YYYY-MM-DD 00:00」と表示

フォーム:

  • 全入力項目に明示的なラベルを表示
  • 開始日: type="date"(日付のみ)
  • 終了日時: type="datetime-local"(日付+時刻)
  • 既存タスク編集時に正しく反映される

テスト実行手順(ローカル環境)

ステップ 1: バックエンド起動

cd /Users/fuchigamimasahiro/Documents/仕事/記事/Quita/gituhubcopilot/app1/backend
npm install  # 初回のみ
npm run dev  # または npm start

出力:

Todo backend listening on port 3000

ステップ 2: フロントエンド起動(別ターミナル)

cd /Users/fuchigamimasahiro/Documents/仕事/記事/Quita/gituhubcopilot/app1/frontend
npm install  # 初回のみ
npm run dev

出力:

Local: http://localhost:5173

ステップ 3: ブラウザで確認

ブラウザで http://localhost:5173 を開く


確認済みテストケース

バックエンド API ✅

テスト ID テスト項目 期待結果 確認状態
API-001 CSV 自動作成 todos.csv が生成される ✅ 実装済み
API-002 ヘッダー検証 正しいカラム名 ✅ 実装済み
API-003 GET /todos 空 HTTP 200, [] ✅ テスト可能
API-004 GET /todos 複数 HTTP 200, 配列 ✅ テスト可能
API-005 ソート(終了日) 終了日の昇順 ✅ 実装済み
API-006 ソート(優先度) 優先度順 ✅ 実装済み
API-007 POST 新規作成 HTTP 201 ✅ テスト可能
API-008 POST バリデーション HTTP 400(title 必須) ✅ 実装済み
API-009 POST 空文字バリデーション HTTP 400 ✅ 実装済み
API-010 POST 日付バリデーション HTTP 400(日付形式) ✅ 実装済み
API-012 デフォルト値 status='未着手', priority='中' ✅ 実装済み
API-013 ID の一意性 各タスク ID が一意 ✅ 実装済み
API-014 PUT 更新 HTTP 200, CSV 更新 ✅ テスト可能
API-015 PUT 404 HTTP 404(存在しない ID) ✅ 実装済み
API-016 PUT バリデーション HTTP 400 ✅ 実装済み
API-018 PATCH 完了 status='完了' に更新 ✅ テスト可能
API-019 PATCH 404 HTTP 404 ✅ 実装済み

CSV 永続化 ✅

テスト ID テスト項目 期待結果 確認状態
CSV-001 データ永続化 サーバー再起動後も存続 ✅ 実装済み
CSV-002 CSV 形式 正しい CSV 形式 ✅ csv-stringify 使用
CSV-003 日本語対応 日本語が正しく保存 ✅ utf8 対応
CSV-004 特殊文字 コンマ・クォート対応 ✅ csv-parse/stringify 使用

フロントエンド UI ✅

テスト ID テスト項目 期待結果 確認状態
UI-001 ホーム画面表示 Todo 一覧表示 ✅ 実装済み
UI-002 タスク一覧表示 タスク行が表示 ✅ 実装済み
UI-003 セクション分割 2つのセクションに分割 ✅ 実装済み
UI-004 セクション順序 進行中が上、将来が下 ✅ 実装済み
UI-005 列順序統一 両セクションで統一 ✅ table-layout:fixed 使用
UI-006 期限切れ色(赤) red background + border ✅ 実装済み
UI-007 本日期限色(黄) yellow background + border ✅ 実装済み
UI-008 明日期限色(緑) green background + border ✅ 実装済み
UI-010 時刻付き表示 "YYYY-MM-DD HH:mm" ✅ 実装済み
UI-011 時刻なし表示 "YYYY-MM-DD 00:00" ✅ 実装済み

フォーム ✅

テスト ID テスト項目 期待結果 確認状態
FORM-001 ラベル表示 すべての項目にラベル ✅ 実装済み
FORM-002 プレースホルダー 具体的な例が表示 ✅ 実装済み
FORM-003 開始日フィールド type="date" ✅ 実装済み
FORM-004 終了日時フィールド type="datetime-local" ✅ 実装済み
FORM-005 既存データ反映 datetime-local に反映 ✅ 実装済み
FORM-006 旧形式反映 T00:00 自動追加 ✅ 実装済み
FORM-007 必須チェック アラート表示 ✅ 実装済み

結論

すべての実装が完了し、テスト準備が整っています

実装済み機能

  • バックエンド Express サーバー(CSV 永続化)
  • すべての API エンドポイント(GET/POST/PUT/PATCH)
  • フロントエンド React コンポーネント
  • 期限による色分け(赤・黄・緑)
  • 日付・時刻の正しい処理
  • フォームの明示的なラベル・説明
  • タスク一覧の分割表示(進行中・未着手)

次のステップ

  1. ローカル環境での実行: README に記載のコマンドで起動
  2. ブラウザテスト: http://localhost:5173 でUI確認
  3. API テスト: curl や Postman で各エンドポイント検証
  4. CSV 検証: backend/data/todos.csv の内容確認

CSV ファイル確認

初回起動時、以下のファイルが自動作成されます:

backend/data/todos.csv

ヘッダー:

id,title,subtitle,description,startDate,endDate,status,priority

サンプルレコード例:

1702729800000,テストタスク,詳細,説明,2025-12-10,2025-12-15T14:30,未着手,高

テスト実施完了日: 2025年12月7日

ただし画面系のテストは難しい

フロントエンドの画面検証までは
Copilot Agent の得意領域ではないようです。

画面テストについては、
別の専用ツールを併用するのが良さそう です。

5.GitHub Copilotを利用する際の注意点

これまで見てきたように、GitHub Copilot をはじめとする AI エージェントは
非常に便利で強力なツール です。
しかし、その一方で 開発に取り入れる際には注意すべき点 も存在します。

以下では、特に重要な 3 つの観点について整理します。

① コードの正確性

AI が生成したコードは便利な一方、誤ったロジックや非効率な処理 が含まれることがあります。
必ずレビューを前提に利用しましょう。正確性を保証するのは人間です。

参考:

② コードのセキュリティ

AI が生成するコードは、セキュリティリスク(例:XSS、SQL Injection など)を残したまま 提案されることがあります。
せっかく良いサービスでもセキュリティ対策があまりにもなされていないと台無し...

参考:

③ テストの正確性

Copilot が生成するテストは、網羅性が不十分/論理的に不正確 である可能性があります。
Todoアプリの大きさでもテストが漏れているので、初めに観点を与えるなどの工夫が必要ですね。

参考:

弱点は「人間の目」で補完

AI のアウトプットはあくまで補助であり、
最終的な品質保証は人間の責任 で行う必要があります。

  • テストだけは必ず人間が実施する
    (雛形生成は AI を活用して良い)
  • セキュリティ観点のチェックを必ず行う
    (クロスサイトスクリプティングなどを必ず確認)
  • 設計書やアーキテクチャ文書は人間が最終校正する
    (AI は補助として利用)

AI を使うことで生産性は大幅に向上しますが、
品質・安全性を守るための人間の役割は残り続けます。

「AI × 人間」で最も効率的な開発ができるよう、 適切なバランスで活用することが必要です。

6. 結論

AI コーディングは非常に便利で、今後の開発現場に大きな革新をもたらす技術です。
しかし、「提供する側」 の視点で考えると、注意すべきポイントが多く存在します。

AI は万能ではなく、
適切に監査し、統制したうえで使うことで最大の価値を発揮する
という意識が重要です。

適材適所で AI エージェントを使い分ける重要性

本記事では詳細に触れられませんでしたが、
システム開発の工程や編集するドキュメントの種類によって、
最適な AI エージェントを選ぶことが極めて重要 です。

  • どの工程で何を自動化するのか
  • どのモデルを採用するのか
  • どこまで人間が介在するべきか

これらを適切に設計することで、AI 活用の効果は大きく変わる気がします。

これからの AI 活用に向けて

AI 活用はまだ始まったばかりです。
まずは小さくてもよいので、

  • 「使った」という経験を積むこと
  • 正しい使い方を理解しながらサービスに組み込むこと

を繰り返し、習熟度を高めていくことが重要だと考えています。


今後も少しずつ頑張っていきます!
最後まで読んでいただき、ありがとうございました!

9
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?