React + Vite + Supabase で学習記録アプリを作ってみた

はじめに

React と Vite を使って、学習内容と学習時間を記録できるシンプルな学習記録アプリを作成しました。

このアプリでは以下のようなことができます。

• 学習内容の登録
• 学習時間の登録
• 学習記録の一覧表示
• 学習記録の削除
• 合計学習時間の表示

また、開発だけでなく CI/CD も取り入れ、GitHub Actions を使って自動テストとデプロイ用ワークフローの仕組みも整えました。

使用技術

• React 19
• Vite 8
• Supabase
• Firebase Hosting
• Jest
• Testing Library
• ESLint
• GitHub Actions

サービス名

学習記録アプリ

サービスの説明

学習記録アプリ は、毎日の学習内容と学習時間を記録するための Web アプリです。

フォームに学習内容と学習時間を入力して登録すると、記録が一覧に追加されます。
登録済みの記録は削除でき、画面下部にはこれまでの合計学習時間も表示されます。

データは Supabase に保存しているため、フロントエンドだけで完結するアプリよりも、実際のデータベースを使った開発経験を積むことができます。

さらに、Jest と Testing Library を使って画面の挙動をテストし、GitHub Actions によって push と pull_request のタイミングで自動テストが実行される構成にしています。

加えて、Firebase Hosting へのデプロイ用ワークフローも用意し、GitHub Secrets に登録した環境変数や認証情報を使って、GitHub Actions からデプロイできるようにしました。
これにより、ローカルだけでなく CI/CD を含めた開発フローも体験できる構成になっています。

環境設定の方法

このプロジェクトでは、Supabase に接続するための環境変数を .env に設定します。

ルートディレクトリに .env ファイルを作成し、以下を記述します。

VITE_SUPABASE_URL=あなたのSupabaseのURL
VITE_SUPABASE_ANON_KEY=あなたのSupabaseのAnon Key

Vite では、クライアント側で利用する環境変数には VITE_ の接頭辞が必要です。
そのため、Supabase の URL や API キーも VITE_SUPABASE_URL と VITE_SUPABASE_ANON_KEY という名前で定義しています。

起動の仕方

1. 依存関係をインストール

まずは必要なパッケージをインストールします。

npm ci

2. 開発サーバーを起動

次に、Vite の開発サーバーを起動します。

npm run dev

3. テストを実行

ローカルでテストを実行する場合は以下のコマンドを使います。

npm run test

CI / CD

このプロジェクトでは GitHub Actions を使って、自動テストとデプロイ用ワークフローを設定しています。

自動テスト

以下のタイミングでテストが実行されます。

• push
• pull_request

実行内容は次のとおりです。

1. ソースコードをチェックアウト
2. Node.js をセットアップ
3. npm ci で依存関係をインストール
4. npm test -- --runInBand でテストを実行

これにより、コードを push した時点でテスト結果を確認できるようにしました。

デプロイ用ワークフロー

Firebase Hosting へのデプロイを実行できるようにしています。

1. ソースコードをチェックアウト
2. Node.js をセットアップ
3. npm ci を実行
4. npm run build で本番ビルド
5. Firebase CLI をインストール
6. Firebase Hosting にデプロイ

デプロイ時には GitHub Secrets に以下の値を登録して利用します。

• VITE_SUPABASE_URL
• VITE_SUPABASE_ANON_KEY
• FIREBASE_KEY

まとめ

今回は、React + Vite + Supabase を使って学習記録アプリを作成しました。
シンプルな CRUD アプリですが、環境変数の管理、外部サービス連携、テスト、自動 CI、デプロイ用ワークフローの整備まで含めて一通りの開発フローを体験できました。