見出し画像

転職に向けて作成したポートフォリオサイトを公開しました

とうふ

自身のポートフォリオサイトを作成して公開しました。
今回は、開発に使用した技術やポイントをまとめてます。

サイトの内容に関しては、実際にご覧になっていただけたらと思います。
なので詳細は特にここには記載せず、開発に焦点を当てた記事にしたいと思います。


開発に用いた技術

React

LPなのでルーティング機能はつけていません。各セクションをコンポーネントとして構成しました。また、制作物紹介画面では、今後も追加していくことを見越してコンポーネント化してあります。

TypeScript

TypeScriptは前回記事にした通り、よりストレスのない、そして堅牢な開発にするために必須な言語です。個人的には、今後JavaScriptでの開発はほとんどないかと思っています。

Intersection Observer, Framer Motion

Intersection Observerは要素がビューポート内に表示されているかを感知するAPIです。Framer Motionはアニメーションを簡単に実装できるライブラリです。
今回の開発はこれらを用いてアニメーションを実装し、UIを意識して行いました。

react-vertical-timeline-component

縦スクロールのタイムラインを実装できるライブラリです。自分の簡単な経歴を紹介するのに用いました。コンポーネントで簡単に作成できました。

Chart.js

JavaScriptでチャートを作成できるライブラリです。データを簡単に図にまとめることができるのでとても実用的と感じました。
今回の開発では自分のスキルをレーダーチャートにまとめました。

力を入れたところ

アニメーション

Intersection Observerを用いて、スクロールに沿って動作するアニメーションを実装しました。記述も簡単で、

import { useInView } from 'react-intersection-observer'

const { ref, inView } = useInView()

useInViewで ' ref ' と ' InView ' を用意します。
' ref ' は監視したいタグにref属性として配置します。これによってrefが付与されたタグが監視され、要素がビューポート内に表示されたらinViewがtrueになります。このinViewのboolean値によってアニメーションを追加することで、スクロールでのアニメーションを実装しました。

また、アニメーションを実装するライブラリとして用いたFramer Motionも簡単に記述することができます。

import { motion } from 'framer-motion'

<motion.h2
   initial={{opacity: 0, x: 50 }}
   animate={{opacity: 1, x: 0 }}
   transition={{ duration: 1, delay: 0.5 }}
>アニメーション</motion.h2>

まず、アニメーションを追加したいタグの頭に' motion 'をつけます。
これによりアニメーションが追加され、あとは、アニメーションの動作を指定するだけです。

  • initial属性：　要素の初期値を設定します。

  • animate属性：　アニメーション状態を設定します。初期値からこの規定値に向かってアニメーションします。

  • transition属性：　アニメーションが遷移する際の設定をします。              ' duration ' はアニメーションにかかる時間、' delay 'はアニメーションするまでにかかる時間（遅延）を設定します。

レスポンシブデザイン

デスクトップ版とモバイル版で一部レイアウトを変更し、それぞれのデバイスで見やすいように工夫しました。
また、デスクトップ版でのみ現れるヘッダーや、モバイル版でのみ現れるハンバーガーメニューも実装しました。

レスポンシブデザインということで、メディアクエリを用いました。メディアクエリは初めて使いましたが、技術も難しくなく変更したい部分だけ書き換えればよいのでとても便利だと感じました。
また、デバイスによって出現の有無を要する要素に関してはメディアクエリとdisplayのnoneを用いたて実装しました。

// モバイル版では非表示
.desktop {
   display: none;
}


// デスクトップ版では非表示
@media (min-width: 700px) {
   .desktop {
      display: block;
   }
}

display: noneで非表示にしておき、表示したい側ではdisplay: blockで上書きすることで表示させました。

もう一つレスポンシブデザインで気をつけたことは、要素の幅指定です。
pxでの幅指定をすると画面に対して絶対参照になるので、画面サイズによって大きく感じたり、小さく感じてしまいます。
なので、画面にたいして相対的に表示サイズをへんこうできるように、%やvw、vhで幅指定して、どの画面でもみやすいサイズを意識しました。

新たに学びたいこと

CSSフレームワーク

これまでの開発を通して、CSSは基礎から軽い応用までかけるようになってきました。なので、これからはより実践的なフレームワークを扱えるようになりたいとおもいました。
Tailwind を少し触ったことがあるので、しっかり学んでみようと思います。

SEO

今回のものに限らず、webサイトを公開したはいいものの、ユーザーの目に触れられなければ意味がありません。デプロイした後に、かるく検索をかけてみましたが、全く引っかかりませんでした。
実務にかかってくる内容ですが、フロントエンドエンジニアを目指しているからには、多くのユーザーの目にとまるようなものを開発したいので、SEOもしっかり学ばないとと思いました。

まとめ

転職に向けて作成したポサイトですがサイトですが、今後も随時更新しながら活用していきます。新しい技術や、追加機能なども取り入れていきながらアップデートしていけたらと思います。

最後までご愛読ありがとうございました。

いいなと思ったら応援しよう！