はじめに
前回の投稿で実装した「学習記録アプリ」を、Chakra UIでデザインを綺麗にし、編集機能の追加やフォームをreact-hook-formに置き換えて改善しました。
今までの学習記録アプリの投稿：
https://qiita.com/potato11/items/3f56222bcf825946fec8
https://qiita.com/potato11/items/e5f6b0dc6ea22923d644
アプリ概要
学習した内容と学習時間を記録できる学習管理アプリです。
主な機能
- Supabase 上のデータベースに学習記録を保存・取得
- 登録した記録の一覧表示
- 記録の削除機能
- 記録の編集機能
- Firebase Hosting へのデプロイ
- Chakra UIでスタイル調整
- react-hook-formでフォーム管理/バリデーション
使用した技術
- React（Vite）
- Chakra UI
- react-hook-form
- Supabase
- Vitest / React Testing Library
- Firebase Hosting
- GitHub Actions（CI/CD）
学んだこと・感じたこと
今回、react-hook-formを初めて使いましたが、useStateで値を細かく持たなくてもバリデーションが簡単に実装できたり、不要な再レンダリングも抑えられ、実装がスッキリしました。
また、TypeScriptでは class を使って型を定義を行いました。オブジェクト指向も今後もっと勉強して設計にも活かしていきたいです。
おわりに
今年最後の記事となりました。来年はもっと小さいことでも積極的にアウトプットして、学んだことを身につけていきたいです！
JISOUのメンバー募集中！
プログラミングコーチング JISOU では、新たなメンバーを募集しています。
実践的なカリキュラムで、あなたのエンジニアとしてのキャリアを最短で飛躍させましょう！
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼