はじめに
こんにちは！POMです。
今回はJISOUの課題として、
以前Reactで作成した学習記録アプリの改修に取り組みましたので、
そちらの内容について記事を残します。
前回、作成したアプリの詳細は下記記事にて。
改修内容
主に今回の改修内容は4項目になります。
1. データベース接続（Supabase）
2. 自動テスト（Vitest/React Testing Library）
3. デプロイ（Firebase Hosting）
4. CI/CDパイプライン構築（GitHubActions）
改修後のソースコードはこちら↓
ーーー
基本的な機能や見た目は前回までとほとんど変わりません。が、
削除ボタンを追加したので、学習記録を消すこともできるようになりました！
1. データベース接続（Supabase）
以前までの学習記録アプリは、DB管理していませんでしたので、
ページをリロードすると学習記録が消えてしまっていました。
ということで、Supabaseを利用してDB管理できるように改修しました！
今回追加したテーブルは下記です。
| カラム名 | 型 | 説明 |
|---|---|---|
| id | uuid | 主キー |
| title | varchar | 学習内容 |
| time | int4 | 学習時間（時間単位） |
| created_at | timestamptz | 作成日時 |
Supabaseの概要については、下記記事が参考になります。
2. 自動テスト（Vitest/React Testing Library）
VitestとReact Testing Libraryを利用して、自動テスト(CI)を作成しました。
作成したテストケースは、下記4パターンとなります。
- タイトルが表示されている
- フォームに学習内容と時間を入力して登録ボタンを押すと、
新たに記録が追加されている - 削除ボタンを押すと学習記録が削除される
- 入力をしないで登録を押すとエラーが表示される
3. デプロイ（Firebase Hosting）
Firebase Hostingを利用して、アプリをデプロイしました。
これにより下記URLを打ち込めば、
スマホからも本アプリを利用できるようになりました！
4. CI/CDパイプライン構築（GitHubActions）
GitHubActionsなるものを利用して、
mainブランチにpushしたときに、自動でテスト実行とデプロイができるようにしました！
まさにCI/CDですね！
「CI/CDってなんぞや？」という方は、
JISOU代表の渡邉さん(@Sicut_study)の下記記事がとても分かりやすいので、
おすすめです！
大変だったこと
GitHubActionsにて自動デプロイした際に
本番サイトになかなか画面が表示されず、苦戦しました。
その際の記事はこちら↓
気づきなど
今回利用したSupabase・Vitest/ReactTestingLibrary・Firebase・GitHubActionsは、
ほとんど触ったことがありませんでしたので、
最初は不安でしたが、
とにかく調べて手を動かしてみる！ と決めて挑戦してみました。
いざ取り組み始めると、手こずるところも多々ありましたが、
どんどんアプリがアップデートされていくのが楽しくて、
丸2日ほどで課題を完了させることができました。
実務にてWebアプリ開発に携わっていた際は、手動でテスト・デプロイをしており、
テストの考慮漏れでリリース後にバグが見つかったり、
デプロイの度に手順書を作成していたりしました。（今思うと恐ろしい・・・）
今回の課題により、CI/CDの重要性を改めて知り、
また、簡易的にでも構築したという経験は今後の自信に繋がると思います！
おわりに
前回の課題より難易度は一段高かったように感じました。
アプリの見た目こそ大きな変化はなくとも、
DBによるデータ保持やCI/CDはどのアプリ開発においても
必須事項かと思いますので、
一連の機能に触れられてとても良かったです。
次回は学習記録アプリの更なるアップデートに取り組みます！
参考記事
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼