はじめに
以前作成した学習記録アプリは、登録した学習データを永続的に保存できなかった為、それを解決するために改修を行ないました。
こちらが以前作成したものです。
改修内容
画面デザインは殆ど変わっていませんが、登録した記録は永続的に保存できなかった為、画面を開き直しても保存した記録が残る仕様に変更しました。
SupabaseでDBを作成して登録したデータを永続化できるようにしています。
以下のように学習内容と学習時間を入力して登録ボタンを押すと、
登録した内容がSupabaseのDBテーブルに保存されます。
これでアプリを一度閉じて、再度開き直しても一覧に記録が残ったままの状態になります。
使用技術
フロントエンド：React 19
バックエンド：SupaBase
ビルドツール：Vite
テスト：Vitest、React Testing Library
CI/CD：GitHub Action
デプロイ：Firebase Hosting
苦労した点
CI/CDをGitHub Actionで構築して、Gitにプッシュするだけでテストとデプロイを自動で行なってくれる仕組みを作りました。
CI（自動テスト）の仕組みを作るために作成した4つのテストコードの項目を、エラーが発生せずに全てパスさせるまでが大変でした。
テストコード自体今まで書いたことが無かった為、何も分からない状態でのスタートでしたが、動画教材などを参考にしたおかげで何とか乗り越えることが出来ました。
テストコードを実行するで仮想的にアプリ画面を作成し、登録や削除などの操作を行なってコードで書いた通りに期待した結果が返ってくるか検証できることが理解できました。
おわりに
今後もじっくりとReact学習に取り組んでいこうと思います。
参考