はじめに
初めまして、UX/UIデザイナーとして活動しているKikoといいます。
デザインエンジニアになることを目標に今年の1月からReactの勉強を始めました！
自分の簡単な自己紹介はこちら👇
何を作ったのか
TypeScriptで開発する名刺アプリをテーマに、フロントエンドとバックエンドの構築に取り組みました。
概要
前回の課題からアップグレードし、DBの設計にがっつり取り組みました。
簡単な画面構成はこんな感じです
mockup
バリデーションが出たり、実際に登録後は個人データにアクセスできる仕組みを実装しました。
開発環境・技術スタック
- フロントエンド：React(React hook form、React Router）、TypeScript
- バックエンド：Supabase
- デプロイ：Firebase Hosting
- CI/CD：GitHub Actions
- ライブラリ: chakraUI v2
- 環境構築（Vite）
- テスト：Jest
一番苦戦したところ
今回一番苦戦したのは、DB周りの設計や概念の理解でした。
デザイナーとしてUIをFigmaで作る経験から、コンポーネント化の概念は比較的掴みやすかったです。
しかしテーブル同士を接着する中間テーブルの概念がなかなか捉えられず、かなり悩みました。
「なぜ一つのテーブルにまとめないのか？」「そもそもDBとは何か？」という根本的な疑問からスタートし、初めてデータベースの概念に触れる機会となりました。
最終的にはFigJamで図解しながらデータの紐付けを整理し、時間をかけて理解を深めていきました。
楽しいと思えたところ
React Hook FormやReact Routerの便利さを実感しました。
特に、バリデーションや画面遷移の処理がシンプルかつ合理的に設計できるため、開発効率が大きく向上しました。
日頃figmaでUIを作る上でvariable（今回のアップデートでもう滅びましたが）等のstate管理の理解が実際に実装してみることでグッと深まりました。
NEXT STEP
次の課題でいよいよ自分のアプリを個人開発で作ることになります。
作って終わりではなく、きちんと運用保守する価値のあるようなものを作れたらいいなと思います✊