README Stock

このサイトについて

Netlify Status CircleCI issues stars MIT License

開発環境

Version
Mac OSCatalina 10.15.7
Nodev15.4.0
npm7.0.15
Nuxt2.14.12
Vue2.6.12
Vuetify2.4.2
GitHubAPIv4

概要

楽に, 自動的に, 勉強出来る

GitHubAPIでREADMEを取得し、一覧表示&README確認が出来る半自動ポートフォリオ

作成理由 & 技術選定

ポートフォリオ作成する際に、楽にフロントだけで作成する方法を探していると、GitHubのリポジトリ情報を取得することで、 簡単かつ楽に半自動的なポートフォリオを作成することが出来ると考えました。

そして、GitHubAPIを調べていると、APIの種類にRestAPIGraphQLというものがあることを知り、 GitHubAPI v4がGraphQLを使用していて、GraphQLの勉強も出来るため、v4を採用しました。

フロントは、以前Vueを使用したこともあり、Nuxtに興味があったのでNuxtを採用、デザインはVuetifyを採用し、 完全に頼り切ってそれなりかつに作成しました。

しかし、SPAではなく表示速度を意識して作成したいと思いSSGを採用しているため、リポジトリを追加した場合に、 ホスティング先のNetlifyでbuildし直さないと更新されないので、完全自動化とは言えないので、半自動としています。

ホスティング先に関しては、NetlifyVercelどちらにしようか迷ったのですが、VercelはNext.jsを開発している会社らしく、 今後Reactも勉強してNextで何か作成する予定なのでその際にVercelを採用しようと考え、消去法でNetlifyを採用しました。

各ページ解説

├── トップページ
│   ├── 自己紹介
│   ├── 使用言語割合チャート
│   │   # GitHubのプライベートリポジトリ含めて使用したことのある言語の割合
│   ├── アプリ一覧
│   │   # 本番環境に上がっている、アプリ一覧
│   └── 各種リンク
│
├── readmes
│   ├── README一覧
│   └── README
│    # GitHubにpushすると、ほぼリアルタイムで更新
│
├── blogs
│   ├── ブログ記事一覧
│   └── ブログ記事
│    # 現在コンテンツ作成中で、最近勉強したことなどを追加していく予定
│
└── info
    ├── このサイトについて ※現在のページ
    └── お問い合わせ
    # Netlify formを使ってみたくて追加したページ、新規メッセージはDiscordで通知される

トップページのLighthouse測定結果

Desktop

Lighthouse_desktop

Mobile

Lighthouse_mobile

測定結果を見て

Mobile測定でのパフォーマンスがかなり悪いようなので、改善していきたいと考えています。

参考サイト

2021/02/12 - 1年前