はじめてのポートフォリオサイトを作りました。
はじめに
フロントエンド学習の一貫で、はじめてポートフォリオサイトを個人開発で作りました。
本記事では、ポートフォリオサイトを作ったモチベーションと技術構成について紹介しようと思います。
モチベーション
フロントエンドの基礎レベルの学習を一通り終えたので、今できる技術でシンプルなポートフォリオサイトを作りたいという気持ちがありました。 ちょうどTechTrainで「あなたのポートフォリオ、拝見します。」というイベントが開催されるタイミングだったので、これを機にポートフォリオサイトを作成し、レビューしていただこうと思いました。
サイト概要
コンセプト
どうせ作るなら、できるだけ軽量シンプルで、ある程度誰でもアクセスしやすいポートフォリオサイトにしようと思っていました。
また、テスト自動化をするにあたりユーザーのふるまいを意識した実装を行うことが多いので、サイトもできるだけユーザビリティ、アクセシビリティのあるものになるよう心がけました。
ポートフォリオとして、今まで取り組んだ言語やツールなどをブログ等のページへ連携し、スコア化することで、どの程度できるかを可視化することを試みました。
技術スタック
| 技術スタック | 用途 |
|---|---|
| Next.js,TypeScript,Tailwind.css | UI |
| Vercel | Hosting・CI/CD |
| Vitest | ユニットテスト |
| Cypress | E2Eテスト |
| Github Actions | CI/CD |
ポートフォリオ作成中に、取り組んだ学習教材
Learn Next.js
GitHub Actions - The Complete Guide
JavaScript Unit Testing - The Practical Guide
PickUp
軽量シンプル
Next.js&Vercelで、静的サイトを自動ビルドと自動デプロイすることができます。
実機（Web/スマホ）でも確認したりしましたが、スマホアクセス時の軽さに自分でびっくりしました。
PageSpeed Insights
何回か確認しましたが、いい感じでした。
テスト自動化
サイト自体がシンプルなので、凝ったテストスクリプトは作っていません。
ユニットテストをVitestで実装し、E2EテストをCypressで実装しています。
GithubActionsでCI/CD化したいと思い、Cypressだけworkflow_dispatchで実装しました。
アクセシビリティ
テスト自動化をするにあたり、ユーザーの振る舞いに着目することが多いです。
そのため、自分でポートフォリオサイトを作る時は、ある程度ユーザビリティ・アクセシビリティを確保しようと思っていました。レスポンシブ対応もしています。
lighthouse
アクセシビリティといっても、Material DesignやTest Automation Universityの講座などで少し学習した程度です。
そのため、lighthouseを使って、お手軽にチェックしていました。
taba11y
キーボード操作は、アクセシビリティにおいて重要です。
私はマウスをよく使うタイプなのですが、プログラミングをやるようになってショートカットキーやTABキーを幾分使うようになりました。
Chrome拡張機能でさくっと使えるので、便利です。
上記のように、TABキーによる移動順を教えてくれるので、これをもとにtabindexを振っていきました。
axe-core/cypress-axe
Cypressでアクセシビリティをチェックできる、便利なライブラリです。
アクセシビリティに問題のあるものを、エラーで教えてくれます。
Github Issue管理
途中からですが、大きなタスクのときはならべくGithub Issueに切り出すようにしました。
元々mainブランチに直接commit→pushをしていたのですが、メンターさんに教えていただきました。
branchを切って、mainブランチへpull_requestをし、マージしたら関連IssueもCloseするようにしました。
毎回書く項目を以前書いたものをコピペして・・・というのが煩わしく忘れそうになると思っていたので、Issueとpull_requestの時は、テンプレートを使うようにしています。（これも教えていただきました。）
さいごに
このポートフォリオサイトを作ろうと思い始めたときが、2023年7月末あたりでした。
TechTrainのメンターさんに2回レビューをいただきました。
Github上の開発プロセス改善やSkillの数値化・実績とのリンクなど、自分ひとりで開発していると気づかないことを数多く教えていただきました。とてもありがたかったです。
今後もポートフォリオサイトとして、また、実装してみたい機能を追加する媒体としても、ちょくちょく触っていこうと思います。
Discussion