はじめに
お疲れ様です。
今回、Reactで作成した学習記録アプリにSupabaseを連携し、データの永続化を実現しました。
さらにFirebaseでのホスティング、GitHub Actionsを用いたCI/CD自動デプロイ、Jest+React Testing Libraryでの自動テストを導入しました。
この記事では、アプリの構成、開発での課題と解決策、学びや成長を振り返ります。
アプリ概要
GitHubリポジトリ：
https://github.com/kazukashima/kadai1.git
このアプリは、日々の学習内容と学習時間を記録し、合計時間を自動計算して表示します。
| 機能 | 内容 |
|---|---|
| Supabase連携 | 学習記録をクラウド保存 |
| 初期表示 | Supabaseから学習記録を取得して一覧表示 |
| 登録機能 | フォームから学習内容と時間を追加 |
| 削除機能 | 登録した記録を削除可能(同時にSupabase上からも削除される) |
| ローディング表示 | データ取得中にスピナー表示 |
| Firebaseデプロイ | 本番環境で動作確認 |
| Makefile | 本番環境で動作確認 |
| CI/CD | GitHub Actionsでpush時に自動テスト＆本番デプロイ |
| Firebaseデプロイ | 本番環境で動作確認 |
完成イメージはこちらです。
開発で苦労したポイントと解決策
1.SupabaseがJestでimportできない
- 課題：Cannot find module '../supabaseClient' エラー
- 解決策：モックファイルと moduleNameMapper を使って回避
2. Firebase CLIがCIで動かない
- 課題：firebase login ができず FIREBASE_TOKEN を使う必要があった
- 解決策：GitHub Secrets に登録し .yml で読み込むことで解決
3. CI/CD のエラー
-
課題：GitHub Actions で Firebase に自動デプロイしようとしたが、
Firebase CLI のログイン権限がなく失敗。.env ファイルも読み込まれずビルドが止まった。 - 解決策：Firebaseの認証キーを GitHub Secrets に登録、.env の読み込みに dotenv を使用、firebase-tools の設定を .yml で見直し
4. 合計時間計算の型変換
- 課題：Reactで作った「学習記録アプリ」の学習時間の合計を計算する関数を、Jestでテストしようとした。コンポーネント内部で supabaseClient を使っていたが、これはfetch API や window オブジェクトに依存している。しかし、Jestのデフォルト環境（Node.js）にはそれらがなく、ReferenceError: fetch is not defined などのエラーが出た。
- 解決策：jsdom 環境を設定し、supabaseClient をモックに置換
成長したポイント
-
クラウド技術への抵抗感がなくなった
Supabase や Firebase を実際に使い、GUIベースで操作できることや、想像よりも簡単に連携・デプロイができることを体感した。クラウド＝難しいという思い込みがなくなった。 -
実装とテストの両方を意識した開発ができるようになった
UIをただ作るだけでなく、Jest + React Testing Library を用いて「動作確認が自動化できるコード」の書き方を意識するようになった。 -
非同期処理やモジュールの構造に強くなった
useEffect での非同期データ取得や Supabase のデータ構造、.env・モックなど、環境構築・データ連携・テストの裏側まで意識できるようになった。 -
CI/CD の流れを実際に体験できた
GitHub Actions による自動テスト・自動デプロイの仕組みを構築し、開発から本番運用までの一連の流れを実践できた。
学んだこと・気づき
-
クラウドサービスの敷居は想像以上に低かった
SupabaseやFirebaseはGUIが充実していて、初心者でも直感的に扱える
データベース作成、テーブル編集、デプロイ作業まで一貫して学べた -
小さな課題を一つずつ解決する大切さ
ドキュメントやQiita記事、エラーメッセージを手がかりに自力でトラブルシュートできた -
GitHub Actionsによる自動化の威力を実感
手動でのビルド・デプロイを一つずつ行う手間が一気に省けた
本番環境と開発環境の切り分け・CI/CDの基本が理解できた
おわりに
今回の課題2を通して、フロントエンド → バックエンド連携 → ホスティング → テスト → デプロイ自動化という、一連の開発フローを体験できました。
特に、SupabaseとFirebaseを使った構築は実務でも応用可能な力になったと感じます。
JISOUでは仲間を募集中！
日本一のアウトプットコミュニティで、あなたも一緒に成長しませんか？
▶ https://projisou.jp/