はじめに

お疲れ様です。
今回、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/