---
title: 商品編集画面
screen: ./product-edit.png?highlight=[[32,99,232,40],[32,141,232,48],[32,191,232,43],[32,236,232,86],[295,99,402,333],[16,40,160,34]]
---

```uiflows
[商品一覧画面](./index.html)
商品IDのリンクをクリック
==> 商品編集画面

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

[商品編集画面]
戻るボタンクリック
==> 商品編集画面
保存ボタンクリック
==> 商品編集画面
```

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

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

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

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

[商品編集API]
保存成功
==> 商品一覧画面
```

## 初期描画

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

## 機能詳細

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