Hexabaseで商品マスタの作成と編集を行う（その2：ステータスの設定を行う）

[Hexabase](https://www.hexabase.com/)は企業においても安心して利用できるBaaS（Backend as a Service）を提供しています。[ヒーローズ・リーグ 2022](https://heroes-league.net/)に協賛していることもあり、初めて触る方が少しでも早く使い慣れてくれるように、使い方を解説していきます。

今回はHexabaseで商品マスタを作成、編集するWebアプリケーションを開発します。[前回は新しくデータベースを作成し、項目を作成するまでの流れを解説しました](https://qiita.com/goofmint/items/131ab9dcb96825d1364b)ので、今回はステータスの設定について解説します。

## ステータスとは

ステータスはデータベースのデータの状態を管理する情報になります。例えば今回の商品マスタを管理する際には、以下のようなステータスを想定しています。

```mermaid
flowchart TB
    販売前 --> 予約中
    販売前 --> 販売中
    販売中 <--> 販売休止
    予約中 --> 販売中
    予約中 --> 販売休止
    販売中 <--> 販売終了
```

このようにステータスを定義することで、販売前から予約中には進めても、他のステータスから予約中に戻すことはできないなどのステータス管理ができるようになります。適切にステータスを定義、管理することでシステム上のデータ齟齬が発生するのを防いだり、システム上の不具合を防止できます。

では、Hexabaseでのステータス設定について解説します。

## ステータスを作成する

任意のデータ行を右クリックして、 **詳細を表示する** をクリックします。

![0020_app_hexabase_com_-_0819170336.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/f1ec3444-cd56-a483-ee50-15915a73bfdd.jpeg)


出てきたモーダルで、上にあるステータス横の鉛筆アイコンをクリックします。

![0020_app_hexabase_com_-_0819170428.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/f0bb790d-0acb-8242-5630-c5fbc8b01300.jpeg)


そうすると、以下の画像のようなステータス編集画面が出てきます。

![0020 app.hexabase.com - 0819170433.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/1dca21df-1eab-a0c7-5323-23d267e38a0a.jpeg)


ステータス右側にある三点リーダーをクリックすると、編集情報が出てきます。ここではステータス名（日英）やID、色を設定できます。

![0020 app.hexabase.com - 0819170436.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/3cd8c6fc-25e0-26e7-09ec-3243db984da3.jpeg)


今回は上記に示したように全部で5つのステータスを作成します。色は自由に指定してください。

| ステータス名（en） | ステータス名（ja） | ステータスID |
|------------------|------------------|------------------|
| Before | 販売前 | Before |
| Reserve | 予約中 | Reserve |
| Sales | 販売中 | Sales |
| Pause | 販売休止 | Pause |
| End | 販売終了 | End |

ステータスを追加する場合には、右上にある **ステータスの追加** をクリックしてください。

![0020_app_hexabase_com_-_0819170438.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/4e2086e7-3bf6-60da-d175-5e03262767d5.jpeg)


追加したステータスはマウスドラッグで移動できます。

![0020 app.hexabase.com - 0819170440.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/daf3fe19-cb04-4982-ff78-3d73f04ba715.jpeg)



最終的に、以下のようなステータスの並びにして、保存ボタンをクリックします。

![0020 app.hexabase.com - 0819170443.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/7c6fdb3f-5424-b701-71dd-849648a3a623.jpeg)



## ステータス変更アクションの追加

続いてステータスを変更するアクションを追加します。Hexabaseではステータスを直接変更するのではなく、アクションを通して変更します。例えば予約開始というアクションを実行すると、ステータスが予約中に変わるといった具合です。これによって不正なステータス差し戻しを防止したり、そのアクションを実行できるロールを指定できます。

任意のデータ行を右クリックして、 **詳細を表示する** をクリックします。

![0020_app_hexabase_com_-_0819170336.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/f1ec3444-cd56-a483-ee50-15915a73bfdd.jpeg)


右上にある鉛筆アイコンをクリックします。

![0020_app_hexabase_com_-_0819170445.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/84fe9ff7-83bc-b9c7-e12e-44296cc9ebea.jpeg)

そうすると右側のメニューが開いて **ステータスの変更** が確認できるはずです。

![0020_app_hexabase_com_-_0819170450.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/1d348299-eb49-341d-e71a-7c8f0de05b36.jpeg)

すでに項目があれば、その右側を2回クリックして、鉛筆アイコンをクリックします。もし項目がなければ右上のプラスアイコンをクリックしてください。

![0020_app_hexabase_com_-_0819170452.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/6d44a6c5-08eb-0c00-9ed3-53e3f788fb79.jpeg)

新しいメニュー追加のフォームが表示されますので、追加していきます。この時に注意して欲しいのは、現状のステータスに応じたメニューを追加するということです。

![0020_app_hexabase_com_-_0819170455.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/e4816f59-4d50-063a-d5ed-e33c8050e36c.jpeg)


つまり、今回の場合は以下のようになります。

### 現在のステータスが販売前

以下の2つのメニューを追加します。

| メニュー名(en) | メニュー名（ja） | アクションID | このメニューの説明を入力します | ステータスをどこへ遷移させますか？ |
|----------------|----------------|----------------|----------------|----------------|
| Start Reservation | 予約開始する | startReservation | 予約開始します | 予約中 |
| Start sales | 販売開始する | startSales2 | 販売開始します | 販売中 |

### 現在のステータスが予約中

| メニュー名(en) | メニュー名（ja） | アクションID | このメニューの説明を入力します | ステータスをどこへ遷移させますか？ |
|----------------|----------------|----------------|----------------|----------------|
| Stop sales | 販売休止する | stopSales | 販売休止中です | 販売休止 |
| Start sales | 販売開始する | startSales | 販売開始します | 販売中 |

### 現在のステータスが販売中

| メニュー名(en) | メニュー名（ja） | アクションID | このメニューの説明を入力します | ステータスをどこへ遷移させますか？ |
|----------------|----------------|----------------|----------------|----------------|
| Stop sales | 販売休止する | stopSales2 | 販売休止にする | 販売休止 |
| End Sales | 販売終了する | endSales | 販売終了します | 販売終了 |

### 現在のステータスが販売休止

| メニュー名(en) | メニュー名（ja） | アクションID | このメニューの説明を入力します | ステータスをどこへ遷移させますか？ |
|----------------|----------------|----------------|----------------|----------------|
| Back to Sales | 販売中に戻す | backSales | 販売中に戻します | 販売中 |
| End Sales | 販売終了する | endSales2 | 販売終了にします | 販売終了 |

### 現在のステータスが販売終了

| メニュー名(en) | メニュー名（ja） | アクションID | このメニューの説明を入力します | ステータスをどこへ遷移させますか？ |
|----------------|----------------|----------------|----------------|----------------|
| Revival sales | 復活販売する | revivalSales | 復活販売させます | 販売中 |

## 管理画面でのステータス更新

管理画面ではデータの詳細画面にて、ステータス変更が選択できます。このステータス変更は、あるステータスが取れる（かつ権限がある）ステータス変更のみが表示されます。

![0020_app_hexabase_com_-_0819170503.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/ac3633bb-f484-d82c-81ad-b0c50d3b32da.jpeg)

なお、データベースの設定にて **ステータスの直接編集を許可する** を有効にしていると、これまで説明してきたようなワークフローに関係なくステータス更新ができるようになるので注意してください（下の画像参照）。

![スクリーンショット 2022-08-19 16.59.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197026/a99bfb30-4d48-936e-ea7d-fe008cc09d10.png)

## まとめ

ここまでの作業でHexabaseにおけるデータベースの設計と、ステータス設計が完了となります。次回はTypeScript SDKを使って、自作のWebアプリケーションからHexabaseを操作してみましょう。

[株式会社 Hexabaseー法人向けクラウドシステム『Hexabase』ー](https://www.hexabase.com/)