1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

はじめに

前回の投稿で実装した「学習記録アプリ」をSupabase を使ってデータを保持できるようにしました。また、CI/CDを構築し、GitHubにpushするだけで自動的にテストとデプロイが行われるようにしました。

アプリ概要

このアプリは、学習した内容と学習時間を記録できる学習管理アプリです。

画面収録 2025-10-29 21.13.51.gif

主な機能

  • Supabase 上のデータベースに学習記録を保存・取得
  • 登録した記録の一覧表示
  • 記録の削除機能
  • Firebase Hosting へのデプロイ
  • GitHub Actions を使った自動テスト・自動デプロイ

使用した技術

  • React(Vite)
  • Supabase(データ永続化)
  • Firebase Hosting(デプロイ)
  • Jest / React Testing Library(テスト)
  • GitHub Actions(CI/CD)

学んだこと・感じたこと

今回、Supabase は初めて使いましたが、無料でDBを扱えてGUIでテーブルを作成できる点がとても便利でした。ただ、データベース周りの知識が浅いため、今後はこの領域も学んでいきたいと思いました。
また、Jestで環境変数を設定する部分で特に苦戦しました。Viteでは import.meta.env を使うため、そのままではテストで環境変数が読み込まれず、設定を調整する必要がありました。うまくいかない時期はモチベーションが下がることもありましたが、途中からは「毎日少しでもいいから進める」という意識を持って取り組めたかなと思います。

おわりに

今回はSupabaseによるデータ永続化から、テスト、CI/CD構築まで一連の流れを実装できました。まだアウトプットを習慣化できていない部分があるので、今後は学んだこと・詰まったところをその都度発信していけるように意識していきたいです。

JISOUのメンバー募集中!

プログラミングコーチング JISOU では、新たなメンバーを募集しています。
実践的なカリキュラムで、あなたのエンジニアとしてのキャリアを最短で飛躍させましょう!

興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください!
▼▼▼

https://projisou.jp/

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?