01
アプリケーションの概要
「マソ君の日常」は、筋トレ記録と2Dキャラクター育成を組み合わせたWebアプリです。重量・回数・セット数からトータルボリュームを自動計算し、成果を育成ポイントやアイテムを通じて「マソ君」の成長へ反映します。
ホーム、記録カレンダー、トレーニング入力、履歴分析の画面を用意しています。現在の記録データはブラウザ内に保存しており、Supabaseによる認証とデータベースの下地まで作成済みです。
主要機能はローカル環境で動作。クラウド保存とWeb公開を次の段階として進めています。
02
創った背景
一般的な筋トレ記録アプリは数値管理が中心で、入力そのものが作業になりがちです。特に記録習慣のない人は、重量や回数だけでは成果を実感しにくく、継続する理由を見失いやすいと考えました。
そこで、育成ゲームが持つ成長と報酬の楽しさを筋トレ記録へ取り入れました。自分がトレーニングを続けるほどマソ君も成長する仕組みにし、記録を義務ではなく、次の変化が楽しみになる体験へ変えることを目指しています。
日々のトレーニングを記録
努力が目に見える変化になる
03
技術スタック
Next.js 16 / React 19
画面表示、ルーティング、アプリ全体の構成
TypeScript
記録や育成状態を型付きで安全に管理
Tailwind CSS 4
スマートフォン中心の画面と操作部品
Supabase
Auth、PostgreSQL、RLSによるユーザーデータ分離
Zod
重量・回数・セット数などの入力検証
Vitest
計算、換算、育成、日付処理の単体テスト
04
技術選定の理由
複数画面と状態を型付きで扱う
ホーム、カレンダー、入力、分析を1つのWebアプリとして構築し、記録と育成状態の食い違いを減らすためにNext.js、React、TypeScriptを選びました。
認証とデータ分離を一体で設計する
Supabaseは認証とPostgreSQLをまとめて扱えます。RLSを使い、利用者が自分の記録だけを扱える構成を目指しています。
バックエンド未接続でも操作を検証する
開発中はブラウザ内へ保存し、Supabaseの接続情報がなくても主要な操作を試せるようにしました。
計算の正しさを画面と切り離して確かめる
Zodで入力値を検証し、Vitestでボリューム計算や単位換算、育成処理を確認しています。
05
工夫した点
筋トレの成果を育成体験へ変換
トータルボリュームを表示するだけでなく、育成ポイントやアイテムを介してマソ君の成長につなげました。
スマートフォンで記録しやすい導線
画面下部からホーム、記録、分析へ移動できます。入力中はトータルボリュームをその場で確認できます。
入力ミスと二重保存への対策
未来日の記録、入力値の上限、メモの文字数を検証。リクエストIDを使い、同じ記録の二重保存も防ぎます。
計算処理を画面から分離
ボリューム、kg・lb換算、育成ポイント、経験値、日付処理を分け、単体で検証できる構成にしました。
50段階の変化を視覚化
レベルに応じてキャラクター画像を切り替え、呼吸、まばたき、レベルアップ時の動きをCSSで加えています。
06
現時点の改善点
- 01
トレーニング記録、設定、育成状態をSupabaseへ保存する処理を接続する。
- 02
ブラウザ内の既存データを、ログイン後にクラウドへ移行できるようにする。
- 03
複数ユーザーを使い、RLSによるデータ分離を結合テストで確認する。
- 04
記録の編集・削除と、それに伴う育成ポイントの差分調整を実装する。
- 05
自重種目と有酸素運動の計算、週別・月別の分析を追加する。
- 06
E2Eテストと性能計測を行い、Vercelで公開する。
07
公開画像・URL
現在はローカル環境で開発・検証中です。Web公開後、実際の操作画面とURLを掲載します。