【Node.js / Vercel】おまえは今までにプログラミングしたbyte数を覚えているか

# 覚えていますか？[^1]

ということで、こんなものを作りました。
GitHubのレポジトリのプログラミング言語とそのbyte数を集計して、グラフをSVGとして表示するものです。

↓↓ こんな感じ（私のレポジトリ集計結果です）
[![bytes](https://github-repo-bytecounter.vercel.app/api?username=yamaccu&exclude=yamaccu.github.io,Blazor-CharjsTest)](https://github.com/yamaccu/Github-Repo-ByteCounter)


# 何に使うの？

独学において、自分の勉強量の見える化はモチベーションにつながります。
勉強時間でもいいのですが、GitHub APIでレポジトリのbyte数が取得できるので、プログラミングしたbyte数も良いモチベーションになるかもと思い、作ってみました。

GitHubのプロフィールに貼ると少しだけイケイケになります。

[![githubProfile-min.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519575/cace9507-9cd9-afae-0845-f2253af6a35c.png)](https://github.com/yamaccu)

※上記画像では、以下のサービスも併せて使っています。

https://github.com/anuraghazra/github-readme-stats

# 使い方

GitHubにソースコードとhow to useをあげています。
リンクURLを自分のアカウント名に修正して、マークダウンやHTMLにコピペで使用できます。

https://github.com/yamaccu/Github-Repo-ByteCounter

リンクURLを生成するページも一応作ってみました。
（Adsense貼ってありますので、不快に思われる方は上記のGitHubレポジトリを参照ください）

https://yamaccu.github.io/app/20230114_github-bytesprogrammed



# 使用技術

* Vercel Serverless Functions
* GitHub GraphQL API

### Vercel serverless Functionsについて

Vercelというホスティングサービスの、サーバーレス機能です。（そのまま・・
サーバーの確保や、面倒な設定などなしに、サーバー用のプログラムをアップロードするだけで実行してくれる便利な機能です。
Node.js、GO、Python、Rubyに対応しており、今回はNode.jsを使っています。
無料枠あります。

詳細はこちら

https://vercel.com/docs/concepts/functions/serverless-functions

### GitHub GraphQL APIについて

GraphQL APIとは、複数のデータを一回のAPIエンドポイントへのアクセスで取得できるクエリ言語です。
REST APIと比較して、少ないリクエストで所望のデータを取得できるのが特徴です。

GitHubにはGraphQL APIが準備されており、これを使用することで、GitHubユーザーのレポジトリ情報やスター数、コミット数、PL数など様々な情報を取得することができます。

詳細はこちら

https://docs.github.com/ja/graphql



# Node.jsでGitHub GraphQL APIを使用する

Axiosを使用することで、比較的簡単にGraphQL APIでデータを取得することができます。

<details><summary>ソースコード</summary><div>

```javascript
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++;
}
```
</div></details>

以下に説明をまとめていますので、ご興味があれば覗いてみてください。

https://yamaccu.github.io/tils/20221229-git-graphql

<br>

# おわりに
是非、自分がどのくらいプログラミングしているかbyte数をカウントしてみてください！

<br>

[^1]: 元ネタはジョジョの奇妙な冒険において、ディオ・ブランドーが放ったセリフです。詳細は[「こちら」](https://dic.pixiv.net/a/%E3%81%8A%E3%81%BE%E3%81%88%E3%81%AF%E4%BB%8A%E3%81%BE%E3%81%A7%E9%A3%9F%E3%81%A3%E3%81%9F%E3%83%91%E3%83%B3%E3%81%AE%E6%9E%9A%E6%95%B0%E3%82%92%E3%81%8A%E3%81%BC%E3%81%88%E3%81%A6%E3%81%84%E3%82%8B%E3%81%AE%E3%81%8B%3F)