#Workout Log — フルスタック開発で学んだ、本番環境までの全プロセス
#プロジェクト背景
Workout Log は、個人の筋トレ記録を管理・追跡するためのダッシュボードアプリケーションです。
このプロジェクトが特別なのは、単なる「記録アプリ」ではなく、Web 開発の全体像を実践的に学ぶための教材 になったことです。
#なぜ作ったのか
- 自分の筋トレを記録したかった
- 毎週 4〜5 回のトレーニングを継続しているので、記録を残す必要があった
- Git、DB、認証、API、デプロイまで一通り経験したかった
- 「本番環境で動く実アプリ」を作りたかった
#使用技術
Next.js 14
アプリ全体のフレームワーク
TypeScript
型安全な開発
Tailwind CSS
UI とスタイリング
Supabase / PostgreSQL
データベース
Prisma
DB スキーマ管理と ORM
NextAuth.js / Google OAuth
認証機能
Vercel
ホスティング
#開発フェーズと学んだこと
#1. Git / GitHub
最初は push や pull などの基本操作もぎこちなかったです。
でも、毎日使ううちにコミット、ブランチ、Pull Request の考え方が少しずつ理解できるようになりました。
commits の履歴には、その成長過程がそのまま残っています。
#2. データベース設計
Supabase と Prisma を使って、初めて本格的なデータベースを作りました。
ユーザーとトレーニング記録をどう関連付けるか、テーブル設計、リレーション、外部キー、スキーマ管理などを実践的に学びました。
#3. API と認証
Next.js の Server Action を使い、トレーニング記録の追加・更新処理を実装しました。
また、NextAuth.js で Google ログインも統合。
API キーの作成、環境変数の管理、セッションの扱いなど、実アプリに必要な認証まわりを経験しました。
#4. デプロイと本番環境
Vercel にデプロイし、GitHub に push するだけで自動デプロイされる環境を作りました。
さらに、Vercel の環境変数設定や独自ドメイン接続も経験。
DNS、CNAME、サブドメインなど、Web インフラの基礎にも触れることができました。
#難しかったこと
環境変数と API キー管理
Supabase、Google OAuth、Vercel それぞれに設定が必要で、最初は「どこに何を入れるのか」が分かりませんでした。
DB テーブル設計
User と Workout の関係をどう設計するかに悩みました。
Prisma の関連付け、外部キー、Cascade Delete などを理解するのに時間がかかりました。
#見た目だけでは足りないと気づいた
ポートフォリオサイトを作った経験があったので、HTML / CSS / React はある程度できました。
でも Workout Log では、それだけでは不十分だと気づきました。
UI 作成
React で画面を作る
DB 設計
データ構造を考える
API 実装
動的データを扱う
認証
ユーザーごとのデータを守る
デプロイ
本番環境で動かす
この経験が、次のプロジェクトにも大きく活きました。
#今できるようになったこと
Git 操作
最初は git push だけでも緊張していたけど、今では毎日自然に使えるようになりました。
環境変数の設定
最初は 1〜2 時間かかっていた設定も、今では短時間でできるようになりました。
DB スキーマ変更
最初は怖かったけど、Prisma Migrate を使って管理できるようになりました。
Vercel デプロイ
以前は謎の操作に見えていたけど、今では GitHub push から自動デプロイまで理解できています。
API キー管理
危険そうで怖かったものから、正しく扱うべきものとして理解できるようになりました。
#筋トレと Web 開発
このプロジェクトは、単なるアプリではなく 自分の習慣を支える道具 になりました。
毎日トレーニングするように、アプリも使い続ける。
記録が増えるたびに、アプリも自分のスキルも少しずつ成長していきました。
#まとめ
Workout Log は「筋トレを記録するアプリ」という説明だけでは、その価値を伝えきれません。
本当の価値は、Git、DB、認証、API、Vercel デプロイまで、Web 開発の全プロセスを実践したこと です。
見た目の制作だけでなく、本番環境で動くアプリを作れたことが、このプロジェクトで一番大きな学びです。
#リンク
Repo
https://github.com/E-Zaya/workout_log
Live App