ポートフォリオを見直してみた
こんにちは。
何もわからない状態から何とか作り上げたポートフォリオですが、落ち着いて見返すと「ここいやだな〜」という部分がたくさんあります。
このままではかわいそうなので一度課題を整理し、改修していくことを当面の指標にしたいと思います。
問題その1: UIが微妙
ホーム画面
本当は新規商品や在庫状況などをダッシュボードに表示してみたかったのですが、技術と時間が足りませんでした。
商品登録画面
商品登録のフォームが中央に寄っており縦長のため、通常操作でもスクロールが発生します。視線移動が多く不便です。
問題その2: UXが微妙
商品登録の流れ
現在、説明文生成ボタンを押した時点で商品情報（商品名・価格・数量）がDBに非公開の情報として保存されます。
同時に、商品情報の項目はロックされ、編集が不可になります。
保存ボタンを押していないのに情報が確定されてしまうことに違和感を感じます。
修正案としては、
- 生成ボタンクリック時にはDBに商品情報を保存しない。保存ボタンクリックですべての情報を同時に保存する。
- 生成ボタンクリック時に商品情報をDBに保存するが、説明文生成後も商品情報の編集を可能にし、保存ボタン押下時にUPDATEされるようにする。
の2つを思いつきました。
1については、AI生成された商品説明の原文をDBに保持しておくために、リレーションの関係上、先に商品のレコードが存在している必要があるという問題があります。
そのため、2の方法で修正を行いたいと思います。
商品情報を仮保存する際には非公開フラグを立て、保存ボタン押下で公開という流れは現状のままとなります。
ユーザー視点では、「保存ボタンを押すまでは商品情報を修正できる」という仕様になるので、自然な操作感になるのではないでしょうか。
（「説明文の生成は1商品につき一度まで」の仕様はそのままにしておきます）
問題その3: 機能が実装できてない
ホーム画面にあるボタンのうち「カテゴリ編集」「入出庫履歴」は機能が実装できていません。
カテゴリテーブルはDBに存在していますが、入出庫の記録を行うテーブルは未作成です。テーブル設計と入力画面の仕様を考えて実装していきます。
入出庫履歴テーブル(案)
- id
- product_id(外部キー)
- type(入庫/出庫)
- quantity
- reason(理由)
- created_at
問題その4: テストコードが皆無
実務では必須になってくると思いますが、今回のポートフォリオ作成では手を付けられていませんでした。
JUnit、Mockitoを用いてユニットテストから勉強していこうと思います。
問題その5: セキュリティとは
今回は外部APIを使用したので、環境変数を使用することでAPIキーの隠匿を行いました。
# Google Cloud認証設定
google:
credentials:
# 本番環境（Render）ではBase64エンコードした値を使用
base64: ${GOOGLE_CREDENTIALS_BASE64:}
Bcryptでのパスワード暗号化、基本的なバリデーションも実装しています。
ですが、以下については勉強不足を感じています。
- APIのレート制限(連打防止)
- CSRF対策
- XSS対策
- SQLインジェクション対策
これらを理解したうえで堅牢なアプリが開発できる人を目指していきたいです。
さいごに
以上のように、たくさん課題が見つかりました。
| 課題 | すること |
|---|---|
| UI改善 | ダッシュボードの実装 / レイアウト修正 |
| UX改善 | データフローの改善 /フロントの制約修正 |
| 未実装機能の追加 | カテゴリ管理・入出庫記録を実装 |
| テストコード実装 | JUnit / Mockito によるテスト追加 |
| セキュリティ対策 | CSRF / XSS 対策の整理 |
これらを修正していくだけでも、かなりの知識が増えるのではないでしょうか。勉強する内容が明確になったので、さっそく取り掛かっていきたいと思います。