はじめに
こんにちは！POMです。
今回はJISOUの課題の一環として
React × TypeScriptでデジタル名刺アプリを開発してみました！
以前までに課題で作成してきた学習記録アプリについての記事は下記になります。
少しずつ課題の難易度が上がり、成果物のレベルも高くなっています。
今回作成したアプリ
エンジニアの勉強会などで名刺交換をする中で、
書いてある内容がそれぞれ違うため話題が生まれにくく、
そもそも持っている人や持っていない人がいることに目をつけて
誰もがその場で登録できるデジタル名刺アプリを開発することにしました。
今回は学習の一環として、アプリ上の名刺はその日のみ有効で、
翌日には見ることができない（＝データ物理削除）仕様としました。
▼実際に動かしている様子
- トップページの
新規登録はこちらより名刺情報を入力・登録 -
好きな英単語として登録したIDをトップページに入力し、名刺を見るボタン押下 - 登録した情報を名刺カードとして見ることができます
本アプリはスマホユーザーを想定しており、
実装はスマホサイズで行っていますが、
PCで開いても違和感がないようにしております！
▼ソースコードはこちら
使用技術
- React + Vite
- TypeScript
- Chakra UI (v3)
- React Hook Form + Zod
- Supabase
- React Router
- Vitest / React Testing Library
- Firebase Hosting
- GitHub Actions（CI/CD）
大変だったこと
今回、ReactRouterやChakraUIなどを利用していて
main.tsx内でAppコンポーネントを複数ラップしていたので、
その影響により、Vitestのテストが最初うまく動作せず、
少々時間を使いました・・・。
▼その際の解決記事はこちら
工夫したこと
フォーム管理は以前からReact Hook Formを使っていますが、
今回からバリデーションチェックとしてZodと組み合わせてみました！
const CardSchema = z.object({
user_id: z.string().min(1, { message: "好きな英単語の入力は必須です" }).regex(/^[a-zA-Z]+$/, { message: "半角英語のみで入力してください" }),
name: z.string().min(1, { message: "お名前の入力は必須です" }),
description: z.string().min(1, { message: "自己紹介の入力は必須です" }),
skills: z.array(z.string()).min(1, { message: "好きな技術の入力は必須です" }),
github_id: z.string().nullable(),
qiita_id: z.string().nullable(),
x_id: z.string().nullable(),
});
type CardRegisterFormData = z.infer<typeof CardSchema>;
ZodはTypeScriptの相性ももちろん、
バリデーションごとにエラーメッセージのカスタマイズがしやすく、
React Hook Formと組み合わせることで堅牢なフォームチェックができるので
今回のようなReact×TSのアプリでは使わない手はない、という印象です。
ーーー
また、本アプリはUIライブラリとしてChakra UIを採用していますが、
名刺カードのスタイリングについてはClaude cadeを活用し、
一部整えてもらいました！（個人的にProプランに登録していたため）
ReactやTypeScriptのアウトプットをメインとしていることもあり、
スタイリングについてはAIを活用して開発効率化を図るのも一手かと思いました。
おわりに
ほとんど毎日PCを触っていて良い習慣付けができています。
次回の課題は、完全に自分が仕様を0から考えたアプリ開発となりますので、
再レンダリングなどパフォーマンスも考えた設計にしたいと思っています。
Tanstack Queryも使ってみようかな〜と思っていたりします。
継続的に頑張ります！！！
参考記事
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼