【個人開発】トレーニーのための成長記録アプリを作りました
記事の概要
トレーニーのための筋トレ記録用Webアプリを作りました。主な機能や開発したときの経緯について紹介します。
作ったもの
URLは以下です。Vercelにデプロイしました。よほど高い請求が来ない限り利用自由です。
GitHubのリポジトリはこちら
開発の動機
私は最近筋トレを始めたのですが、トレーニングの記録をつける「トレーニングノート」なるものがあると知り、Web版のトレーニングノートを自分用に作ってみたいと思ったことがきっかけです。
初心者トレーニーではありますが、自分が欲しい機能を作ることに注力しました。
主な機能
ワークアウト記録
その日トレーニングした種目、重量、レップ数、セット数を記録できます。
過去のトレーニング記録は日別、種目別に確認可能で、日別の記録では総ボリュームを確認できます。
成長記録
トレーニーが成長を感じる重要な要素であるMax重量の更新。自分の成長を時系列で確認できるよう、Max重量の更新履歴をグラフを表示できるようにしました。
OAuthによる認証
GoogleアカウントまたはDiscordアカウントを使ってログインできます。
アプリ用のDiscordサーバも作ってみました。
PWA
「ホーム画面に追加」ができるのでスマホからアクセスするときに便利です。
技術スタック
私はこれまでWeb開発するときはフロントエンドはVue3
でSPAを作ってNetlify
にデプロイ、バックエンドはDBaaSのSupabase
をよく使っていたのですが、今回は新しいツール・サービスを勉強しながら使うことをテーマに技術スタックを選定しました。
技術スタック
T3 Stackという、以下からなるWeb開発のための技術スタックです。TheoというYoutuberが提唱しています。
- Next.js
- tRPC
- Tailwind CSS
- Typescript
- Prisma
- NextAuth.js
使ったライブラリ
ライブラリ名 | 用途 |
---|---|
next-pwa | アプリのPWA化 |
Recharts | グラフ描画 |
heroicons | アイコン |
開発環境
ローカルに開発環境を作らないで開発することをテーマとして、コーディングは基本Chromebookでやりました。
- Codesandbox
https://codesandbox.io/
ブラウザでWeb開発ができるサービスで、テンプレートから素早くプロジェクトを立ち上げることができます。
今回はcreate-t3-app
のテンプレートを使用しました。
- GitHub Codespaces
https://github.com/codespaces
テンプレートを作ったらGitHubにリモートリポジトリを作り、その後はCodespacesで開発しました。
デプロイ
- Vercel
正直Netlifyとの違いはよくわからないのですが、Next.jsアプリをデプロイできるとのことで採用しました。 - Railway
Postgres
のホスティングに使いました(Supabaseは無料枠を使い切ったため断念)。月に500時間分の無料枠があります。
苦労したこと
-
React
の作法を覚えるのに苦労しました。Vueのscript setup
に慣れていたのでだいたい同じものだろうと思っていたのですが、最初のうちはエラーとの格闘でした(特に再レンダリングの仕組みやReact Hooks
関連のエラーに苦戦)。理解できているかは怪しいですが、しばらくすると慣れてきて最低限動くものは書けるようになりました。 - Vueは
JavaScript
で書いていたのでTypeScript
の型チェックに苦労しました。devサーバーで動くのに、いざビルドすると大量のエラーが出てげんなりすることがしばしばありました。とはいえ、ビルド時に教えてくれるのはいざデプロイして思わぬ挙動をするよりは良いと思います。 -
Prisma
は生のSQLに比べると自由度が低いので苦労しました。Viewは一応使えるのですがprisma.schema
からは定義できなかったり、一部Prisma ClientのAPIで実現できなくてprisma.$queryRaw
で生SQLを書いたりもしました。ただ、schemaを定義したらクライアントオブジェクトが生成され、それを使ってtRPC
のrouterを書き、さらにそれをフロントエンドで呼び出すという開発体験は良かったです。
感想
- T3 Stackは少し学習コストが高いものの、慣れればかなり良いと思います。今後新しく何か作るときにもT3 Stackを採用してみたいと思います。
- アプリを自分で数ヶ月使っているのですが、過去と比べて重い重量を扱えるようになっているのがわかり、筋トレのモチベーションが上がりました。筋肉をつけながらWeb開発の勉強もできて一石二鳥でした!
Discussion