覚えていますか？1
ということで、こんなものを作りました。
GitHubのレポジトリのプログラミング言語とそのbyte数を集計して、グラフをSVGとして表示するものです。
↓↓ こんな感じ（私のレポジトリ集計結果です）
何に使うの？
独学において、自分の勉強量の見える化はモチベーションにつながります。
勉強時間でもいいのですが、GitHub APIでレポジトリのbyte数が取得できるので、プログラミングしたbyte数も良いモチベーションになるかもと思い、作ってみました。
GitHubのプロフィールに貼ると少しだけイケイケになります。
※上記画像では、以下のサービスも併せて使っています。
使い方
GitHubにソースコードとhow to useをあげています。
リンクURLを自分のアカウント名に修正して、マークダウンやHTMLにコピペで使用できます。
リンクURLを生成するページも一応作ってみました。
（Adsense貼ってありますので、不快に思われる方は上記のGitHubレポジトリを参照ください）
使用技術
- Vercel Serverless Functions
- GitHub GraphQL API
Vercel serverless Functionsについて
Vercelというホスティングサービスの、サーバーレス機能です。（そのまま・・
サーバーの確保や、面倒な設定などなしに、サーバー用のプログラムをアップロードするだけで実行してくれる便利な機能です。
Node.js、GO、Python、Rubyに対応しており、今回はNode.jsを使っています。
無料枠あります。
詳細はこちら
GitHub GraphQL APIについて
GraphQL APIとは、複数のデータを一回のAPIエンドポイントへのアクセスで取得できるクエリ言語です。
REST APIと比較して、少ないリクエストで所望のデータを取得できるのが特徴です。
GitHubにはGraphQL APIが準備されており、これを使用することで、GitHubユーザーのレポジトリ情報やスター数、コミット数、PL数など様々な情報を取得することができます。
詳細はこちら
Node.jsでGitHub GraphQL APIを使用する
Axiosを使用することで、比較的簡単にGraphQL APIでデータを取得することができます。
ソースコード
import axios from "axios";
let hasNextPage = true;
let endCursor;
let resData = [];
const token = "xxxxxxxx";
const username = "xxxxxx";
const headers =
{
Authorization: `token ${token}`,
};
const variables =
{
login: username
};
let i = 0;
while (hasNextPage) {
let data =
{
query: `
query userInfo($login: String!) {
user(login: $login) {
repositories(ownerAffiliations: OWNER, isFork: false, first: 100, ${endCursor ? `after: "${endCursor}"` : ''}) {
pageInfo{
hasNextPage
endCursor
}
nodes {
name
languages(first: 10, orderBy: {field: SIZE, direction: DESC}) {
edges {
size
node {
color
name
}
}
}
}
}
}
}
`,
variables,
};
let res = await axios({
url: "https://api.github.com/graphql",
method: "post",
headers,
data,
});
hasNextPage = res.data.data.user.repositories.pageInfo.hasNextPage;
endCursor = res.data.data.user.repositories.pageInfo.endCursor;
resData[i] = res.data;
i++;
}
以下に説明をまとめていますので、ご興味があれば覗いてみてください。
おわりに
是非、自分がどのくらいプログラミングしているかbyte数をカウントしてみてください！