プロフィールREADME
GitHubには、アイコンやbioなどの基本情報とは別にプロフィール機能があります。
自分のユーザー名と同じリポジトリを作成してREADMEを作るだけで、あとは自由にMarkdown形式で記述すればOK。
公式：プロフィールの README を管理する
オシャレにするサービスたち
「GitHub Profile」と検索すると、設定の方法や便利なサービスなど色々と出てきます。
↑この辺りは常連ですね。
GitHub Readme StatsとGithub Profile Trophyは私も利用させていただいております🙇♂️
作ってみた
で、それらに便乗して自分も作ってみました。
リポジトリ
GitHub Profile Summary Cardsのチャートを前年と比較できる形にしつつ、GitHubActionsなどを利用せずにURL形式で手軽に利用できる形を目指しました。
使い方は下記のuser=***部分にご自身のGitHubユーザー名を指定するだけです。
[](https://github.com/rokumura7/github-chart)
技術的なお話
TypeScriptのnpmプロジェクトでGitHubのGraphQL APIを利用しVercelにデプロイをしています。
TypeScript良き
最近、実務でもTypeScriptを少しずつ使うようになってきた段階で、まだまだ経験は浅く調べながらでしたが、型安全と補完はやはり非常に強力で捗りました。
Javaから入ってる身としては「これだよ、これ」と言う感覚が強かったです😌
GraphQL
今回は利用するだけでしたが、RESTに慣れきっていたので考え方自体とても面白さを感じました。
公式：GitHubのGraphQL API
GraphQLの理解に関しては下記の記事がとても参考になりました🙇♂️
GraphQLの全体像とWebApp開発のこれから
アプリ開発の流れを変える「GraphQL」はRESTとどう違うのか比較してみた
Vercelにハマった
Vercelのデプロイ自体は多くの人が述べているように、「え？こんだけ？」と言う感じで終わったのですが、開発を進める中で上記のエラーが突然発生するようになりました。
Serverless Functions Created per Deployment
VercelのHobbyプラン（=無料プラン）ではサーバレスファンクションをデプロイ毎に12個までと言う制限があります。
公式：Limits
Vercelのデフォルトの設定だとapi/配下に置かれたファイルでexportされたものがサーバレスファンクションとしてカウントされるようです。
リファクタリングをして処理を小分けにしていたらいつの間にやら超えてしまっていました😇
結局、api/にはindex.tsのみを残して他のファイル群はlib/などに切り出すことで解決しました。
さいごに
是非利用してみてください！
IssueでもPull Requestでも何かしらフィードバックもらえるととても嬉しいです。
（特にデザイン周りはボロボロなので誰か助けて欲しい。。w）
開発に際して、GitHub Readme StatsとGithub Profile Trophyを大いに参考にさせていただきました🙇♂️🙇♂️🙇♂️