はじめに
お疲れ様です。
今回のアプリ開発では、誰でもその場で登録でき、翌日には自動で消えるオンライン名刺アプリを開発しました。
React・TypeScript・Supabase・Firebase・Chakra UIを使用し、CI/CD・テスト・自動削除バッチまで実装しています。
アプリ概要
GitHubリポジトリ：
https://github.com/kazukashima/kadai4.git
このアプリは、日々の学習内容と学習時間を記録し、合計時間を自動計算して表示します。
| 機能 | 内容 |
|---|---|
| Firebaseデプロイ | 本番環境に自動反映 |
| Supabase連携 | 名刺データ・スキルデータをクラウド保存 |
| 表示機能 | 名前・自己紹介・スキル・SNSを登録可能 |
| 削除機能 | /cards/:id にアクセスすると名刺が見られる |
| バリデーション | React Hook Form による必須チェック・英字ID判定 |
| CI/CD | GitHub Actions でテスト・デプロイを自動化 |
| Jestテスト | ページ単位でUIと動作を検証 |
| バッチ処理 | 毎朝6時に前日のデータを削除（GitHub Actions Cron） |
開発で苦労したポイントと解決策
1. React Hook Form × Chakra UI の連携
Chakra UI の や に React Hook Form の register を使ったところ、
なぜかバリデーションが反応せず、空欄でも送信できてしまいました。
調べると、Chakra UI のフォーム部品は少し特殊な作りをしていて、
register だけでは値の管理がうまくいかないことが分かりました。
そこで、Controller を使って値のやり取りを明示的に設定したところ、
バリデーションが正常に動くようになりました。
この経験から、UIライブラリによってフォームの仕組みが違うことを理解して使うことが大切だと学びました。
2. GitHub Actions の環境変数設定
GitHub Actionsで自動デプロイを設定した際、
ローカルでは動くのにCIでは.envが読み込まれず失敗しました。
Actionsでは.envが自動で反映されないと知り、
Secretsに登録して env: で明示的に指定することで解決しました。
ローカルとCIでは環境変数の扱いが違うことを実感し、
最初に「Secretsをどう渡すか」を設計しておく重要性を学びました。
3. バッチ処理（ts-node + GitHub Actions Cron）の実行確認
毎朝6時に前日のデータを削除するバッチをGitHub Actionsで動かしたところ、
ローカルでは動くのに本番では削除されない問題がありました。
原因はパスの違いと**時差（UTCと日本時間）**でした。
npx ts-node --esm で実行方法を統一し、UTC基準で日付を計算することで解決しました。
この経験から、CI環境はローカルと同じではないと実感しました。
成長したポイント
1. テストを通じて安心してリリースできる感覚を得た
Jest と React Testing Library を導入し、ページ単位でのテストを実装しました。
これにより、修正を加えた際に「何か壊れていないか」を確認できるようになり、
自信を持ってデプロイできる環境を整えることができました。
特に、useNavigate のモック化や Supabase 関数のモックなど、
「外部要素を切り離してテストする」という考え方を実践できたのが大きな収穫でした。
テストを書くことで、自然とコンポーネントの責務やデータの流れを整理できるようになり、
結果としてコードの理解力と安定性が大幅に向上しました。
2. 時間に依存する処理を扱えるようになった
毎朝6時に前日のデータを削除するバッチ処理を実装したことで、
**「時間に依存するプログラム」**の難しさと面白さを体験しました。
初めはUTCと日本時間のズレで削除がうまく動かず、
「ローカルでは動くのに本番では動かない」状況に悩まされました。
その過程で、Supabaseのタイムスタンプの扱い、UTC基準での日付計算、
そしてGitHub Actionsの実行時間の仕組みを深く理解できました。
この経験を通して、単なるタスク実行ではなく、
「いつ・どの環境で動くか」を設計できる力が身についたと感じています。
学んだこと・気づき
-
自動化は「手間を減らす」だけでなく「仕組みを理解する」チャンス
毎朝6時に自動削除されるバッチ処理を作ったことで、ただスクリプトを動かすだけでなく、「時間」「環境」「ロジック」の関係を整理する力がつきました。 -
自分で学んだことを発信する大切さ
ドキュメントやQiita記事、エラーメッセージを手がかりに自力でトラブルシュートできた。
おわりに
今回の開発を通じて、アプリを**「作る → テスト → 自動公開」**までの一連の流れを体験できました。
アウトプットの量を増やしてしっかり知識を定着させたいと思います。
JISOUでは仲間を募集中！
日本一のアウトプットコミュニティで、あなたも一緒に成長しませんか？
▶ https://projisou.jp/