📈

GitHubの「草」では見えない成長を可視化するOSSを作った

に公開
GitHub
TypeScript
個人開発
OSS
idea

GitHubの草では「成長」が見えない

GitHubのプロフィールページにあるコントリビューショングラフ、いわゆる「草」は、日々の活動を一目で確認できる便利な機能です。

しかし、あのグラフには限界があります。

  • 表示期間が直近1年に限定される
  • 日単位のアクティビティを表示するだけで、長期的なトレンドがわからない
  • 言語の変遷が見えない

「自分は去年と比べてどれくらい成長したのか？」「どの言語をどれだけ使ってきたのか？」

こうした問いに答えるために、GitHub Contribution Growth Graph を作りました。

https://github.com/qkitzero/github-contribution-growth-graph

何ができるのか

GitHubのコントリビューションデータを集約し、累積成長グラフを動的生成するサービスです。GitHubのユーザー名を指定するだけで、あなたのコントリビューションと言語使用の成長を可視化できます。

コントリビューション成長グラフ

月単位でコントリビューション数を累積し、時系列の成長を可視化します。コミット・Issue・PR・レビューの4種類を積み上げ面グラフで表示します。

コントリビューション成長グラフ

言語成長グラフ

コントリビューションしたリポジトリの言語データを集計し、使用言語の変遷を累積グラフで表示します。GitHubの公式カラーをそのまま使っているので、見慣れた色で直感的に読めます。

言語成長グラフ

自分の場合、Goを中心に書いていたところに最近TypeScriptが増えてきているのが一目瞭然です。

既存ツールとの違い

GitHub Profile READMEで使えるツールといえば github-readme-stats が有名です。

github-readme-stats は現在のステータス（Star数、コミット数、使用言語の割合など）を表示するのに対し、GitHub Contribution Growth Graph は時間軸での成長の軌跡を可視化します。

「今どれくらい」ではなく「どう成長してきたか」が見えるのが最大の違いです。

テーマとサイズ

9種類のカラーテーマを用意しています。プロフィールの雰囲気に合わせて選べます。

テーマ プレビュー
default default
dark dark
blue blue
purple purple
green green

その他に red / orange / pink / light テーマもあります。

サイズは small（600×300）、medium（800×400）、large（1000×500）の3種類です。

使い方

GitHubプロフィールのREADMEに以下のMarkdownを貼るだけです。

[![GitHub Contribution Growth Graph](https://github-contribution-growth-graph.qkitzero.xyz/graph/contributions?user=YOUR_USERNAME)](https://github.com/qkitzero/github-contribution-growth-graph)

YOUR_USERNAME を自分のGitHubユーザー名に置き換えてください。

カスタマイズ例

テーマ・サイズ・期間・種別を組み合わせられます。

<!-- ダークテーマ、ラージサイズ -->
[![Growth Graph](https://github-contribution-growth-graph.qkitzero.xyz/graph/contributions?user=YOUR_USERNAME&theme=dark&size=large)](https://github.com/qkitzero/github-contribution-growth-graph)

<!-- コミットとPRだけ、3年間 -->
[![Growth Graph](https://github-contribution-growth-graph.qkitzero.xyz/graph/contributions?user=YOUR_USERNAME&from=2023-01-01&to=2026-01-01&types=commit,pr)](https://github.com/qkitzero/github-contribution-growth-graph)

<!-- 言語グラフ -->
[![Language Graph](https://github-contribution-growth-graph.qkitzero.xyz/graph/languages?user=YOUR_USERNAME)](https://github.com/qkitzero/github-contribution-growth-graph)

パラメータ一覧

パラメータ 説明 デフォルト
user GitHubユーザー名（必須） -
from 開始日（YYYY-MM-DD） 1年前
to 終了日（YYYY-MM-DD） 今日
theme カラーテーマ default
size グラフサイズ（small/medium/large） medium
types 表示するコントリビューション種別（commit,issue,pr,review） 全種類

技術スタック

レイヤー 技術
言語 TypeScript
フレームワーク Express
グラフ描画 Chart.js（サーバーサイドレンダリング）
データ取得 GitHub GraphQL API
ホスティング Cloud Run

アーキテクチャの詳細（クリーンアーキテクチャの設計、GraphQL APIの月次分割戦略、Chart.jsのサーバーサイドレンダリングなど）は、別の記事で詳しく解説する予定です。

おわりに

GitHub Contribution Growth Graph は、GitHubの「草」では見えない累積的な成長を可視化するツールです。

自分のプロフィールに貼ってみると、「意外と成長していた」「この時期に言語が変わった」など、新しい発見があるかもしれません。

OSSとして公開しているので、ぜひ使ってみてください。Issue や PR も歓迎です。

https://github.com/qkitzero/github-contribution-growth-graph

Discussion