ポートフォリオサイトを公開
2026/4/14
React（Vite）でポートフォリオサイトを立ち上げて学んだこと
はじめに
今回、React（Vite）を用いて自分のポートフォリオサイトを立ち上げました。
これまでアプリケーションを作る経験はありましたが、「実際に公開するサイト」として開発したことで、実装以外の多くの学びがありました。
この記事では、サイト立ち上げの流れと、その中で得た学びについてまとめます。
なぜポートフォリオサイトを作ったのか
これまで作成したアプリや学習内容は点で存在しており、「自分が何をできるのか」が伝わりにくい状態でした。
そこで、
- 制作物をまとめる
- 技術スタックを整理する
- 自分の思考を発信する
といった目的で、ポートフォリオサイトを作ることにしました。
また、関連する理由として、自身で基本をキャッチアップしながらアウトプットをしてみたかったのが大きな要因です。
技術選定
今回のサイトは以下の技術で構成しています。
- React（Vite）
- TypeScript
- TailwindCSS
- Vercel（デプロイ）
Viteを選んだ理由は、開発環境の立ち上がりが速く、シンプルな構成でフロントエンドに集中できるためです。
実装の流れ
開発は以下の順番で進めました。
① UIを先に作る
最初にデータは持たず、ページの見た目だけを作成しました。
- Home
- About
- Works
- Contact
といった基本構成を用意し、全体のイメージを固めました。
② ルーティングの実装
React Routerを使い、各ページの遷移を実装しました。
このとき、「URLと画面の対応」を意識することで、全体の構造を理解しやすくなりました。
③ データを後から紐付ける
UIが完成した後に、作品情報などのデータを追加しました。
この順番で進めたことで、「UIとデータの責務」を分離して考えることができ、コードの整理もしやすくなりました。
公開して気づいたこと
サイトを公開して初めて気づいたのは、「ローカルで動く」と「本番で動く」は別物ということです。
特に印象的だったのは、リロード時のエラーです。
React Routerを使用したSPA構成では、直接URLにアクセスすると404になる問題があり、Vercel側での設定（rewrites）によって解決する必要がありました。
学んだこと
今回の開発で特に学んだのは以下の3点です。
① 設計の重要性
実装前にページ構成を考えることで、迷いなく開発を進めることができました。
② UIとデータの分離
先にUIを作ることで、役割ごとに考える癖がつきました。
③ 本番環境の理解
デプロイして初めて見える問題が多く、環境ごとの違いを意識することの重要性を学びました。
今後やりたいこと
今後は、以下の機能を追加していきたいと考えています。
- ブログ機能（Next.js + CMSで別途構築）
- アクセス解析の導入
- UI/UXの改善
ポートフォリオサイトを単なる作品ではなく、「継続的に改善するプロダクト」として育てていきたいです。
おわりに
今回のポートフォリオサイト開発を通して、「公開すること」の重要性を強く実感しました。
これからも開発とアウトプットを繰り返しながら、スキルを高めていきたいと思います。
また、今回は、自身のブログにも内容を掲載しましたが、zennでは同じような内容をサラッとまとめてます。