はじめに
新規アプリを製作しました。
背景
絵を描く趣味の愛さんという女性の友人がいました。
彼女には悩みがありました。
- デスク周りを整えたいけど、何がいいかわからない
- Instagramとかで調べても部屋の雰囲気に合うかわからない
- お金が足りるか不安
そこで、
検索条件から自分の理想とするデスク周りを提案するアプリを作成しました。
メーカーに問わられず、商品を提案することで問題解決を行いました。
アプリ内容
このアプリでは以下のことができるようにしました。
- 予算、スペース、色から検索でき、条件に合致したものを提案します。
ほかのアプリとの差別化
一般的なアプリ
- 商品を探す→商品単位で比較
このアプリ
- 検索条件からデスクセット単位で提案→セット内の商品を確認
使用技術
- Next.js
- React
- Tailwindcss
- Vercel
- Supabase
- Vitest
- GitHub Actions
選定理由
Next.js
ReactベースでWebアプリケーションを構築でき、
Server Component / Client Componentの使い分けを実践できるため採用しました。
また、Server ComponentやSSR/SSGなどを利用することで、
CSRのみの場合と比較し、SEOに適したページができるためです。
Tailwindcss
CSSは自由にカスタマイズしやすく、デザインしやすいためです。
Supabase
PostgreSQLを利用でき、DBとStorageをまとめて管理できるため採用しました。
Vitest
React Testing Libraryと組み合わせて、コンポーネントのユーザー操作をテストするために採用しました。
システム構成
- フロントエンド：React + TypeScript
- UI：Tailwindcss
- DB：Supabase
- テスト：Vitest
- CI/CD：GitHub Actions
それぞれの画面役割
ホーム画面
アプリの最初は、Home画面になります。
このアプリの趣旨やどんな人にお勧めするか、ターゲットを明確にしています。
検索条件から、自分の情報を入力します。
予算、スペース、色で選び、あなたの理想のデスク周りを提案します。
検索結果画面
検索結果画面では、条件で選んだ候補が表示されます。
一覧で出るので、簡単な比較もできます。
もし気になるセットがあれば、「詳細を見る」ボタンを押して、詳細画面に遷移します。
詳細画面
詳細画面では、商品のセットの中身が表示されます。
各商品のリンクを貼っているので、気になれば、各サイトから購入していただけます。
ER図
各セット名に対し、各商品を紐づけるように設定しました。
workspace_sets
↓
workspace_items
workspace_sets
| Name | Type | option |
|---|---|---|
| id | int8 | |
| title | varchar | |
| budget | int8 | non-null |
| space | int8 | non-null |
| color | varchar | non-null |
| use_case | varchar | non-null |
workspace_items
| Name | Type | option |
|---|---|---|
| id | int8 | |
| workspace_set_id | int8 | |
| category | varchar | non-null |
| item_name | varchar | non-null |
| image_url | varchar | non-null |
| url | varchar | non-null |
こだわったこと
Server Component / Client Componentの使い分け
検索フォームではユーザー操作が必要なため、Client Componentとしました。
一方、検索結果の取得やページの表示はServer Componentを利用しています。
検索条件をURLパラメータで管理
検索条件をURLに保持することで、検索結果から詳細画面へ遷移した場合でも、検索条件を維持した状態で検索結果画面へ戻れるようにしました。
アプリ製作で苦労したこと
検索条件を画面内の状態として管理していたため、検索結果から詳細画面へ遷移し、検索結果画面へ戻った際に検索条件を保持できない問題が発生しました。
検索 → 詳細 → 戻るという操作で検索条件が失われる問題に遭遇しました。
検索条件をURLパラメータとして管理する方式に変更することで解決しました。
- Next.jsでsearch/[id]/pageからsearch/pageに戻った際の問題
商品画像を利用する場合、著作権や各サービスの利用規約を確認する必要があります。
また、商品が製造中止になったさいの対応が一つずつ必要になります。
時間がかかってしまうので、AIで画像を作成し固定しておきます。
そのほかの苦労したポイントは以下の記事にまとめています。
- CI/CDでのエラー話
- Supabase Storageから取得した画像が表示されない問題
- Git clone直後におきたImportエラーになる件（Cannot find module '' or its corresponding type declarations）
今後の改善
現在はSupabaseのテーブルに直接商品情報を登録しています。
そのため管理者にとってデータの登録に手間がかかります。
- 管理者画面からの商品登録
- 商品情報の更新・削除
- 商品の販売終了への対応
- 検索条件の拡張
上記の開発を追加することで管理者が扱いやすくなります。
開発を振り返って
フロントエンド領域を中心に、
Next.jsのServer Component / Client Componentの使い分け、URLパラメータを利用した検索状態の管理に取り組みました。
また、VitestによるテストやGitHub ActionsによるCI/CDまで実装し、
アプリケーションの実装だけでなく、テスト・デプロイまで含めた開発を経験しました。
今後は管理者画面を追加し、商品データを継続的に管理できる構成へ発展させたいと考えています。