はじめに
こんにちは。
現在、ポートフォリオとして作ってみた「商品画像と商品名からAIが説明文を自動生成するアプリ」の改善をしています。
今回は、未実装のままになっていた、商品にカテゴリを付ける機能と入出庫を記録する機能のうち、カテゴリ機能を実装していきます。
この記事のゴール
- カテゴリ自体を追加、編集できるカテゴリ管理画面の実装
- 商品の登録、編集画面時にカテゴリを選択できる機能を実装
- 検索画面にカテゴリでの絞り込み機能を実装
カテゴリ機能の醍醐味、商品検索時のカテゴリでの絞り込みが最終ゴールです。
※今回の記事は実装前の設計・思考整理がメインです
現状と実装内容の整理
データベース
ER図
現状
商品と関連づいたカテゴリテーブルを作成済みです。
内容は、カテゴリIDとカテゴリ名のみのシンプルなテーブルになっています。
- id
- category_name
追加内容
-
カテゴリ自体がいつ作成・更新されたのかがわかる方がいい気がします。
created_at,updated_atカラムを追加しましょう。 -
カテゴリの作成者が分かった方が管理上役に立ちそうなので、一応追加しておきます。
created_byというカラム名を思いつきましたが一般的なのでしょうか？
更新の場合についてもupdated_byを追加します。
ググったところ、
created_byは一般的に使われる表現のようなので安心して次に進みます。
- リレーションは(商品：カテゴリ)はN:1になります。
カテゴリ自体が削除された場合、該当商品のカテゴリ欄はnullになるようにしようと思います。
あれ？商品が複数カテゴリを持てたほうがいい気もします。それに、大カテゴリ・中カテゴリなどのネスト構造も必要な気がしてきました。
…まずは最小機能として、商品当たり１カテゴリの設定が可能として進めます。
カテゴリ登録・編集画面
画面設計
①カテゴリの一覧を表示する画面、②カテゴリの新規登録をする画面、③既存カテゴリの編集をする画面が必要になりそうです。
画面遷移のフローです。
サイドメニュー上のボタンは一つで収めたいので、「カテゴリ管理」ボタンを押すと①の一覧画面へ遷移し、そこから②や③に移れるという流れにしようと思います。
画面イメージ
①カテゴリ一覧画面
②カテゴリ登録画面
③カテゴリ編集画面
登録・編集画面の情報量がかなり少ないので、一覧画面をSPA風にしてカテゴリの登録編集までできるようにするのがベストかもしれません。
ですが、カテゴリ機能に関してはサーバーサイドレンダリングを前提に実装を進めたいためこの画面設計で決定します。
バックエンド
カテゴリ管理で最終的に必要になる処理から考えてみます。
- カテゴリの全検索（一覧で必要）
- カテゴリ名での部分一致検索（カテゴリ検索で必要）
- カテゴリの作成・編集・削除
一見多そうに見えますが、Spring Data JPA(JPARepository)が基本的なCRUDを準備してくれているので、ロジックを一から書く必要はほぼありません。
作りたいクラスは、
Entity(Category.java)
Repository(CategoryRepository.java)
Contoroller(CategoryController.java)
Service(CategoryService.java)
です。
また、多すぎる文字数のカテゴリや重複したカテゴリが登録できないよう、DTOでのバリデーションも追加したいと思います。
改めてDTOの役割を検索すると、バリデーションンとしての役割のほかに、Entityそのものではなく必要な情報だけをやり取りすることができるというメリットもあるようです。
まとめ
大まかな設計ができたので、ここから具体的なコードの設計に入っていきます。記事が長くなってきたので次の記事に続きます。