はじめに
今回、React TypeScript Supabase を使った名刺アプリを作成しました。
このアプリは、ユーザーが自分の名刺情報を登録し、他の人の名刺を閲覧できる機能を持っています。
この記事では、アプリ開発を通じて得た学びや苦労した点を共有したいと思います。
使用技術
| カテゴリ | 技術 |
|---|---|
| フロントエンド | React |
| TypeScript | |
| Chakra UI | |
| React Router | |
| React Hook Form | |
| バックエンド | Supabase |
| テスト | Jest |
| Testing Library | |
| CI/CD | GitHub Actions |
| その他 | DOMPurify |
機能一覧
以下の機能を実装しました。
- ユーザー情報の登録・表示・編集（フォーム入力と表示）
- ユーザーに紐付くスキル情報の管理（複数スキルの登録）
- SNSアカウント連携（GitHub、Qiita、X）と動的アイコン表示
- CI/CDによる自動テスト実行
- バッチ処理による前日データの自動削除
- レスポンシブデザイン対応
以前と比べて成長したポイント
以前は単純なCRUD機能を作るだけで精一杯でしたが、今回は以下の点で大きく成長できました。
-
型安全な設計
TypeScriptとZodを使って、フォーム入力から状態管理まで、型安全なコードを書けるようになりました。また、バリデーションロジックも統一できてメンテナンス性が向上しました。 -
モックを使用したテスト
外部APIやデータベースとの連携部分はモック化することで、ロジックのテストを安定して実行できるようになりました。 -
中間テーブルの活用
Supabaseで中間テーブルの設計や操作方法を習得し、多対多の関係を適切に扱えるようになりました。SQLの理解も深まり、複雑なクエリも実装できるようになりました。 -
CI/CDと自動化
GitHub Actionsを使った自動テストや、定期実行のバッチ処理を構築できたことで、運用面の理解も深まりました。
開発で苦労したこと・工夫したこと
① Firebaseへのデプロイ
こちらは以前から行っていますが、CI/CDで新しいライブラリを使用して、デプロイに挑戦してみたのですが、苦戦してしまい前回と同様の方法で行いました。
次回改めて挑戦してみたいと思います。
② Supabaseで中間テーブルの設計
ユーザー情報とスキル情報の多対多の関係を解決するべく、ユーザースキルという中間テーブルを作成しました。
この中間テーブルを操作する時は、 Supabase で外部キーの設定をする必要があり、特有のSQL文を使用することで情報の取得が行えました。
③ Chakra UIによるレスポンシブデザイン
デザインはChakra UIのv2で行いました。
その中でも初めて使用してみたコンポーネントのuseToastは、UXの向上に繋がるデザインとなり、実装のモチベーションも向上しました。
④ React Routerの活用
useParams()でパスパラメータから動的に画面を切り替える仕組みを実装しました。
これにより、URLの一部をコンポーネントの状態として利用でき、ルーティングの理解が深まりました。
⑤ バッチ処理とタイムゾーン問題
GitHub Actionsで定期実行するバッチ処理の実装では、タイムゾーンの問題が生じました。
特に Supabase のデータベースがUTC基準で動いているのに対して、表示は日本時間（JST）でする必要があったため、時間の変換が必要でした。
最終的には、日本時間の「前日」のデータを正確に特定して削除できる仕組みを作成することができました。
⑥ テストコードのモックの導入
ページ遷移を行う useNavigateや、Supabaseにアクセスする処理をモック化することができ、安定したテストコードを作成することができました。
⑦ README.mdの充実
READMEには、今まであまり関心を向けて来なかった部分でした。
しかし、今回はシールドバッジを追加したり、操作方法などを追記して見た目にもこだわることで、成果物の印象が大きく向上し、プロジェクトの品質が増したように感じました。
試したけどできなかったこと
Supabaseに作成したデータベースのバックアップを取得するため、Supabase CLIでdumpファイルを取得しようとしましたが、エラーに阻まれました。
PostgreSQLの知識不足も痛感したので、データベース管理についてはより深い学習が必要だと感じています。今後も調査を続けたいと思います。
おわりに
今回の開発を通じて、単なるReactのアプリを作るだけではなく、プロジェクト全体を設計する力が必要であることを実感しました。
苦労した点も多かったですが、一つずつ問題を解決していき、理解が進むことで、問題に対する向き合い方も良い方向に変わった気がします。
一方で、技術的にも弱い部分が露呈されたので、これからも 「ただ使うだけでなく、理解しながら使う」 を意識して、学習を続けていきたいと思います。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼