Zenn
💪

【個人開発】トレーニーのための成長記録アプリを作りました

2023/04/08に公開
Next.js
Vercel
個人開発
#
筋トレ
T3 Stack
tech

記事の概要

トレーニーのための筋トレ記録用Webアプリを作りました。主な機能や開発したときの経緯について紹介します。

作ったもの

URLは以下です。Vercelにデプロイしました。よほど高い請求が来ない限り利用自由です。

https://everyworkout.vercel.app/

GitHubのリポジトリはこちら

https://github.com/pb10005/everyworkout

開発の動機

私は最近筋トレを始めたのですが、トレーニングの記録をつける「トレーニングノート」なるものがあると知り、Web版のトレーニングノートを自分用に作ってみたいと思ったことがきっかけです。

初心者トレーニーではありますが、自分が欲しい機能を作ることに注力しました。

主な機能

ワークアウト記録

その日トレーニングした種目、重量、レップ数、セット数を記録できます。
過去のトレーニング記録は日別、種目別に確認可能で、日別の記録では総ボリュームを確認できます。

成長記録

トレーニーが成長を感じる重要な要素であるMax重量の更新。自分の成長を時系列で確認できるよう、Max重量の更新履歴をグラフを表示できるようにしました。

OAuthによる認証

GoogleアカウントまたはDiscordアカウントを使ってログインできます。

アプリ用のDiscordサーバも作ってみました。
https://discord.gg/UxSPnrkW

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でやりました。

ブラウザでWeb開発ができるサービスで、テンプレートから素早くプロジェクトを立ち上げることができます。
今回はcreate-t3-appのテンプレートを使用しました。

テンプレートを作ったら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