バイブコーディング実践編 — Claude Code を中心に AIで安全に作る力 ／ Capstone — 小規模Webアプリ完走

Capstone — 計測ダッシュボード

読了目安 6 分

学習のねらい

開発したアプリケーションが期待通りに動作しているか、パフォーマンスは十分か、コストは適切かといった情報を継続的に把握することは非常に重要です。 このレッスンでは、Capston プロジェクトの主要な計測値を収集し、それを視覚的に分かりやすいダッシュボードとして表示する方法を学びます。 Streamlit や Notion などのツールを活用して、PR ごとのトレンドや週ごとの変化を可視化するスキルを身につけましょう。

なぜ計測ダッシュボードが必要なのか

アプリケーションの健全性を判断するためには、以下のようなデータが役立ちます。

  • テストカバレッジ (Test Coverage): コードがどれだけテストされているか。品質の指標になります。
  • 欠陥密度 (Defect Density): コードの単位量あたりのバグの数。品質の別の側面を示します。
  • トークンコスト (Token Cost): AI の API 利用にかかる費用。特に LLM を多用するアプリケーションでは重要なコスト指標です。
  • レイテンシ (Latency): API 応答時間や画面描画時間。ユーザー体験に直結するパフォーマンス指標です。

これらのデータを定期的に計測し、ダッシュボードで可視化することで、問題の早期発見や改善活動の意思決定に役立てられます。 例えば、「テストカバレッジが急に下がった PR は品質が低い可能性がある」「AI の利用コストが想定外に高騰している」といった状況を素早く察知できます。

計測値の収集方法

  1. テストカバレッジ: CI/CD パイプラインで pytest-cov (Python) や jest --coverage (JavaScript) などのツールを使って計測し、結果をファイルに出力します。
  2. 欠陥密度: SAST ツール (例: semgrep) の結果から検出された脆弱性や、手動レビューで見つかったバグの数を、コード行数で割って算出します。
  3. トークンコスト: AI の API から返される usage 情報 (入力トークン数、出力トークン数) をログに記録し、API プロバイダーの料金体系に基づいて計算します。
  4. レイテンシ: アプリケーションの API エンドポイントや Web ページの読み込み時間を計測するコードを埋め込むか、外部のモニタリングツールを使用します。

これらの計測値は、CI 実行時や定期バッチ処理で自動的に収集し、何らかのデータストア (例: JSON ファイル、データベース、Notion データベース) に保存すると良いでしょう。

Streamlit / Notion ダッシュボード

Streamlit を使った可視化

Streamlit は、Python だけで簡単にインタラクティブな Web アプリケーションやダッシュボードを作成できるライブラリです。 収集した計測データを CSV や JSON 形式で保存しておけば、Streamlit を使って手軽にグラフ化・可視化できます。

import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt

st.title("Capstone Project Dashboard")

# ダミーデータ (実際はファイルから読み込む)
data = {
    "PR": [1, 2, 3, 4],
    "Coverage": [70, 75, 68, 80],
    "AI_Cost": [0.5, 0.7, 0.6, 0.8]
}
df = pd.DataFrame(data)

st.subheader("Test Coverage Trend")
st.line_chart(df.set_index("PR")["Coverage"])

st.subheader("AI Token Cost Trend")
st.bar_chart(df.set_index("PR")["AI_Cost"])

Notion データベースと API を使った可視化

Notion は、ドキュメント作成だけでなく、データベース機能も持っています。 Notion API を使えば、CI/CD から Notion データベースに計測値を自動的に書き込み、Notion の機能でグラフ表示やフィルターを行うことができます。 これにより、開発チーム全体で簡単にダッシュボードを共有し、状況を把握できます。

まとめ

Capston プロジェクトでは、テストカバレッジ、欠陥密度、トークンコスト、レイテンシ などの主要な計測値を収集し、Streamlit や Notion を使って可視化するダッシュボードを作成しましょう。 これにより、アプリケーションの品質、パフォーマンス、コストを継続的に監視し、改善活動に役立てられます。

参考リンク

Capstone — 計測ダッシュボード | バイブコーディング実践編 - AI研修