🚀

PPL法に特化した筋トレ記録アプリを作ってみた

に公開
JavaScript
TypeScript
個人開発
web開発
Supabase
idea

💡 PPL-tracker を作ったきっかけ

筋トレの記録、紙やメモアプリじゃ物足りない…。
そんな悩みを解決すべく、PPL法に特化したトレーニング記録アプリを開発しました！

この記事ではアプリの特徴や、開発で意識したポイントを紹介します。

URL
https://ppl-tracker3-fszn.vercel.app/
GitHub
https://github.com/yoscodes/ppl-tracker3

🏋️‍♂️ PPL-tracker とは？


PPL-trackerはPush（胸・肩・三頭）／Pull（背中・二頭）／Leg（脚）**という3つのカテゴリに分けて記録を残せるトレーニング管理アプリです。

「何を・どれだけ・いつやったか」を視覚的・定量的に振り返れるWebアプリ。

🔑 主な機能

📅 カレンダー管理

  • トレーニング日を月別カレンダーで可視化
  • 直感的なUIで、過去の記録を振り返りやすい

🏋️‍♀️ 記録機能

  • PPL法に対応したカテゴリ別記録（Push／Pull／Leg）
  • 1種目最大6セットまで重量・回数を記録可能

📊 統計表示

  • 部位ごとのトレーニング頻度を円グラフで集計
  • 自分の偏り・得意不得意がひと目でわかる

📱 UI・レスポンシブ対応

  • モバイルファースト設計でスマホでも快適
  • Tailwind × MUIで洗練されたインターフェース
  • 記録の追加・削除はリアルタイム反映

🔒 認証とセキュリティ

  • SupabaseのGoogle認証対応
  • RLSでユーザーごとの記録を分離管理
  • セッションによる自動ログイン

🔧 技術スタック

フロントエンド

  • Next.js 15.3.1
  • React 19
  • TypeScript
  • Material-UI
  • Tailwind CSS

バックエンド / インフラ

  • Supabase（PostgreSQL, Auth）
    　- 認証（Email／Google）
    　- PostgreSQLデータベース
    　- RLS（Row Level Security）でユーザーごとのデータ分離

その他ライブラリ

  • React Hook Form + Zod → 入力バリデーション
  • Recharts → 統計グラフ
  • React Calendar → カレンダー表示

📷 実際の画面

📱 記録の流れ（UX）

アプリの使い方はとてもシンプルで、以下の流れで記録できます。

  1. 種目を選ぶ
    　ベンチプレス・スクワット・ラットプルダウンなど、自分のトレーニングに合わせて自由に選べます。カテゴリの追加も可能です。
  2. セットごとに重量・回数を入力（最大6セット）
    　例えばこんな感じで入力できます：
    • 1セット目：60kg × 10回
    • 2セット目：60kg × 8回
    • 3セット目：55kg × 8回
      　必要なセット数だけ記録すればOKです。
  3. 記録を保存（Supabaseに登録）
    　入力した内容はSupabaseに保存され、クラウドで管理されます。
  4. 記録一覧で確認・振り返り
    　記録は一覧表示されるので、どの種目をいつ・どれだけやったかがひと目でわかります。

✨ 実装のこだわりポイント

RLSでユーザー分離を徹底

SupabaseのRLS機能を活用して、ログインユーザーごとの記録が完全に分離されるようにしています。SQLレベルでのセキュリティ確保は安心感があります。

UI・UXは筋トレ中でも直感的に操作できるよう設計

  • モバイルファースト設計
  • 画面遷移を極力減らし、1〜2タップで記録追加できる
  • 色やデザインは集中の妨げにならないようにミニマル志向

🛠️ Supabaseとの連携で苦労したところ

  • RLSポリシー設定（auth.uid() の理解）
  • 認証情報の永続化（セッション再接続）
  • PostgreSQLの型エラーと地味なバグ…

実際に設定したSQLは以下のような感じ：

ALTER TABLE records ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Users can view own records" ON records
  FOR SELECT USING (auth.uid() = user_id);

🗂️ ディレクトリ構成（一部）

src/
├── app/
│   ├── components/
│   │   ├── RecordFormModal.tsx
│   │   ├── CalendarView.tsx
│   │   ├── BodyPartStats.tsx
│   │   └── ...                 // Atomic Design を意識して分離
│   ├── push/ pull/ leg         // 種目カテゴリごとのルーティング（App Router構成）
│   ├── auth/                   //　認証周りのページ
│   ├── utils/                  // Supabase クライアントや型定義など

app/ 配下でページ単位のルーティングを構成し、components/ は再利用しやすいよう Atomic Design に基づいて分離しています。

🚀 デプロイは Vercel × Supabase

GitHub 連携で Vercel にデプロイ

Supabase の URL と Anon Key を .env.local に設定

本番環境でも RLS が効いてるか確認してリリース

💭 今後やりたいこと

現在はシンプルな記録機能のみですが、以下のような拡張を検討しています。

  • 📊 記録のグラフ化
    　最大重量やトレーニングボリューム（重量×回数）の推移をグラフで見えるようにしたい。

  • 📆 カレンダー表示
    　「何を・いつやったか」がパッと把握できるようなカレンダーUIを導入したい。

  • 📝 メモ・タグ機能
    　「今日は軽め」「調子良かった」など、簡単なメモやタグを記録に添えられるようにしたい。

  • 🔔 習慣化サポート（通知・PWA対応）
    　継続をサポートするために、目標に基づいた通知やプッシュ機能も検討中です。

  • 👥 記録の共有（SNS的な機能）
    　記録を他のユーザーとシェアして、お互いのモチベーションにつなげられる仕組みを作りたい。公開範囲も選べるようにしたいです。

  • 📱 モバイルUIの改善
    　スマホからでも片手で直感的に操作できるUIにブラッシュアップしたい。

  • 🔐 ログインやセキュリティ対応
    　今は誰でも使える状態ですが、将来的にはユーザーごとのデータ管理を安全に行えるよう、認証機能も導入予定です。

🏁 おわりに

筋トレも、開発も、継続がすべて。
「毎日ちょっとだけ頑張った」を記録していけるこのアプリが、
自分の成長を可視化してくれる存在になれば嬉しいです！

#個人開発 #frontend #学習記録 #web開発 #JavaScript #TypeScript #Next.js #Supabase 筋トレ

Discussion