はじめに
デジタル名刺アプリを作成しました。この記事では、アプリの概要、実装した機能、使用した技術、そして開発を通じて学んだことを紹介します。
アプリ概要
ユーザーは自分のプロフィール情報（名前、自己紹介、好きな技術、SNSアカウントなど）を登録し、ユーザーIDで検索して他のユーザーの名刺情報を閲覧できます。
主な機能
- Supabase 上のデータベースに名刺情報を保存・取得
- ユーザーIDによる名刺の検索・表示
- 名刺の新規登録機能
- GitHub、Qiita、Xへのリンク表示
- Chakra UIでスタイル調整
- react-hook-formでフォーム管理/バリデーション
- GitHub Actionsのスケジュール機能を使ったcronジョブ（毎日自動で前日のデータを削除）
使用した技術
- React（Vite）
- TypeScript
- Chakra UI
- react-hook-form
- Supabase
- React Router
- Vitest / React Testing Library
- Firebase Hosting
- GitHub Actions（CI/CD、スケジュール機能）
画面構成
アプリは3つの主要な画面で構成されています。
1. トップページ（名刺検索）
ユーザーIDを入力して名刺を検索する画面です。検索結果は名刺詳細画面に遷移して表示されます。また、「新規登録」ボタンから名刺登録画面へ遷移できます。
2. 名刺詳細画面
検索したユーザーの詳細情報を表示する画面です。以下の情報が表示されます
- 名前、ID、自己紹介
- 好きな技術
- GitHub、Qiita、Xへのリンク
3. 名刺登録画面
新しい名刺を登録する画面です。必須項目（ID、お名前、自己紹介、好きな技術）と任意項目（GitHub ID、Qiita ID、X ID）を入力して登録できます。react-hook-formを使用し、バリデーションを実装しています。
学んだこと・感じたこと
今回特に学んだのは、データベース周りです。テーブル設計は以下のようになっています。
今回は外部キー制約を設定しました。外部キーを設定しておくと、DB側でデータの整合性を保証してくれます。例えば、usersテーブルのレコードを削除しようとすると、user_skillテーブルのuser_idと紐づけられているため、削除できないように設定できます。他にはuser_skillテーブルでskillsテーブルに存在しないIDを登録しようとすると、エラーが出るようになります。このように外部キー制約を設定すると、アプリケーション側のバグや不正なデータの追加を防げるため、より安全なアプリケーションを構築できます。
過去に作成したアプリでも、CI/CDやSupabaseでのデータ管理、Firebaseへのデプロイ、react-hook-formなどを使用してきたので、今回の開発では以前よりも理解が深まり、使えるようになったと感じました。
過去の記事↓
https://qiita.com/potato11/items/e5f6b0dc6ea22923d644
https://qiita.com/potato11/items/24e3595fa2abbdea3ca6
JISOUのメンバー募集中！
プログラミングコーチング JISOU では、新たなメンバーを募集しています。
実践的なカリキュラムで、あなたのエンジニアとしてのキャリアを最短で飛躍させましょう！
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼