Miyazaki's portfolio

エンジニアとしての取り組みや学びをまとめたポートフォリオ兼ブログサイトです。スキルやこれまでの経歴、取り組んできた制作物を掲載しつつ、技術的なアウトプットや趣味についても発信しています。

Launch Website

https://my-profile-mu-gold.vercel.app/

はじめに

このサイトは、日々学んだ技術や知識をアウトプットするために作成しました。ブログとして学びの記録を残しながら、ポートフォリオとしてこれまで取り組んできた制作物もまとめています。こうしてひとつの場所に整理することで、自分自身の理解を深めるだけでなく、誰かの参考になる情報を届けられればと思っています。
また、更新を続けることで「もっと学びたい」「発信したい」という意欲にもつながり、日々のモチベーションにもなることを期待しています。今後も新しい知識や挑戦をここで発信しながら、自分の成長を積み重ねていきたいと考えています。

また、本サイトを通じて私の人となりやこれまでの経歴・経験、スキルを知って頂きたいという思いも含んでいます。

コンテンツ

サイトは「プロフィール」「ポートフォリオ」「ブログ」の3つを軸に構成しています。

内容	urlパス
プロフィール	/
ポートフォリオ一覧	/portfolio
ポートフォリオ詳細	/portfolio/[slug]
ブログ一覧	/blog
ブログ詳細	/blog/[slug]
お問い合わせ	/contact

技術スタック

フロントエンド

Next.js（React/TypeScript）

CMS

microCMS

デプロイ

Vercel

スタイリング

TailwindCSS
vanilla-extract

その他ライブラリ

swiper（スライダー）
preline（UIライブラリ）
nodemailer (メール送信)
next-mdx-remote-client（md→html変換）
rehype-pretty-code（シンタックスハイライト）
react-share（シェアボタン）

実装のポイント

microCMSを使用してJamstack構成に

本サイトでは、ブログやポートフォリオの情報管理にmicroCMSを採用し、Jamstack構成で実装しました。以下の画像のようにmicroCMSでスキーマを作成し、API経由でNext.jsのビルド時にデータを取得、静的ページとして生成しています。
これにより表示速度が大幅に向上し、管理画面から簡単に記事やコンテンツを更新できるようになりました。さらにTypeScriptでAPIレスポンスの型定義を行い、型安全なデータ取得を実現。Jamstackならではのパフォーマンスと保守性を両立できた点が大きな成果です。

microCMS｜APIベースの日本製ヘッドレスCMS

microCMSはAPIベースの日本製のヘッドレスCMSです。もう社内向け編集/管理画面を自作する必要はありません。開発・運用コストを大きく下げることでビジネスを加速させます。

microcms.io

MDX ＆ next-mdx-remote-client で記事管理

ブログ記事や制作物の詳細を、より柔軟に表現できる形で管理するためにnext-mdx-remote-clientを導入しました。Markdownの書きやすさと、Reactコンポーネントを組み込めるMDXの拡張性を両立したいという思いがあったためです。
特に、App Routerとの相性が良く、サーバーコンポーネント内で安全かつ効率的にMarkdownをHTMLに変換できる点が採用の決め手となりました。microCMSで管理した記事をAPI経由で取得し、<MDXRemote />でレンダリング。さらに、remark-gfmやrehype-pretty-codeといったプラグインを組み合わせることで、テーブルやシンタックスハイライトなどの拡張表現も可能にしています。
結果として、記事更新の効率化と、Markdownながらリッチな表現力を持つ記事ページを実現することができました。

GitHub - ipikuka/next-mdx-remote-client: A wrapper of `@mdx-js/mdx` for `Next.js` applications in order to load MDX content. It is a fork of `next-mdx-remote`.

A wrapper of `@mdx-js/mdx` for `Next.js` applications in order to load MDX content. It is a fork of `next-mdx-remote`. - ipikuka/next-mdx-remote-client

github.com

難しかった点

サーバー／クライアントコンポーネントの切り分け

本サイトでは、App Routerのサーバーコンポーネントとクライアントコンポーネントを明確に切り分ける必要がありました。特に、MDX記事内で使用するカスタムコンポーネントはインタラクティブな処理が必要となるため、"use client"ディレクティブを用いてクライアントコンポーネントとして分離しました。
最初はデータの渡し方や責務の整理でつまずきましたが、サーバー側でデータ取得と静的生成を完結させ、props経由でクライアントに渡すという設計に落とし込むことで、ようやくパフォーマンスと表現力のバランスを取ることができました。この切り分けにより、App Routerらしい責務分離を実現できました。

Next.js初学習とAI活用による効率化

また、今回が初めてのNext.js（App Router）での開発であったため、サーバーコンポーネントの概念やデータフローの理解、generateStaticParamsやgenerateMetadataなどApp Router特有の関数の扱いには学習コストがかかりました。
しかし、AIを活用しながら調査や実装を進めたことで、よりスムーズに知識を吸収できました。特に型定義やベストプラクティスの確認、エラー解決などでAIの助けを借りたことが、効率的な開発につながったと感じています。

まとめ

今回の制作を通じて、初めてNext.js（App Router）やJamstack構成を実践し、サーバーコンポーネントとクライアントコンポーネントの切り分けなど、多くの新しい知識を得ることができました。
また、ブログやポートフォリオをまとめる場を持つことで、日々の学びを発信しようというモチベーションが自然と高まりました。
さらに、Vercelを使ってわずかな設定で簡単にデプロイできたことには非常に感動しました。手軽に本番環境へ公開できる体験は、自分のアウトプットのハードルを大きく下げてくれたと感じています。

今後は

展望として、記事のソート順を選択できる機能やカテゴリの追加、記事詳細ページでの目次ハイライトなど、より便利に使える機能を実装していきたいと考えています。
また、AWSを利用したデプロイにも挑戦し、インフラ構築や運用の知識を身につけたいと考えています。サイトの成長とともに自分自身のスキルも広げ、より実践的な開発経験を積んでいきたいです。