はじめに
エンジニアとして5年ほど働いてきて、最近はフロントエンドチームのリーダーを任されるようになってきました。
チームをマネジメントしていると、こんな悩みが出てきます。
- 「チームの開発活動を客観的に把握したい」
- 「メンバーの貢献をちゃんと可視化したい」
- 「コードレビューの偏りがないかチェックしたい」
GitHub Insightsを見ても、欲しい情報がなかなか得られない…
ということで、自分で作りました。
Team Insightsとは
Team Insightsは、GitHubリポジトリの開発活動を分析・可視化するWebアプリです。
🔗 https://team-insights-rouge.vercel.app
GitHubアカウントでログインするだけで、以下の情報を分析できます：
- コミット数 – 誰がどれくらいコミットしているか
- コード変更量 – 追加/削除行数で実装ボリュームを把握
- PR作成数 – プルリクエストの活動状況
- レビュー活動 – コードレビューへの参加度
なぜ作ったのか
GitHub Insightsでは物足りない
GitHubの標準機能でもコントリビューターのグラフは見られます。でも、以下の情報が欲しかった：
- PRのレビュー活動（誰がレビューを頑張っているか）
- 期間を柔軟に指定した分析
- チーム全体の活動サマリー
既存ツールは高額
LinearBやPlurasight Flow（旧GitPrime）といった商用ツールもあるらしいですが、1人あたり年間$300〜700かかります。8人チームだと年間40〜60万円…
個人や小規模チームには厳しい。
だったら自分で作る
エンジニアなので、作ってしまえばいい。ということで開発しました。
技術スタック
せっかくなので、モダンな構成で作りました。
| カテゴリ | 技術 |
|---|---|
| フレームワーク | Next.js 14 (App Router) |
| 言語 | TypeScript (strict mode) |
| 認証 | NextAuth.js v5 + GitHub OAuth |
| UIコンポーネント | Radix UI + Tailwind CSS |
| チャート | Recharts |
| テスト | Vitest + Playwright |
| ホスティング | Vercel |
Clean Architectureを採用
個人開発でもClean Architectureを採用しました。
src/
├── domain/ # ビジネスロジック
├── application/ # ユースケース
├── infrastructure/ # 外部連携（GitHub API等）
└── app/ # UI（Next.js）
過剰設計？と思うかもしれませんが、以下のメリットがありました：
- テストが書きやすい（ドメイン層のカバレッジ95%以上）
- 機能追加がしやすい
- AI（Claude Code）との協業で構造が明確
工夫したポイント
1. GitHub OAuthでToken入力不要
最初はPersonal Access Tokenを手動入力する方式でした。でも、これだとセキュリティ的に不安だし、ユーザー体験も悪い。
GitHub OAuthを実装して、「GitHubでログイン」ボタン一発で使えるようにしました。
2. Vercelで動かすためにGitHub API移行
当初はsimple-gitでリポジトリをcloneして分析していました。しかし、Vercelのサーバーレス環境ではgitコマンドが使えない…
すべてGitHub API経由に作り直しました。結果的に、clone時間がなくなって高速化というメリットも。
3. 仕様駆動開発（spec-kit）
Claude Codeと一緒に開発する際、spec-kitという仕様書ベースの開発フローを使いました。
仕様 → タスク分解 → 実装という流れで、AIとの協業がスムーズに。
使い方
使い方は簡単です。
- https://team-insights-rouge.vercel.app にアクセス
- 「Sign in with GitHub」でログイン
- 分析したいリポジトリのURLを入力
- 「Analyze」をクリック
プライベートリポジトリも分析できます（OAuthで適切な権限を付与）。
今後の展望
まだ最低限の機能ですが、以下を検討しています：
- PRの平均マージ時間を算出
- 作業量のスコア算出をカスタム
- チーム間の比較機能
フィードバックがあれば、GitHub Issuesにお願いします！
🔗 https://github.com/nakai95/team-insights/issues
気が向いたらチェックします。
まとめ
「GitHub Insightsが物足りない」という自分の課題から生まれたツールです。
- 無料で使える
- Token入力不要（GitHub OAuth）
- セルフホスト不要（Vercelで公開中）
開発チームのパフォーマンス可視化に興味がある方は、ぜひ試してみてください。
🔗 Team Insights: https://team-insights-rouge.vercel.app
技術的な詳細（OAuth実装、Clean Architecture、Vercel対応など）は、また別記事で書こうと思います。
コメント