Yu’s portfolioを支える技術

はじめに

この記事では、このポートフォリオサイトを作るにあたって使用した技術と機能（できること）、工夫したことについて書きます。

URL

目次

• 使用した技術
• 機能（できること）
• 工夫したこと
• 終わりに
• 課題

使用した技術

このポートフォリオを作るにあたって以下の技術を使用しています。

• Next.js(App Router)
• TypeScript
• Tailwind CSS
• Docker
• Node.js

Next.js App Router 苦悩

このポートフォリオサイトを作る前に、Random Name App というアプリを作成しました。

Random Name App を作成し始めた当時、最新の Next.js は 13.3.0 で、App Router が Stable になる前の世界でした。

初めての Web アプリをなんとか作り上げて、完成の喜びに浸たり、さて同じ要領でポートフォリオサイトも作ろう！と意気込んでいたところでした。

Next.js が、バージョンアップし、13.4 で App Router が stable になり前回作ったアプリの知識だけでは通用しなくなってしましました。（技術の進化の早さにびっくりしました。）

バージョンを下げて 13.3.0 を使用する考えもあったのですが、『エンジニアたるものキャッチアップをするべき』という考えに至り、自分の成長の為と最新の 13.4.3 の App Router を使用することを決意しました。

当時は、App Router が出てきたばかりで解説記事が大変少なく苦労したのを覚えています。そんな時に公式のドキュメントを何度も読み込み、自身のアプリに適用させていきました。（以前なら日本語化されたドキュメントや解説ブログを読んでいたのですが）公式のドキュメントを読みながらキャッチアップしていく習慣を身につけることができました。

機能（できること）

• 記事を Markdown で書ける。
• レスポンシブ対応
• ダークモード切り替え
• コンタクトフォーム・メールの送信

記事を Markdown で書ける

Markdown を HTML に変換するライブラリ react-markdown を使用しています。

レンダリング時にどのような表示にするか CSS で指定できるので、書式を揃えて表示したい時に非常に便利です。

また、Next.js の Dynamic Routes を利用することで、Markdown 形式のファイルを追加するとファイル名からルートが作成されます。

Markdown を HTML に変換する際にかなりこだわったのが、リンクカードです。

↓ これがリンクカードです。URL を貼るとこのように表示されます。

Server Components を使うことで、API をサーバーで事前に叩けます。ポートフォリオサイトにアクセスした時点で、リンク先の title や image,description などの OGP が pre-fetch され、ページの表示速度の貢献につながります。

レスポンシブ対応

スマホが普及している現在、レスポンシブ対応は必須だと思います。 レスポンシブ対応を考えるのは前作アプリを含め、2 回目なのでかなり慣れてきたように感じます。

今回、苦戦したことがあります。 他のサイトを閲覧していると iPhone の表示領域が画面いっぱいに広がるのに、自分のポートフォリオサイトは、ノッチの部分を避けて小さく表示されているのが大変気になりました。

viewport-fit=coverを追加することで解決できたかのように思ったのですが、今度は『UI がノッチやアクションバーと被ってしまう』問題に直面しました。ただ単にマージンを変えるだけだと、ノッチの有無に関わらずマージンが適用されてしまい思い通りの UI にできませんでした。

調べてみると、 セーフエリアを考慮に入れることで、解決できそうだと分かりました。

ちなみに Tailwind CSS でセーフエリアを設定するためには tailwindcss-safe-areaというプラグインを導入する必要があります。

無事にノッチの有無で UI を変更することができました。

振り返りながらこの記事を書いていると偶然以下のサイトを見つけました。

今回悩んだこともまとめられており、いい復習になりました。

ダークモード切り替え

ユーザーによって手動でダークモードに切り替えられるようにしています。 tailwind.config.js の設定の変更すれば使えるようになります。

tailwind.config.js
module.exports = {
  darkMode: "class",
  // ...
}

コンタクトフォーム・メールの送信

react-hook-form と sendgrid/mail を使用しました。

react-hook-form でバリデーションチェックをして、sendgrid/mail で、API を通してお問い合わせ内容が私自身と、お問い合わせした方にメールで届くようになっています。

sendgrid/mail は、メルカリや Note といった名だたるサービスも使用しています。 さらに月 12000 通まで無料で使用することができます。

工夫したこと

• 第一印象
• 配色

第一印象

このポートフォリオサイトを開いて一番初めに表示されるものをインパクトのあるものにしようと考えました。 心理学では初頭効果と言い、最初に示された特性が印象に残りやすく、後の評価に大きな影響を与えるものなのです。

それほど重要と認識していたので、このサイトを作成するときに最優先で考えました。 Github でさまざまなポートフォリオサイトを閲覧していた時、ついに見つけたのです。

このページを開いたときのインパクト、すごくないですか？ 子どもの頃に見ていた『脳内エステ IQ サプリ』のモヤッとボールようなもこもこした形。 私はなつかしさも相まって感動しました。

幸いにも、製作者の Hamish Williams さんは、サイトのコードを他の人が使うことに好意的でオープンソースだったので、自分のポートフォリオサイトにもぜひ組み込みたいと思いました。

取り込む作業がなかなか大変でした。サイトの構成を解析したり、もこもこの依存関係を洗い出したりと、かなりの時間を費やし、取り込むことに成功しました。

最初からサイトをそのままコピーして、それをベースにオリジナリティを加えていくやり方もありましたが、それはしませんでした。 ただコピーするだけだと自分の力にならないからです。 プロの作品を解析することでかなり勉強になりました。

もこもこを導入したことで、ページの読み込み速度に影響が出てしまったものの、大変満足できるサイトに仕上がりました。

配色

このサイトを構想を考え始めた時に、影響を与えられた記事があります。

この記事のおかげで、ウェブアクセシビリティについて認識することができました。

デジタル庁では、「誰一人取り残されない、人にやさしいデジタル社会の実現」を目指しています。

この理念を体現しているデジタル庁のサイトでは、ウェブアクセシビリティ導入ガイドブックが公開されています。 https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook/

すべてを意識することは難しいので、今回のポートフォリオサイト作成にあたり、配色にフォーカスを当てて取り入れました。

背景色を ライトモード時に

#FFFFFF 　から　#F2F2F2 に

ダークモード時に

#000000 　から　#111111 に 変更しました。

コントラストが高いと目が疲れてしまうそうです。 コントラストを少し下げることで、目に優しいサイトに一歩近づきました。

有名なサイトの黒色についての扱いが検証＆まとめられています。

サイトの見やすさを意識するいい機会でした。

終わりに

無事完成までなんとか漕ぎ着けたわけですが、学べば学ぶほど自分の実力不足を実感します。 このサイトも改善点がたくさんあります。

ですが、初めてプログラミングを始めた頃と比べると、できることが増え少しうれしい気分になります。

この調子で実力をつけ、転職に成功し、この世界にどっぷり浸れるようになりたいです。

課題

• ページの表示速度にこだわりたい。
• 動的に OG 画像を生成したい。
• App Router の踏み込んだ理解。