はじめてのポートフォリオサイトを作りました。
はじめに
フロントエンド学習の一貫で、はじめてポートフォリオサイトを個人開発で作りました。
本記事では、ポートフォリオサイトを作ったモチベーションと技術構成について紹介しようと思います。
※2024/07/19 内容が少し古くなっていたため、ポートフォリオサイトと当記事の内容を一部変更しています。
モチベーション
フロントエンドの基礎レベルの学習を一通り終えたので、今できる技術でシンプルなポートフォリオサイトを作りたいという気持ちがありました。 ちょうどTechTrainで「あなたのポートフォリオ、拝見します。」というイベントが開催されるタイミングだったので、これを機にポートフォリオサイトを作成し、レビューしていただこうと思いました。
サイト概要
コンセプト
どうせ作るなら、できるだけ軽量シンプルで、ある程度誰でもアクセスしやすいポートフォリオサイトにしようと思っていました。
また、テスト自動化をするにあたりユーザーのふるまいを意識した実装を行うことが多いので、サイトもできるだけユーザビリティ、アクセシビリティのあるものになるよう心がけました。
※2024/07/14 はてなブログやZennの記事を、APIを通じてポートフォリオサイトにのせるようにしました。
※参考にした記事
技術スタック
| 技術スタック | 用途 |
|---|---|
| Next.js,TypeScript,Tailwind.css | UI |
| Vercel | Hosting・CI/CD |
| Vitest | ユニットテスト |
| Cypress,※Playwright | E2Eテスト |
| Github Actions | CI |
※2024/07/14 Playwrightを追加しました。
ポートフォリオ作成中に、取り組んだ学習教材
Learn Next.js
GitHub Actions - The Complete Guide
JavaScript Unit Testing - The Practical Guide
PickUp
軽量シンプル
Next.js&Vercelで、静的サイトを自動ビルドと自動デプロイすることができます。
実機（Web/スマホ）でも確認したりしましたが、スマホアクセス時の軽さに自分でびっくりしました。
PageSpeed Insights
※ 2024/07/14時点での結果
テスト自動化
サイト自体がシンプルなので、凝ったテストスクリプトは作っていません。
ユニットテストをVitestで実装し、E2EテストをCypressで実装しています。
※2024/07/14 Playwrightを追加しました。
GithubActionsでCIを回したいと思い、Cypressをworkflow_dispatchで、Playwrightをschduleで実装しています。
アクセシビリティ
テスト自動化をするにあたり、ユーザーの振る舞いに着目することが多いです。
そのため、自分でポートフォリオサイトを作る時は、ある程度ユーザビリティ・アクセシビリティを確保しようと思っていました。レスポンシブ対応もしています。
lighthouse
アクセシビリティといっても、Material DesignやTest Automation Universityの講座などで少し学習した程度です。
そのため、lighthouseを使って、お手軽にチェックしていました。
taba11y
キーボード操作は、アクセシビリティにおいて重要です。
私はマウスをよく使うタイプなのですが、プログラミングをやるようになってショートカットキーやTABキーを幾分使うようになりました。
Chrome拡張機能でさくっと使えるので、便利です。
上記のように、TABキーによる移動順を教えてくれるので、これをもとにtabindexを振っていきました。
さいごに
このポートフォリオサイトを作ろうと思い始めたときが、2023年7月末あたりでした。
TechTrainのメンターさんに2回レビューをいただきました。
自分ひとりで開発していると、気づかないことを数多く教えていただきました。
とてもありがたかったです。
今後もポートフォリオサイトとして、また、実装してみたい機能を追加する媒体としても、ちょくちょく触っていこうと思います。
Discussion