✏️

Nuxt3・Goでポートフォリオサイトを作ってみた

2023/01/02に公開

はじめに

転職活動を行うにあたって、自身の経歴や日々の学習を記録したポートフォリオサイトを作成しています。

使用している技術は以下です。実務で使用したものを中心に採用しましたが、vue3系は初めて触りました。

Githubでも日々のコミット数を見ることができますが、それと同じようなものを作成してみたいと思い、機能実装を始めました。GithubAPIを使用するのは初めてでしたが、さまざまな記事を参考にさせていただきなんとか作り上げることができました。

Goではgo-githubというライブラリがありましたので、こちらを使用して実装しました。

コミット数に関しては、ListEventsPerformedByUserを使用して、コミットの日付を取得し、1日何回コミットを行ったかを確認できるようにしました。

使用言語に関しては、Listを使用して、publicな自分のリポジトリの情報を取得後、ListLanguagesを使用して、各リポジトリで記述されている言語を抽出してきました。

今後こちらの記事も書いていきたいなと思ってます

Githubで取得した情報をグラフで可視化したいと思い、Chart.jsを採用しました。Vueで使用するため、vue-chartjsも導入して実装を進めました。

コミット数は棒グラフで毎日の推移を参照できるようにし、使用言語に関しては極座標グラフで割合が可視化できるようにしました。

まだまだVue3に関する記事も少なく、またTypeScriptに対応していない記事も多く見受けられ、作成するのに少し苦労したので、今後記事に残したいと思います。

外部API（GithubAPI）をリクエスト毎に叩いてしまうと、少しだけ迷惑になるかなと思ったので、リクエスト毎にデータを取得するのではなく、1時間に1度cronを起動して、外部APIを叩いてデータ取得後、jsonファイルに書き込みを行い、表示させるようにしました。

jsonファイルに書き込むよりも、S3などのストレージサービスにあげると良いのかなと思いましたが、時間・コスト的に余裕がなかったので今後改善していきたいです。

デザイン的にもちょっと崩れている部分もあるので、時間を見つけながら修正・改善していきたいと思います。
このポートフォリオサイト作成で得た知見（上記に書いた以外にもAWSを使用したデプロイなど）は今後記事にしていきたいと思います。