トレーニング記録アプリ

毎日のトレーニング・体組成・体調を記録し、グラフやカレンダーで振り返る Web アプリ。

• 公開URL：https://training.shu-web.jp
• デモ（ログイン不要・入力も試せます）：https://training.shu-web.jp/demo
• GitHub：https://github.com/shu-web-net/training-log

概要

Claude のアーティファクトで自作していた「トレーニング記録帳」（バニラ JS）を、認証・データベース・API を備えた“誰でも使える Web アプリ”として一から作り直したものです。

Web 制作（HTML / CSS / コーディング）で培った実装力に、Web アプリ開発で必要な 認証・DB・API・デプロイ・運用 を加え、企画から公開・運用まで一人で担当しました。

主な機能

• メール＋パスワードのログイン（パスワード再設定つき）
• 1 画面で完結する日々の記録（トレーニング／ヨガ／体組成／食事／腸の調子／メモ）＋ 自動保存
• 集計タイル・カレンダー・体重の折れ線グラフ（30 / 90 日 / 1 年）・最近の記録
• ログイン不要のデモ（架空データで操作感を試せる）
• ダークモード、スマホ対応
• アカウント削除・プライバシーポリシー

技術構成

設計で工夫した点

• データ保護を「DB の最後の砦」で担保
  行レベルセキュリティ（RLS）により、ログイン本人の記録しか読み書きできない設計。アプリの if 文に頼らず、ブラウザに露出する公開キーからも他人のデータに到達できないようにしました。
• 1 日 1 レコード＋ JSON で柔軟に
  画面と保存の単位を「1 日」に揃え、項目は JSON で保持。記録項目を増やしてもテーブル変更が不要です（実際に「腸の調子」へ“朝”を後から追加した際もスキーマ変更ゼロで対応）。
• ストレスのない自動保存
  入力はまず画面へ即反映し、800ms 後に 1 日分をまとめて保存。保存中に次の編集が来たら最新だけを送る“後勝ち”制御で、こまめな入力でも無駄な通信を抑えました。
• グラフは自作 SVG
  1 年分を一度に取得し、期間は画面側で絞り込み。欠測区間は線を繋がないなど、見やすさに配慮しました。

• 安全な退会機能
  全権限キーをアプリに持たせず、「本人だけが自分を削除できる」PostgreSQL 関数で実装。退会でデータも確実に削除されます。
• 無料枠の運用対策
  定期実行（GitHub Actions）で DB の自動休止を防ぎ、常時アクセス可能な状態を維持しています。

担当範囲

要件整理・設計・実装（フロント／ DB ／認証）・インフラ構築・デプロイ・独自ドメイン設定・運用まで、すべて一人で担当しました。