はじめに
エンジニアを目指し始めて初のポートフォリオサイトを作成しました。
背景としてはインターンを始めて実務につく機会をいただき、本格的な制作物を作れるようになってきたので、形に残したいと思いポートフォリオサイトを作成することを決意しました。
また今後お仕事を自分で獲得したいと考えており、そのために本格的に準備を進めたいと思いました。
まだまだ未熟ですが見て頂けると幸いです。
使用した技術
- Next.js
- TypeScript
- tailwindcss
- microCMS
- AWS S3
- AWS CloudFront
- GitHub Actions
- figma
制作ポイント
デザイン
デザインを考える上で重視した点は以下です。
- 配色はシンプルで見やすく
- 賢い印象を持たせられるよう寒色をメインに
- 目を引くようなナビゲーション
インターンでの業務やサイト制作の学習の際にfigmaを使っていたため、自分がデザインする側にまわって使いこなしてみようと思い使用しました。
コンポーネントや階層も意識しつつ作ってみました。
デザインはノンデザイナーズデザインブックを参考に、今まで触れてきたwebサイトを参考に一から考えました。
円形でシンプルながらも目を引くようなナビゲーションが特徴的で気に入っています。
今後はアニメーションを実装して、うるさくなりすぎない程度に華やかにしていきたいと考えています。
※実際の制作物がfigmaとデザインが違うのはコーディング中にこっちの方がいいとか思いたった結果です。
実務ではこんなことゆるされませんが、デザイン作成自体がまだまだ未熟なため許してください🙇♂️
コーディング
このサイトではNext.jsを使うことにしました。理由は以下の3つです。
- 最近学習を始めたから
- ページ遷移が高速なサイトにしたかったから
- AWS Amplifyで簡単にデプロイできるから
TypeScriptについては飾り程度の知識なのでほとんど意味をなしてないです😭
今後学習した際に修正したいと考えています。
超基本的なところを抑えたら後は作りながら学んでいくというスタイルなので、色々調べたりしながら制作しました。
microCMSからデータを取ってくることで最新の制作物を表示させるのに苦労しました。コーディングはAPIを叩く処理で難しくはなかったのです。インフラのところで苦労したところを説明します。
tailwindcssについて
使用した理由は実務で使う予定があったからです。
初めはチートシートを見ながら進めていましたが、慣れるとサクサク進められて楽しかったです。
クラス名を考える手間が省けることが1番のメリットだと感じました。
導入も言語との相性が良いっぽいので手間ではなかったです。
Git & GitHub
コーディングではありませんが運用を意識しながら開発したので書きます。
実務で体験した運用をもとに以下の点を意識しました。
- issueをタスクごとにたてる
- issue番号でfeatureブランチを切る
- PRを
- Pull Requestに作業内容と証跡を残す
個人開発でも運用はしっかりするべきと考え、インターン先の運用を真似しました。
後からどんな作業をしたかなどを可視化できるためら今後も続けていこうと思います。
反省点としては、最後のテストが甘くデプロイしてから直したい点が見つかってしまったことです。
個人開発で責任が発生しないため適当になってしまいました。かなり反省しています。
また、今回webHookを使用してmicroCMSの最新の制作物データを含んだサイトをデプロイするために初めてGitHub ActionsでCI/CDを構築しました。インフラのところで詳しく説明します。
インフラストラクチャー
AWSについて
今回、Next.jsのアプリケーションをデプロイするにあたってAWSを使用することにしました。理由は、
- AWSの学習をしていたから。
- 自作サイトのインフラを組むことでインプットした知識を工夫を凝らしてアウトプットすることができるから。
- インフラも組める強いエンジニアになりたいから。
と言った感じです。
インフラを組むにあたって、当初は初心者はec2を通るべきだという固定概念に囚われていたため、コストや労力的にもすごくキツい方へ向かいそうでした。
しかし、所属しているプログラミングコミュニティの先輩からs3とCloudFrontを利用するモダンな構成を教えてもらいました。
技術の移り変わりが早いからこそ固定概念に囚われるのは危ないですね。コミュニティの良さを改めて実感した瞬間でもありました。
さっそく調べつつ構築を進めました。CIDRなどの基礎的な知識はある程度必要ではありつつも、一つひとつ理解しつつ進めていけばそんなに難しいものではないと感じました。
ただ1つ問題が発生しました。s3とCloudFrontはあくまで静的コンテンツを配信するためのサービスであるため、CMSからコンテンツを動的に取得できません。
そこでまた先輩に助けてもらいました🙏webHookの存在を教えてもらいました。コンテンツを作成、更新する度にgithubのworkflowsでwebHookを呼び出し、buildコマンドを走らせる仕組みを構築しました。
初めてworkflowsを書きましたが、インターン先のデプロイの処理を見ながらそこまで苦戦せずに書くことが出来ました。
今回のポートフォリオサイトでは動的コンテンツは制作物のみで、そこまで頻繁に更新するものではないため結果的には効率的な構成となった気がします。
ただ、ブログなどの頻繁にコンテンツ更新を行うような場合はVercelを使うのが1番楽で良さそうですね😂
今後はそういった最適なインフラ構築を検討できるよう運用面やコスト面を比較できるような知識を身につけていこうと思いました。
成長点
- Next.jsでの開発の流れを掴めた
- 新たなCSSフレームワークを習得できた
- 実際に実装してみると違和感のあるデザインがあったため、今後のデザインで意識するべきところを増やせた
Moreな点
- TypeScriptの理解が浅すぎる
- Next.jsのほんの一部しか機能が使えていないため、もっと別の機能に触れていくべき
- 個人開発とはいえテストをしっかり実施するべき
今後の開発について
今後はサイトに載せられるような制作物を増やしていきつつ、このサイトを進化させていこうと考えています。
今のところ考えているのは
- ページネーション機能などの拡張
- ローディングやアニメーションを実装する
- 持っているスキルを提示できていないため、スキルをプロフィールに載せる
の3つと諸々の修正です。
最後に
まだまだ未熟な大学2年生ですが興味を持っていただけたら幸いです。
今後も制作物について記事をあげていきたいと思いますのでフォローしていただけるとありがたいです！
最後まで読んでいただきありがとうございました！