⭐
JavaScriptでGitHub APIを実行しリポジトリのスター数を取得する
１．はじめに
ポートフォリオなどにGitHubリポジトリのスター数を載せる際、以下のように画像形式で掲載することが多いかと思います。
一方で、WEBページに直接文字列として取得したい場合、下記方法は使用できません。
そこで、今回はGitHubリポジトリのスター数を取得するJavaScriptコードを紹介します。
以下2パターン用意してみました。
- 特定のリポジトリのスター数を取得する
- 全リポジトリを合わせた総スターを取得する
ただし、GitHub APIには制約があるので使用する際は注意してください。
２．ソースコード
■ ２－１．特定のリポジトリのスター数を取得する
async function fetchRepoStars(owner, repo, elementId) {
const apiUrl = `https://api.github.com/repos/${owner}/${repo}`;
try {
const response = await fetch(apiUrl);
if (!response.ok) throw new Error('取得失敗');
const data = await response.json();
const starCount = data.stargazers_count;
document.getElementById(elementId).textContent = starCount;
} catch (error) {
document.getElementById(elementId).textContent = '取得失敗';
}
}
document.addEventListener('DOMContentLoaded', () => {
fetchRepoStars('GitHubアカウントID', 'リポジトリ名', 'repo-star-count');
});
以下のように使用できます。
<p>リポジトリのスター数は<span id="repo-star-count"></span>です。</p>
■ ２－２．全リポジトリを合わせた総スターを取得
async function fetchTotalStars(username) {
let page = 1;
let totalStars = 0;
let perPage = 100;
let hasMore = true;
while (hasMore) {
const response = await fetch(`https://api.github.com/users/${username}/repos?per_page=${perPage}&page=${page}`);
const repos = await response.json();
if (!Array.isArray(repos)) {
document.getElementById('star-count').textContent = '取得失敗';
return;
}
repos.forEach(repo => {
totalStars += repo.stargazers_count || 0;
});
hasMore = repos.length === perPage;
page++;
}
document.getElementById('star-count').textContent = totalStars;
}
fetchTotalStars('GitHubアカウントID');
以下のように使用できます。
<p>現在の総スター数は<span id="star-count"></span>です。</p>
３．GitHub APIの制約
一方でGitHub APIには以下の制約があります。
特に未認証状態の場合、1時間60リクエストまでの制限があります。
| 状態 | 制限内容 | 単位 |
|---|---|---|
| 未認証 | 60リクエスト／時間 | 実行元IP |
| 認証済み | 5000リクエスト／時間 | ユーザー（トークン毎） |
■ GitHub API実行時のレスポンスヘッダ
GitHub API実行時のレスポンスヘッダには、以下のように最大実行回数、残り実行回数、次回リセット時刻が確認できます。
| レスポンスヘッダ名 | 説明 | 値の例 |
|---|---|---|
| x-ratelimit-limit | 60 | 最大実行回数 |
| x-ratelimit-remaining | 50 | 残り実行可能回数 |
| x-ratelimit-reset | 1746886359 | 次回リセット時刻（UNIX時間） |
４．おまけ：GitHub APIの制約をGitHub Actionを使って回避する
今回紹介した方法では未承認状態のため1時間60リクエストまでの制限があります。
そこで、GitHub Actionを使って制約を回避する方法を以下記事で紹介しています。
興味があればご一読ください！
Discussion