はじめに
現在JISOUに入って3か月です！
React + Supabaseでデジタル名刺アプリを作成しました！
ソースコード↓
作成したもの
デジタル名刺アプリ
【ホーム画面】
【名刺新規登録画面】
【名刺画面】
【機能】
- デジタル名刺を作成することができる
- IDを入力するとIDに紐づいたデジタル名刺を閲覧することができる
- 毎朝6時にユーザーデータが削除される
新規登録フォームでは、必須入力やアルファベット指定などのバリデーションチェックをreact-hook-formで行っています！
テーブル構成
users テーブル
| カラム名 | 説明 | 型 |
|---|---|---|
| user_id | 主キー | varchar |
| name | ユーザー名 | varchar |
| description | 自己紹介 | varchar |
| github_id | GitHub ID（オプション） | varchar |
| qiita_id | Qiita ID（オプション） | varchar |
| x_id | X ID（オプション） | varchar |
user_skill テーブル
| カラム名 | 説明 | 型 |
|---|---|---|
| id | 主キー | int |
| user_id | users テーブルの外部キー | varchar |
| skill_id | skills テーブルの外部キー | int |
skills テーブル
| カラム名 | 説明 | 型 |
|---|---|---|
| id | 主キー | int |
| name | スキル名 | varchar |
使用技術
- React（TypeScript）
- Supabase（Database）
- Vite
- Chakra UI v3
- Jest（テスト）
- GitHub Actions（CI/CD）
学んだこと
-
データの扱い方
今回はテーブルを三つ使いました。その際に、中間テーブルの扱い方やメリットを学ぶことができました。取得してstateで管理すること自体は以前、学習記録アプリを作成する際に学んだので、いい復習になりました。 -
React Routerの使い方
今回のアプリは複数ページで構成されています。その際に初めてRouterを設定しました。パスパラメータの取得方法やテストでのページの扱い方を学ぶことができました。 -
GitHub Actionsを利用したバッチ処理
毎朝6時に処理を実行するymlを作成しました。（これでsupabaseのpauseを無効化できる？？）
大変だったこと
- Jest
jestに関してはインプットをほとんどしたことがなかったので、以前使っていた以下の教材で少しインプットしました。
しかし、前回のアプリ同様、テストを書くのに苦戦しました。表示されているかテストするだけだったら迷わず書くことができるようになったのですが、supabaseやuseNavigateのmock、user-eventをうまく使えず、時間がかかりました。
使用教材
【これからはじめるReact実践入門】
おわりに
先ほど述べた通り、学習記録アプリを作成したことがあったので、今回のアプリは4日で作成することができました。
それでもmockの仕方、React Router、cronなど少しずつ新しい技術を取り入れていくことで成長している実感はあります！
段階的に新しい技術を取り入れていってアウトプットしていくことが大切だと改めて感じました。（今までの自分の勉強の仕方は本当に遠回りだった、、、）
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼