---
title: 商品追加画面
screen: ./product-new.png?highlight=[[25,92,243,50],[25,143,244,44],[24,188,244,46],[23,236,245,87],[297,91,411,349],[16,33,171,41]]
---

```uiflows
[商品一覧画面](./index.html)
商品追加ボタンをクリック
==> 商品追加画面

[`/product/new`をURLとして直に入力]
==> 商品追加画面

[商品追加画面]
戻るボタンクリック
==> 商品追加画面
追加ボタンクリック
==> 商品追加画面
```

```uiflows
[戻るボタン]
クリック
==> 商品一覧画面

[追加ボタン]
クリック
==> JSバリデーション

[商品一覧画面](./index.html)

[JSバリデーション]
OK
==> 商品追加API
エラー
==> エラーメッセージ表示

[商品追加API]
追加成功
==> 商品一覧画面
```

## 初期描画

-   各入力欄は空
-   type はマスタデータから取得
    -   初期値は未選択の状態

## 機能詳細

-   画像はクリックするとファイル参照ダイアログを表示