初めに
現在、React・TypeScriptの学習を進めていてUdemy,Yotubeでハンズオンで動画を見ながら手を動かしていたなかで、要件定義からデプロイまで個人で開発しないと思っていたので、今回は「筋トレの記録をできる」アプリを2週間で開発しました。
どんなアプリ？
このアプリでは、トレーニングの記録の追加・削除ができます。
具体的には、日付・種目・重量・回数の登録が可能です。
なぜ作ったのか？
私は高校生の頃から筋トレをしていて、週に5回ジムに通っています。当時から、ジムに自分よりも身体の大きい人がいるなかで、どうしたら身体を変えられるか考えたときに「昨日の自分を超えること」だと思いました。しかし、がむしゃらに鍛えるだけでは昨日の自分を超えることは難しいと考え、種目の記録を付けることで客観的に成長したかどうか分かるのでノートに種目の記録を付け始めました。ノートに記録を付けてからは、前回の記録を把握することで筋トレのモチベーションを上げることができました。成長に繋げることができたのですが、ジムで移動するときに荷物が多くなるという課題を感じていたことから、普段から手に持っているスマホで筋トレの記録を管理したいと思い、今回作ることにしました。
使用技術
今回使用した技術は以下になります。
・React
・TypeScript
・Chakra UI
・Firebase
開発について
React
TODOリストよりも、useStateで管理するデータが増えたので分かりやすい命名をすることが次回の課題です。また、useStateで記録を更新するときに1つの日付に複数の記録を登録するロジックに苦労しました。
TypeScript
今回初めて導入して意識したことは、オブジェクト指向です。管理するデータが多いことから、型をクラスで定義してインスタンス化することで利便性に繋がると考えました。
Chakra UI
UIライブラリとしてChakra UIを導入しました。実装を進めていくなかで、便利に感じる部分がありました。1からCSSを記述しなかったので、今回2週間でデプロイまで持っていくことができた要因だと考えています。
Firebase
Hostingを使用して、デプロイを行いました。
初めてFirebaseを使用した感想としては、導入手順が非常に簡単でアプリ開発に集中することができました。
終わりに
初めての個人開発を記事にしてみました。
改善点は多くあるので、修正していきたいと思います。
・種目がベンチプレス、スクワット、デットリフトしか選択できない（重量も同様に）
・セット数を選択できるようにして、セット毎に何回行えたのか設定できるようにする
・1度登録した記録を編集できるようにする
・レスポンシブ対応
改善を重ねて、少しでも使いやすいと感じるようなサービスを作れるようになっていきたいです。