T-CREATOR

GitHub Copilot 利用可視化ダッシュボード:受容率/却下率/生成差分を KPI 化

GitHub Copilot 利用可視化ダッシュボード:受容率/却下率/生成差分を KPI 化

GitHub Copilot を導入したものの、実際にどれくらい活用されているのか、投資対効果はどうなのかと気になりませんか。コード補完の提案を受け入れた回数や却下した回数、生成されたコード量などを数値化できれば、チーム全体の生産性向上を客観的に示せます。

本記事では、GitHub Copilot の利用状況を可視化するダッシュボード構築方法をご紹介します。受容率(Acceptance Rate)、却下率(Rejection Rate)、生成差分(Generated Lines)などの重要指標を KPI として設定し、データ駆動型の開発改善を実現しましょう。

背景

GitHub Copilot とは

GitHub Copilot は、AI がリアルタイムでコード補完や関数生成を支援する開発ツールです。エディタ上でコメントや関数名を入力するだけで、文脈に合ったコードを提案してくれます。

導入企業では開発速度の向上や定型コードの削減が期待されていますが、実際の効果を定量的に測定するのは簡単ではありません。

可視化の必要性

GitHub Copilot を組織全体で導入する際、以下のような課題が生まれます。

  • 誰がどれくらい活用しているか分からない
  • コスト対効果を経営層に説明できない
  • チームごとの利用状況にばらつきがある
  • AI 提案の品質を評価する基準がない

こうした課題を解決するには、利用データを可視化し、KPI として管理する仕組みが必要です。GitHub では、Copilot の利用データを API 経由で取得できるため、これを活用してダッシュボードを構築できます。

以下の図は、GitHub Copilot のデータ取得から可視化までの全体フローを示しています。

mermaidflowchart LR
  dev["開発者"] -->|コード提案を<br/>受容/却下| copilot["GitHub Copilot"]
  copilot -->|利用データを記録| github["GitHub API"]
  github -->|JSON データ取得| script["データ収集<br/>スクリプト"]
  script -->|変換・集計| db[("データベース<br/>(JSON/CSV)")]
  db -->|可視化| dashboard["ダッシュボード<br/>(Grafana/Looker)"]
  dashboard -->|KPI 確認| manager["マネージャー"]

図で理解できる要点:

  • 開発者の操作が GitHub API に記録される流れ
  • データ収集からダッシュボード表示までのパイプライン
  • KPI 可視化により経営判断に活用可能

課題

利用データが分散している

GitHub Copilot の利用データは、個々の開発者のエディタやセッションに分散しており、一元管理されていません。そのため、組織全体の利用状況を把握するには、API を使ってデータを集約する必要があります。

KPI の定義が曖昧

「Copilot をどれくらい使っているか」という質問に対して、以下のような指標が考えられます。

#指標名説明
1受容率提案されたコードを受け入れた割合
2却下率提案を却下した割合
3生成行数Copilot が生成したコード行数
4アクティブユーザー数一定期間内に Copilot を利用した人数

これらの指標を明確に定義し、継続的に測定する仕組みが求められます。

リアルタイム性の欠如

月次レポートや手動集計では、問題が発生してから対処するまでに時間がかかります。リアルタイムでデータを監視し、異常値や改善の兆候を素早く察知する必要があるでしょう。

以下の図は、KPI 測定における課題の関係性を示しています。

mermaidflowchart TD
  issue1["利用データが分散"] --> problem["組織全体の<br/>状況把握が困難"]
  issue2["KPI 定義が曖昧"] --> problem
  issue3["リアルタイム性の欠如"] --> problem
  problem --> solution["ダッシュボード構築で<br/>一元管理・可視化"]

図で理解できる要点:

  • 3 つの課題が組織全体の可視化を妨げている
  • ダッシュボード構築により課題を統合的に解決

解決策

GitHub API を活用したデータ収集

GitHub は、Copilot の利用状況を取得するための API エンドポイントを提供しています。これを定期的に呼び出し、データを蓄積することで、組織全体の利用状況を一元管理できます。

以下は、API からデータを取得する基本的な流れです。

API エンドポイント

GitHub Copilot の利用データは、以下のエンドポイントから取得できます。

typescript// GitHub Copilot Metrics API のエンドポイント
const endpoint =
  'https://api.github.com/orgs/{org}/copilot/usage';

このエンドポイントは、組織内の Copilot 利用統計を JSON 形式で返します。

認証トークンの設定

API を呼び出すには、GitHub の Personal Access Token(PAT)が必要です。

typescript// 環境変数から GitHub トークンを取得
const token = process.env.GITHUB_TOKEN;

// 認証ヘッダーの設定
const headers = {
  Authorization: `Bearer ${token}`,
  Accept: 'application/vnd.github+json',
};

トークンには read:org および read:copilot のスコープが必要です。

データ取得スクリプト

以下は、Node.js と TypeScript を使って API からデータを取得する例です。

typescriptimport fetch from 'node-fetch';

// GitHub API から Copilot 利用データを取得する関数
async function fetchCopilotMetrics(
  org: string
): Promise<any> {
  const endpoint = `https://api.github.com/orgs/${org}/copilot/usage`;
  const token = process.env.GITHUB_TOKEN;

  const response = await fetch(endpoint, {
    headers: {
      Authorization: `Bearer ${token}`,
      Accept: 'application/vnd.github+json',
    },
  });

  if (!response.ok) {
    throw new Error(
      `API Error: ${response.status} ${response.statusText}`
    );
  }

  return response.json();
}

この関数は、指定した組織の Copilot 利用データを JSON で返します。

データ構造の確認

取得したデータは、以下のような構造を持ちます。

json{
  "day": "2025-10-01",
  "total_suggestions_count": 1250,
  "total_acceptances_count": 875,
  "total_lines_suggested": 3200,
  "total_lines_accepted": 2100,
  "total_active_users": 45
}

各フィールドの意味は次の通りです。

#フィールド名説明
1dayデータの日付
2total_suggestions_count提案された総数
3total_acceptances_count受容された提案数
4total_lines_suggested提案された総行数
5total_lines_accepted受容された総行数
6total_active_usersアクティブユーザー数

KPI の定義と計算

データが取得できたら、次は KPI を定義します。代表的な指標は以下の通りです。

受容率(Acceptance Rate)

受容率は、提案されたコードのうち、実際に受け入れられた割合を示します。

typescript// 受容率を計算する関数
function calculateAcceptanceRate(data: any): number {
  const {
    total_suggestions_count,
    total_acceptances_count,
  } = data;

  if (total_suggestions_count === 0) {
    return 0;
  }

  // 受容率 = (受容数 / 提案数) × 100
  return (
    (total_acceptances_count / total_suggestions_count) *
    100
  );
}

受容率が高いほど、Copilot の提案が開発者にとって有用であることを示します。

却下率(Rejection Rate)

却下率は、提案されたコードのうち、受け入れられなかった割合です。

typescript// 却下率を計算する関数
function calculateRejectionRate(data: any): number {
  const {
    total_suggestions_count,
    total_acceptances_count,
  } = data;

  if (total_suggestions_count === 0) {
    return 0;
  }

  // 却下数 = 提案数 - 受容数
  const rejections =
    total_suggestions_count - total_acceptances_count;

  // 却下率 = (却下数 / 提案数) × 100
  return (rejections / total_suggestions_count) * 100;
}

却下率が高い場合、提案の品質やコンテキスト理解に課題がある可能性があります。

生成差分(Generated Lines)

生成差分は、Copilot によって生成されたコード行数を示します。

typescript// 生成差分を取得する関数
function getGeneratedLines(data: any): number {
  // 受容された総行数を返す
  return data.total_lines_accepted;
}

この指標により、Copilot がどれだけコード作成を支援したかが分かります。

1 ユーザーあたりの平均受容数

チームの生産性を測る指標として、1 ユーザーあたりの平均受容数も有用です。

typescript// 1 ユーザーあたりの平均受容数を計算する関数
function calculateAvgAcceptancesPerUser(data: any): number {
  const { total_acceptances_count, total_active_users } =
    data;

  if (total_active_users === 0) {
    return 0;
  }

  // 平均受容数 = 受容数 / アクティブユーザー数
  return total_acceptances_count / total_active_users;
}

この指標が高いほど、ユーザーが積極的に Copilot を活用していると言えます。

ダッシュボードの構築

KPI が計算できたら、次はダッシュボードで可視化します。ここでは、Grafana を使った例をご紹介しましょう。

以下の図は、データ収集からダッシュボード表示までのアーキテクチャを示しています。

mermaidflowchart TD
  api["GitHub API"] -->|定期取得| collector["データ収集<br/>スクリプト"]
  collector -->|JSON 保存| storage[("データストレージ<br/>(PostgreSQL/JSON)")]
  storage -->|クエリ| grafana["Grafana<br/>ダッシュボード"]
  grafana -->|可視化| metric1["受容率グラフ"]
  grafana -->|可視化| metric2["却下率グラフ"]
  grafana -->|可視化| metric3["生成行数グラフ"]
  grafana -->|可視化| metric4["アクティブユーザー数"]

図で理解できる要点:

  • データ収集の自動化によりリアルタイム性を確保
  • ストレージ層でデータを永続化
  • Grafana で複数の KPI を同時に可視化

データベースへの保存

取得したデータを PostgreSQL に保存する例です。

typescriptimport { Client } from 'pg';

// PostgreSQL クライアントを作成
const client = new Client({
  host: process.env.DB_HOST,
  port: 5432,
  database: 'copilot_metrics',
  user: process.env.DB_USER,
  password: process.env.DB_PASSWORD,
});

await client.connect();

接続後、テーブルを作成します。

sql-- Copilot 利用データを保存するテーブル
CREATE TABLE IF NOT EXISTS copilot_usage (
  id SERIAL PRIMARY KEY,
  day DATE NOT NULL,
  total_suggestions INT NOT NULL,
  total_acceptances INT NOT NULL,
  total_lines_suggested INT NOT NULL,
  total_lines_accepted INT NOT NULL,
  total_active_users INT NOT NULL,
  acceptance_rate DECIMAL(5, 2),
  rejection_rate DECIMAL(5, 2),
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

このテーブルに、API から取得したデータと計算した KPI を保存します。

データの挿入

取得したデータをデータベースに挿入する関数です。

typescript// データベースに Copilot 利用データを挿入する関数
async function insertMetrics(client: Client, data: any) {
  const acceptanceRate = calculateAcceptanceRate(data);
  const rejectionRate = calculateRejectionRate(data);

  const query = `
    INSERT INTO copilot_usage (
      day,
      total_suggestions,
      total_acceptances,
      total_lines_suggested,
      total_lines_accepted,
      total_active_users,
      acceptance_rate,
      rejection_rate
    ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
  `;

  const values = [
    data.day,
    data.total_suggestions_count,
    data.total_acceptances_count,
    data.total_lines_suggested,
    data.total_lines_accepted,
    data.total_active_users,
    acceptanceRate,
    rejectionRate,
  ];

  await client.query(query, values);
}

この関数により、日次データが自動的にデータベースに蓄積されます。

Grafana でのデータソース設定

Grafana を起動し、PostgreSQL をデータソースとして追加します。

yaml# docker-compose.yml で Grafana と PostgreSQL を起動
version: '3.8'
services:
  postgres:
    image: postgres:15
    environment:
      POSTGRES_DB: copilot_metrics
      POSTGRES_USER: user
      POSTGRES_PASSWORD: password
    ports:
      - '5432:5432'

  grafana:
    image: grafana/grafana:latest
    ports:
      - '3000:3000'
    environment:
      GF_SECURITY_ADMIN_PASSWORD: admin

起動後、Grafana の管理画面で PostgreSQL データソースを設定します。

パネルの作成

Grafana で受容率の推移を表示するパネルを作成します。

sql-- 受容率の推移を取得するクエリ
SELECT
  day AS time,
  acceptance_rate
FROM copilot_usage
ORDER BY day DESC
LIMIT 30;

このクエリを Grafana のパネルに設定すると、過去 30 日間の受容率推移がグラフで表示されます。

同様に、却下率や生成行数のパネルも作成しましょう。

具体例

実装の全体フロー

ここでは、実際にダッシュボードを構築する手順を段階的にご紹介します。

ステップ 1:環境変数の設定

まず、GitHub トークンとデータベース接続情報を環境変数として設定します。

bash# .env ファイルに以下を記載
GITHUB_TOKEN=ghp_xxxxxxxxxxxxxxxxxxxxxx
GITHUB_ORG=your-organization
DB_HOST=localhost
DB_USER=user
DB_PASSWORD=password
DB_NAME=copilot_metrics

これらの情報は、セキュリティのため .gitignore に追加してください。

ステップ 2:依存パッケージのインストール

プロジェクトに必要なパッケージをインストールします。

bash# Yarn を使ってパッケージをインストール
yarn add node-fetch pg dotenv
yarn add -D @types/node @types/pg typescript

TypeScript の設定ファイルも作成しましょう。

json{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  }
}

ステップ 3:データ収集スクリプトの作成

API からデータを取得し、データベースに保存するスクリプトを作成します。

typescript// src/collect.ts
import 'dotenv/config';
import fetch from 'node-fetch';
import { Client } from 'pg';

// 環境変数から設定を取得
const GITHUB_TOKEN = process.env.GITHUB_TOKEN!;
const GITHUB_ORG = process.env.GITHUB_ORG!;

// GitHub API から Copilot 利用データを取得
async function fetchCopilotMetrics(
  org: string
): Promise<any> {
  const endpoint = `https://api.github.com/orgs/${org}/copilot/usage`;

  const response = await fetch(endpoint, {
    headers: {
      Authorization: `Bearer ${GITHUB_TOKEN}`,
      Accept: 'application/vnd.github+json',
    },
  });

  if (!response.ok) {
    throw new Error(
      `API Error: ${response.status} ${response.statusText}`
    );
  }

  const data = await response.json();
  return data;
}

次に、KPI を計算する関数を追加します。

typescript// 受容率を計算
function calculateAcceptanceRate(data: any): number {
  const {
    total_suggestions_count,
    total_acceptances_count,
  } = data;
  if (total_suggestions_count === 0) return 0;
  return (
    (total_acceptances_count / total_suggestions_count) *
    100
  );
}

// 却下率を計算
function calculateRejectionRate(data: any): number {
  const {
    total_suggestions_count,
    total_acceptances_count,
  } = data;
  if (total_suggestions_count === 0) return 0;
  const rejections =
    total_suggestions_count - total_acceptances_count;
  return (rejections / total_suggestions_count) * 100;
}

データベース接続とデータ挿入の処理を実装します。

typescript// PostgreSQL クライアントを作成
async function createDbClient(): Promise<Client> {
  const client = new Client({
    host: process.env.DB_HOST,
    port: 5432,
    database: process.env.DB_NAME,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
  });

  await client.connect();
  return client;
}

// データベースにメトリクスを挿入
async function insertMetrics(client: Client, data: any) {
  const acceptanceRate = calculateAcceptanceRate(data);
  const rejectionRate = calculateRejectionRate(data);

  const query = `
    INSERT INTO copilot_usage (
      day,
      total_suggestions,
      total_acceptances,
      total_lines_suggested,
      total_lines_accepted,
      total_active_users,
      acceptance_rate,
      rejection_rate
    ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
    ON CONFLICT (day) DO UPDATE SET
      total_suggestions = EXCLUDED.total_suggestions,
      total_acceptances = EXCLUDED.total_acceptances,
      total_lines_suggested = EXCLUDED.total_lines_suggested,
      total_lines_accepted = EXCLUDED.total_lines_accepted,
      total_active_users = EXCLUDED.total_active_users,
      acceptance_rate = EXCLUDED.acceptance_rate,
      rejection_rate = EXCLUDED.rejection_rate
  `;

  const values = [
    data.day,
    data.total_suggestions_count,
    data.total_acceptances_count,
    data.total_lines_suggested,
    data.total_lines_accepted,
    data.total_active_users,
    acceptanceRate,
    rejection_rate,
  ];

  await client.query(query, values);
}

最後に、メイン処理を実装します。

typescript// メイン処理
async function main() {
  try {
    console.log('Fetching Copilot metrics...');
    const metricsData = await fetchCopilotMetrics(
      GITHUB_ORG
    );

    console.log('Connecting to database...');
    const client = await createDbClient();

    console.log('Inserting metrics...');

    // API が配列で返す場合は各日付ごとに挿入
    if (Array.isArray(metricsData)) {
      for (const dayData of metricsData) {
        await insertMetrics(client, dayData);
      }
    } else {
      await insertMetrics(client, metricsData);
    }

    await client.end();
    console.log('Metrics saved successfully!');
  } catch (error) {
    console.error('Error:', error);
    process.exit(1);
  }
}

main();

ステップ 4:スクリプトの実行

TypeScript をコンパイルして実行します。

bash# TypeScript をコンパイル
yarn tsc

# スクリプトを実行
node dist/collect.js

正常に動作すれば、以下のような出力が表示されます。

cssFetching Copilot metrics...
Connecting to database...
Inserting metrics...
Metrics saved successfully!

ステップ 5:定期実行の設定

データ収集を自動化するため、cron で定期実行を設定します。

bash# crontab を編集
crontab -e

以下のエントリを追加し、毎日午前 2 時にスクリプトを実行します。

bash0 2 * * * cd /path/to/project && node dist/collect.js >> /var/log/copilot-metrics.log 2>&1

これにより、毎日自動的にデータが収集され、データベースに蓄積されます。

ステップ 6:Grafana ダッシュボードの構築

Docker Compose で Grafana と PostgreSQL を起動します。

bash# Docker Compose で起動
docker-compose up -d

ブラウザで http:​/​​/​localhost:3000 にアクセスし、Grafana にログインします(初期ユーザー名・パスワードは admin)。

データソースとして PostgreSQL を追加し、以下のクエリでパネルを作成します。

受容率の推移パネル:

sqlSELECT
  day AS time,
  acceptance_rate AS "受容率 (%)"
FROM copilot_usage
ORDER BY day ASC;

生成行数の推移パネル:

sqlSELECT
  day AS time,
  total_lines_accepted AS "生成行数"
FROM copilot_usage
ORDER BY day ASC;

アクティブユーザー数の推移パネル:

sqlSELECT
  day AS time,
  total_active_users AS "アクティブユーザー数"
FROM copilot_usage
ORDER BY day ASC;

これらのパネルを組み合わせることで、GitHub Copilot の利用状況を一目で把握できるダッシュボードが完成します。

ダッシュボードの活用例

構築したダッシュボードは、以下のような場面で活用できます。

#活用シーン確認する KPI
1チームの生産性評価受容率、生成行数
2Copilot 投資対効果の検証アクティブユーザー数、1 人あたり受容数
3AI 提案の品質改善却下率の推移
4利用促進キャンペーンの効果測定アクティブユーザー数の増減

ダッシュボードをチーム内で共有することで、データに基づいた議論や改善活動が促進されるでしょう。

まとめ

GitHub Copilot の利用状況を可視化するダッシュボードを構築することで、受容率、却下率、生成差分といった重要な KPI を定量的に把握できます。

API を使ったデータ収集、PostgreSQL へのデータ蓄積、Grafana によるダッシュボード構築という一連のフローを実装することで、リアルタイムに利用状況を監視できる環境が整いました。

この仕組みを活用すれば、GitHub Copilot の投資対効果を客観的に示せるだけでなく、チームの生産性向上や AI 活用促進にも貢献できるでしょう。ぜひ、あなたの組織でも Copilot 利用の可視化に取り組んでみてください。

関連リンク