エンジニアとしてのポートフォリオページを公開しました
Production 🎉
リンク
What is this ❓
動機 🤔
とりあえずここを見れば何をしている人かわかるようにしたかった
利用した技術要素 🔧
Frontend
- material-ui
- react
- Chart.js
Backend
グラフの部分の作り方 📊
基本的には Chart.js を利用して、JSONでデータを読み込ませればできる。 ただしデータ取得元の Github API に 利用回数制限があったり、全件取得に 結構時間がかかる処理だったので、クライアントのJSからAPIを叩くよりも、サーバーサイドで事前にキャッシュする仕組みを作ることにした。
グラフデータのキャッシュ
グラフはGithub レポジトリ内のソースコードのバイト数を言語別に出すことができるAPIを利用して取得している。
https://developer.github.com/v3/repos/#list-your-repositories
https://developer.github.com/v3/repos/#list-languages
ただし、まずレポジトリの一覧を取得して、レポジトリ毎に言語情報を取得するAPI を叩くという処理に9秒以上かかったので、クライアントJSでAPIを叩くにはさすがに現実的ではないと判断。
一定間隔で AWS-Labmda から Github API を叩いて 取得した 結果を S3にキャッシュしておき、ブラウザは常にそのS3上のキャッシュを表示するようにした。