#003Ari's Portfolio

Ari's Portfolio

自身のポートフォリオサイトです。

Next.jsとMicroCMSを導入し、学習ブログとしても運用しています。

また、今後コンテンツが増えることを見越して、拡張性を意識したコーディングを心がけました。

制作期間：31日間

これまでの制作物とその詳細を記録することを目的に、このWebサイトをポートフォリオサイトとして制作しました。

また、これまでの学習記録を自分にとって読みやすい形で整理したいと考え、MicroCMSを導入しました。

このサイトは、インプットした内容をアウトプットする場所として活用しています。

今後も運用を続けながら、より自分が使いやすいサイトへとカスタマイズしていく予定です。

楽しんで制作している雰囲気を伝えたくて、ポップで親しみやすい印象のポートフォリオに仕上げました。サイト内のさまざまな箇所にアニメーションを取り入れています。

TOPページでは、ランダムな位置にクラッカーが飛び出す演出や、Aboutページにはタイミングを調整して動くSVGアニメーションを設置しています。

これまで学習記録はPagesアプリで管理していましたが、同じようにスクロールしながら目的の項目にスムーズに辿り着けるUIにしたいと考え、「無限スクロール」を導入しました。

SSG + ISRによって初回表示は静的ページを返しつつ、CSRで次の記事を動的に読み込む構成とし、表示速度と使いやすさのバランスにこだわって制作しました。

課題

Aboutページの「Work Experience」セクションで、スクロールに合わせてSVGのラインを引くアニメーションを実装する際、動的な対応が課題となりました。

今後コンテンツ（職務経歴カード）が増えた場合でも、SVGのストローク範囲を自動で調整できる仕組みが必要だと考えました。

解決

ラインを描画するSVGは、ストローク範囲を合わせたい要素（職務経歴カード）とGridレイアウトで横並びに配置していました。

そこで、親コンテナの高さを取得し、その高さに応じてSVGの描画範囲（ストローク範囲）を動的に調整する仕組みを実装しました。これにより、職務経歴カードが増減しても、それに合わせてSVGのラインも正しく伸びるようになりました。

課題

Blogの一覧ページから記事詳細ページへ遷移し、再び一覧ページに戻った際に、スクロール位置がトップに戻ってしまうという不便さがありました。

また、無限スクロール機能において、すでに取得済みのデータを再度APIで取得してしまうという、無駄な通信が発生する課題もありました。

解決

スクロール位置の保持にはNext.jsのルーターイベントを活用し、ページ遷移前にsessionStorageへscrollYを保存、一覧ページ復帰時に元の位置までスクロールを復元できるようにしました。

また、無限スクロールで取得した記事データは、レンダリングに依存しないZustandで管理し、一度取得したデータの再取得を防ぐことで無駄なAPI通信を回避しています。