はじめに
お疲れ様です。
以前、Reactで作成した学習記録アプリをTypescriptとChakra UIを使って作成し直しました。
さらにFirebaseでのホスティング、GitHub Actionsを用いたCI/CD自動デプロイ、Jest+React Testing Libraryでの自動テストを導入しました。
この記事では、アプリの構成、開発での課題と解決策、学びや成長を振り返ります。
アプリ概要
GitHubリポジトリ：
https://github.com/kazukashima/kadai3.git
このアプリは、日々の学習内容と学習時間を記録し、合計時間を自動計算して表示します。
| 機能 | 内容 |
|---|---|
| Supabase連携 | 学習記録をクラウド保存 |
| 初期表示 | Supabaseから学習記録を取得して一覧表示 |
| 登録機能 | フォームから学習内容と時間を追加 |
| 削除機能 | 登録した記録を削除可能(同時にSupabase上からも削除される) |
| ローディング表示 | データ取得中にスピナー表示 |
| Firebaseデプロイ | 本番環境で動作確認 |
| Makefile | 本番環境で動作確認 |
| CI/CD | GitHub Actionsでpush時に自動テスト＆本番デプロイ |
| Firebaseデプロイ | 本番環境で動作確認 |
前回との相違点
- 使用した言語: - Typescriptに変更
- React Hook Formを導入したこと
- Chakura UI を導入したこと
開発で苦労したポイントと解決策
1. テストコードと実装の不一致(テストがうまく通らなかったこと)
問題：テストで使っている文言（学習記録アプリなど）と実際の UI の文言（学習記録）が微妙に違ってエラーになる。
解決策：テストでは getByText を正規表現（例：/学習記録/i）で柔軟に指定するよう修正。
ポイント：UIとテストの文言はセットで見直す
2. 状態管理
問題：どの状態を useState で持つか整理するのが難しかった
records（一覧データ）
loading（読み込み中フラグ）
error（エラーメッセージ）
editingRecord（編集対象のレコード）など
解決策：UIに「変化するもの」は全部状態として管理する必要がある。
3. UI/モーダル表示
問題：Modal を条件分岐 (loading / error) の内側に書いてしまい、ボタンを押してもモーダルが出なかった。
解決策：Modal は条件分岐の外に置き、isOpen / onOpen / onClose で制御する必要があった。
成長したポイント
1. 環境構築・設定
Vite + React + TypeScript + Chakra UI の開発環境を一から構築できるようになった。
ChakraProvider をアプリ全体に適用する流れを掴み、設定の重要性を理解できた。
2. CI/CD に対する実践力
Makefile に make test を追加し、ローカル環境での自動テスト実行フローを整備できた
GitHub Actions を使って、Push時にビルド → テスト → デプロイが自動化される流れを構築できた
3.デバッグ・切り分け力
エラーメッセージに惑わされず、最小化したコードで再現テストを行い、問題の切り分けに成功。
環境とコードのどちらが原因かを判断する手順を学んだ。
「環境エラー」と「実装エラー」の見極めが速くなった。
学んだこと・気づき
-
クラウドサービスの敷居は想像以上に低かった
SupabaseやFirebaseはGUIが充実していて、初心者でも直感的に扱える
データベース作成、テーブル編集、デプロイ作業まで一貫して学べた -
自分で学んだことを発信する大切さ
ドキュメントやQiita記事、エラーメッセージを手がかりに自力でトラブルシュートできた -
状態は「UIに変化があるかどうか」で決まる
ただ全部を useState に置くのではなく、
「画面に影響を与えるものだけを状態にする」 という整理が必要だと気づいた。
おわりに
今回の開発を通じて、アプリを**「作る → テスト → 自動公開」**までの一連の流れを体験できました。
アウトプットの量を増やしてしっかり知識を定着させたいと思います。
JISOUでは仲間を募集中！
日本一のアウトプットコミュニティで、あなたも一緒に成長しませんか？
▶ https://projisou.jp/