Star Historyでオープンソースプロジェクトの成長を追跡する方法

新しいプロジェクトでライブラリを選んだり、代替案を比較したりする際、GitHubのスター数は誤解を招くことがあります。5年前のプロジェクトに5,000スターと、6ヶ月前に始まったリポジトリに5,000スターでは、完全に異なる物語が語られます。前者はメンテナーが放置している可能性があり、後者はコントリビューターの積極的な流入により急成長しています。

GitHub自体は現在のスター数のみを表示します。プラットフォームは標準で過去のトレンドデータを提供していません。そのため、コミュニティは長い間Star Historyに頼ってきました—生データを人気度のビジュアルグラフに変換するツールです。

このサービスができること

このプロジェクトはstar-history.comでウェブサービスとして運営されていますが、ソースコードはすべてMITライセンスで公開されています。リポジトリ名を入力するだけで、蓄積されたスターの推移グラフがすぐに表示されます。

主に使われている用途は次の通りです：

xkcdスタイルのコミックグラフ。線がやや手描き風でカジュアルに見えるため、プレゼンテーションや記事ですぐに識別できます。
複数のリポジトリを1つの画面内で比較可能。競合のグラフ（例えばVue vs. ReactやSvelteなど）を重ねて表示し、トレンドが逆転した正確なタイミングを確認できます。
表示モードの切り替え。日付を基準にした表示と、各リポジトリの作成日からのタイムライン表示を切り替えられます。
READMEファイル用の埋め込み可能なライブSVGチャートとバッジ。

READMEにチャートを埋め込む方法

多くの人気ライブラリ作者は、プロジェクトの説明文に直接スター履歴チャートを埋め込んでいます。これにより、訪問者にコミュニティの成長ペースを即座に示すことができます。

これはサービスのAPIを呼び出すことで行われます。ダークテーマとライトテーマの両方に対応したマークアップは次のようになります：

<a href="https://star-history.com/#your-username/your-repo&Date">
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/chart?repos=your-username/your-repo&type=Date&theme=dark" />
   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/chart?repos=your-username/your-repo&type=Date" />
   <img alt="Star History Chart" src="https://api.star-history.com/chart?repos=your-username/your-repo&type=Date" />
 </picture>
</a>

チャート以外にも、このサービスはリポジトリのグローバルランキングを示すコンパクトなバッジを生成します。

内部構造

プロジェクトのコードベースは、フロントエンド、ブラウザ拡張機能、バックエンドの3つに分かれています。

フロントエンドはTypeScriptで記述され、Next.jsを使用し、Tailwind CSSでスタイリングされています。開発者はpnpmパッケージマネージャーを使用しています。

フロントエンドをローカルで実行するには：

cd frontend
pnpm install
pnpm dev

その後、ウェブインターフェースはhttp://localhost:3000でアクセス可能になります。

SVGチャート画像をリアルタイムで生成するバックエンドには、別のサービスが使用されています：

cd backend
pnpm install
pnpm dev

APIサーバーはポート8080で実行されます。

興味深い詳細として、READMEには著者が外部からのプルリクエストを受け付けていないことが明記されています（We do not accept external contribution）。このプロジェクトは特定のチームによってメンテナンスされているため、カスタム変更が必要な場合はリポジトリをフォークする必要があります。

Chrome拡張機能

毎回ウェブサイトにアクセスしたくない場合、プロジェクトはChromeブラウザ拡張機能を提供しています。

これにより、任意のGitHubリポジトリのページに直接履歴ビューボタンが追加されます。フロントエンドフォルダーで1つのコマンドを実行すれば、ソースからビルドできます：

cd frontend
pnpm build:ext

готовыйバンドルは./distフォルダーに配置され、開発者モードでブラウザに解凍済み拡張機能として読み込むことができます。

実践的なシナリオ

日常業務では、Star Historyは4つの一般的な状況で役立ちます：

依存関係の健全性評価。スター獲得率の急激な低下は、作者がプロジェクトを放置したり、イシューへの応答を停止したタイミングと一致することが多いです。
ピッチや講演の準備。xkcdスタイルのチャートは、干燥した技術スライドに変化をもたらす優れた方法です。
リリース後のマーケティング分析。プロジェクトをHacker NewsやProduct Huntでローンチし、その後の数日間で観客の反応を視覚的に確認したい場合に便利です。
類似ライブラリの選択。類似した機能を持つ2つのユーティリティから選ぶ必要がある場合、チャートはどちらが勢いを増していてどちらが徐々に衰退しているかを理解するのに役立ちます。