Zenn
👓

長期インターンシップでポートフォリオを作成した！！！

2024/02/25に公開
Next.js
Three.js
#
ポートフォリオ
#
フロントエンドエンジニア
GSAP
tech

自己紹介

情報系の学部の大学3年生のtakumi0616と申します！
フロントエンド、機械学習、生成AIに興味があり、大学で絶賛勉強中です！

はじめに

普段は大学の学生団体である「NUTMEG」という、大学祭をDXしている団体でフロントエンド開発をしており、先輩の勧めを受け、CA Tech Accelという3ヶ月間のインターンシップに参加しました。
そこで以下の目標をもってポートフォリオを作成したい！と話したところ、一緒に作成していただけることになり完成させました。

  • 複雑な動作をするWebページを、デザインからFigmaで作成し実装できるフロントエンジニアになりたい！
  • Figmaの使い方を学び、自分が作りたいWebページのデザインを行う！
  • JavaScriptとCSSを用いたアニメーション技術を習得し、作成するWebページに反映させる！
  • メンターと決めたスケジュールに従い進捗を報告し、PullRequestもわかりやすく行います！

作成したポートフォリオ↓
https://takumi-portfolio.vercel.app/

ぜひ訪れてみてください！
感想など頂けると嬉しいです！

概要

本記事は、自分が各開発手順で、CAのメンターからのアドバイスや自分が調べたもの、気づいたことをまとめる記事になります。
自分が学んだことは現在、メンターの方と共同で入っているnotionに簡単にまとめられているだけなので、本記事にまとめて、記録を残すことが目的です。
ポートフォリオを作成する手順がまとめられていると考えることもできるので、ぜひ皆さん参考にしてみてください！

使用技術

まず使用技術です。
レスポンシブやアニメーションの仕様を意識して技術選定しています。

  • Next.js(App Router)
  • React
  • TypeScript

以下初めて使用

  • Tailwind CSS
  • Three.js
  • GSAP
  • react-icons

開発手順

以下のように開発を進めました。

  1. 参考サイトを漁り、イメージを作る
  2. Figmaを用いてメンターと一緒にデザインを作成
  3. Dockerを用いて環境構築をして作成
  4. Gitで管理し、複数のメンターにレビューしてもらうためにNetlifyを使用
  5. PageSpeed Insights、メンターからのレビューを用いてパフォーマンスの改善
  6. Vercelを用いてデプロイ

上記の手順で開発を行いました。

各開発手順のまとめ

1. 参考サイトを漁り、イメージを作る

自分の作りたいポートフォリオを詳しく、具体的にイメージするために、既存のポートフォリオを漁りまくって以下を決めます。

2. Figmaを用いてメンターと一緒にデザインを作成

最初からFigmaをフル活用してデザインができる人などいません。
デザインはからっきし無理な人は以下の自分のやり方がおすすめできるかもしれません。

  1. カラーパレットで好きな色のセットを決める。（背景が白、もしくは黒にしたいのでそれが入っているもの）
  2. アニメーションオブジェクトを、Three.jsなどのテンプレートを1つ選んで決める。
    https://threejs.org/examples/
  3. 背景を黒か白に統一して、アニメーションオブジェクトの配置や使い方を自分なりに工夫する（難しい）
  4. 文字のフォントを気に入ったものに変えてみるなど、オリジナル性を追求する
    https://fonts.google.com/
  5. Figmaで頑張ってデザインしてみる

上記の流れがデザインできないけどフロント頑張りたい人におすすめです！
やはり絵を描くなどのデザイン技術はありませんので、アニメーションオブジェクトを1つ配置してみるなどの工夫をしてみると、高級感のあるポートフォリオになると思います。

3. Dockerを用いて環境構築をして作成

自分は普段Dockerを用いて開発しているため、今回も何も考えずにDockerを使用して作りました。
フロント1つなのでまったく使う必要はないです。

4. Gitで管理し、複数のメンターにレビューしてもらうためにNetlifyを使用

今回、最初にVercelにデプロイしていましたが、プレビューを複数人見ることができないという欠点から、Netlifyも一時的に使用しました。個人開発ですと、Vercelでプレビューを自分で見ることができるので、Vercelのみにデプロイするので十分です。
どちらも素晴らしいデプロイ先です！

https://www.netlify.com/
https://vercel.com/

5. PageSpeed Insights、メンターからのレビューを用いてパフォーマンスの改善

今回のインターンで最も大きな気づきは、パフォーマンス改善とユーザビリティ、アクセシビリティの概念です！

  • パフォーマンス改善とは、その名の通り、Webサイトが表示されるまでの時間を短縮するための技術や、処理を軽くするためのプログラムの改善を行うことです。
    以下のPageSpeed Insightsを使用すると、ダメなところを教えてくれます！（めっちゃ便利！！！！）
    https://pagespeed.web.dev/

  • 次に、ユーザビリティです。多様なユーザーのWebサイトの操作などに配慮するための技術です。
    今回意識したのはSEO対策です。レスポンシブ対応はもちろんのこと、タグの階層構造を意識したり、descriptionの文言を意識しました。
    https://mieru-ca.com/blog/seo-measures/

  • 最後にアクセシビリティです。多様なユーザーがどのような環境でもWebサイトを利用できるようにするための技術です。非テキストコンテンツやリンクの目的の記入、Webページを軽く、素早くするための最適化を行いました。他にも挑戦できていなものがあるので後々実装したいです。

6. Vercelを用いてデプロイ

デプロイする前にgoogle Analyticsの設定を行いました。
ポートフォリオはエンジニアの名刺みたいなものですから、どのくらい見られているのか気になりますよね！
本当はgoogle Analyticsだけを使用するつもりでしたが、興味本位でvercelのサービスである「Web Analytics」や「Speed Insights」もついでに導入しました！
以下に導入時の参考サイトを記載します。

最後に

3ヶ月かけてスケジュール通りの開発を進めることができ、完成させることができました！
しかし、時間の都合で挑戦していないことがあり、これからは下記に挑戦していきます。

  • Figmaによるデザインを1人で仕上げる
  • Github ActionsによるCIの設定
  • コンテンツの追加を簡略化するための機能（microCMSなど）実装
  • アニメーションオブジェクトのパフォーマンス改善
    随時更新していきますので、たまに見ていただけると嬉しいです！

本記事はプログラムの解説ではなく、ポートフォリオ作成の手順まとめ書みたいな気持ちで書いています。
気になるプログラムなどあれば解説しますのでコメントよろしくお願いします！

追記

次回は本記事で作成したポートフォリオにmicroCMSの導入の記事を書くつもりです。
ぜひ見てみてください！

Discussion