Querierで名簿管理画面を作成する②

# 前回の続き
社内向けの管理画面を、柔軟かつ速く作成することができるローコードツールである **Querier(クエリア)** を使用して社内名簿管理画面を作成することにしました。

[前回](https://qiita.com/matsuko003/private/5e7ca48a1aa1efb5de0c)はデータ連携や実際に画面にデータを表示する以下の手順をまとめ、投稿しました。
 - データ連携　
 - 画面作成
 - データ表示
 
前回作成した画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/8fc7fbe0-a4e0-de5c-a82d-2476c83f1ca4.png)

 
現段階では、クエリア上でGoogleSpreadsheetのデータを確認することしかできないので、今回はユーザーの追加や更新作業を行えるよう、以下の操作の実装方法について記載します。
 - 追加
 - 更新
 - 削除
 - 検索

# ユーザーの追加
テーブルのデータにユーザーを追加する機能を実装します。
氏名やフリガナの入力欄を用意し、追加ボタンをクリックすることでデータを追加するイメージです。
①まずは画面のレイアウトを整えます。
コンポーネントの「カラム」を選択し、画面中央にドラッグ&ドロップします。
![無題22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/b40afacf-7322-5d8d-1701-1d19ae06e310.png)

②データをカラムの左側にドラッグ&ドロップします。
![無題23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/9add1c5b-63e9-1da4-5a58-ff372b1fdf15.png)

③カラムの左側にデータが移動しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/febdaa2e-7c24-3d6e-1dbb-9946432daa3c.png)

④ここで、カラムの右側にユーザー追加のコンポーネントを追加していきます。
ユーザー情報用のインプット×3、ラジオボタン×1、ユーザー追加用のボタン×1 をドラッグ&ドロップします。
![無題24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/c878db9f-465f-19d5-ca6e-9393d643c76a.png)

⑤追加したコンポーネントをクリックし、インプット×3、ラジオボタン×1 に対して、エディター画面で以下のように詳細を入力します。(ボタンは次の工程で設定)
| 項目 | input1 | input2 | input3 | 
|:-:|:-:|:-:|:-:|
| ラベル  | 氏名  | フリガナ  | メールアドレス  |
| タイプ  | Text  | Text  | Email  |
| 必須  | チェック | チェック  | チェック  |
| パターン  | ―  | ―  | Email  |

| 項目 | radio1 | 
|:-:|:-:|
| ラベル  | 属性  |
| Values  | ["社員", "パート"]  |
| Default value  | 社員 |
| 必須  |  チェック |
 - ラベル・・・画面に表示する名前
 - タイプ・・・インプットのタイプ(Text、Email、Numberなど)
 - 必須・・・必須項目か否か
 - パターン・・・Email、URLなどを選択でき、入力値がこのパターンから外れているとエラーメッセージがでる
 - Values・・・ラベルの選択肢
 - Default value・・・初期値

また、今回は設定しませんでしたが、Min length、Max length(最小値、最大値)を設定することで、入力のミスを減らす工夫もできます。
![無題25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/14f8afbb-7587-5f0c-0128-5cb6315eeb34.png)

⑥⑤で設定したユーザーの情報を追加するデータフローを作成します。
このデータフローをボタンに割り当てることで、追加ボタンが機能します。
まず、データフローリストの新規作成をクリックし、GoogleSpreadsheetのアイコンをクリックします。この時、データフローの名前も`append`に変更しておきます。
![無題26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/b102ac3c-8f1b-ffd0-ded8-1e96d1420def.png)
![無題27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/99cbbd70-7e8e-70f1-4558-e29770dbcf27.png)

⑦データフローのアクションで`Append values`を選択し、シート名を入力します。
次にパラメーターを追加するをクリックして、データのどの列にどのインプットの値を追加するか設定します。
![無題28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/2e38afcf-89fd-5fe7-703c-c75102c727b4.png)

パラメーターの上段(key)にはデータの列名、下段(value)には⑤で設定したインプットの値を設定します。
| 項目 | パラメーター01 | パラメーター02 | パラメーター03 | パラメーター04 | 
|:-:|:-:|:-:|:-:|:-:|
| 上段(key)  | 氏名 | フリガナ | メールアドレス | 属性 |
| 下段(value)  |{{ input1.value }}|{{ input2.value }}|{{ input3.value }}|{{ radio1.value }}|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/f63c5d3f-4bde-605a-89db-53920f1865c8.png)

さらに、成功時に実行するアクションを設定します。
![無題33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/e880063b-6f3a-76c7-ab4b-b5578f5c21ba.png)
イベントを追加するをクリックし、実行するアクションに`データフローの実行`、データフローに`dataflow1`を設定します。
これを設定することで、ユーザー追加ボタンを押下後、リアルタイムで追加した情報がテーブルに反映されるようになります。
![無題34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/52293966-db3f-8020-7d13-0ee86cd7238c.png)

⑧ボタンの詳細を設定します。
ボタンのコンポーネントをクリックし、エディター画面で以下のように入力します。
| 項目 | button1 | 
|:-:|:-:|
| ラベル  | 追加  |
| 無効にする条件  |  {{ !input1.value \|\| !input2.value \|\| !input3.value \|\| !radio1.value }} |

無効にする条件には`氏名、フリガナ、メールアドレス、属性のインプットのどれか1つでも空欄の時ボタンを押せないようにする`という条件を入力しました。

最後に⑦で作成したデータフローをボタンに設定します。
イベントを追加するをクリックします。
![無題29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/87392b54-0cca-f92e-cfca-515862a22e2c.png)
実行するアクションに`データフローの実行`、データフローに⑥⑦で作成した`append`を設定します。
![無題30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/6c36660c-9994-4f18-8c2e-4652a47fd3f5.png)

⑨ユーザー追加ボタンが完成しました。右上のプレビューボタンからプレビュー画面に遷移して、動作確認を行います。

まずはエラーの確認から行います。
氏名、メースアドレス、属性に値を入力し、フリガナだけ空欄にしてみたところ、追加ボタンがグレーになり、クリックできなくなっています。
必須項目を空欄にしたことで、エラーの文言が表示されたのと、
ボタンの無効にする条件が機能し、ボタンが押せなくなりました。
![無題31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/14450c72-f3c7-c218-d847-1c9bed7f056e.png)

正常操作の確認を行います。
上記の画面のままフリガナ欄に値を入力したところ、エラーの文言が消え、ボタンがクリックできるようになりました。
![無題32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/2fd79944-aa50-9ccf-4f72-5190333c1370.png)

追加ボタン押下後、左側のテーブルに追加した情報が反映されました。
![無題35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/f598bd08-012d-47cc-46fc-3d101d5186a2.png)

GoogleSpreadsheetも確認すると、問題なくデータが反映されていました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/449843f9-8b6c-8b34-3baf-650f6ff352bd.png)


### メールアドレスの重複を禁止する
社内名簿の場合、ユーザーIDやメールアドレスなど一意のデータとして管理したい項目がいくつか存在すると思います。それを考慮して、ユーザーを新しく追加する際、すでにデータに存在しているメールアドレスは登録できない仕様を追加しました。

①データフローの`append`にアクションを追加します。
`action1`の上の＋ボタンをクリックし、GoogleSpreadsheetのアイコンをクリックします。
![無題36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/df194681-51b9-ea56-48de-98a51f669643.png)

②データフローのアクションで`Get values`を選択し、シート名を入力します。
次にフィルターを追加するをクリックして、フィルターの条件に`==`、keyに`メールアドレス`、valueに`{{ input3.value }}`を入力します。
![無題37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/2f51baaf-595d-3052-08cc-6a372ac65927.png)
上記でやっていることは、GoogleSpreadsheetでイメージをすると以下のようなイメージです。全体の名簿を、メールアドレス列が`{{ input3.value }}`と同じものでフィルターしています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/4a0e30d2-580b-a929-36a0-8fff2c85c673.png)

③次に②のフィルターの結果を判定するコードを入力します。
`action2`と`action1`の間の＋ボタンをクリックし、JavaScriptのアクションを挿入します。
![無題38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/7dbf4085-9739-0231-0e45-5510fcca0e84.png)

④スクリプト枠内に以下のコードを入力します。
```
if ({{ action2.data.length }} !== 0) {
throw Error("すでに存在しています。")
}
```
追加したいメールアドレスでフィルターした結果が、0行の時は`同じメールアドレスが存在していない`ということなので、何もしない。
1行以上の時は`同じメールアドレスが存在している=重複している`のでエラーメッセージを表示するコードになっています。
![無題39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/70101c28-87ec-277b-1c49-1b0e054225ff.png)

⑤メールアドレスの重複をNGにするデータフローが完成しました。
試しに同じメールアドレスを追加しようとすると登録できず、編集画面でエラーが表示されています。
![無題41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/94202dfa-a41e-de29-e01f-133e80b30935.png)


# ユーザーの更新
テーブルのユーザー情報を更新する機能を実装します。
更新の流れは、テーブルの中から更新したい行をクリック→インプットに新しい情報を入力→更新ボタンを押下する というイメージです。
①追加の作業と同様に、インプット×3、ラジオボタン×1、ユーザー更新用のボタン×1 を追加インプットの上にドラッグ&ドロップします。
また、追加と更新のレイアウトを区切るためにボーダー×1を更新ボタンの下に挿入しました。
![無題42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/6a57b9bb-0765-5a5d-a081-d17732bf10de.png)

②追加したコンポーネントをクリックし、インプット×3、ラジオボタン×1 に対して、エディター画面で以下のように詳細を入力します。(ボタンは次の工程で設定)
| 項目 | input4 | input5 | input6 | 
|:-:|:-:|:-:|:-:|
| ラベル  | 氏名  | フリガナ  | メールアドレス  |
| タイプ  | Text  | Text  | Email  |
| Default value  | {{ table1.selectedRow.data.氏名 }}  | {{ table1.selectedRow.data.フリガナ }}  | {{ table1.selectedRow.data.メールアドレス }}  |
| 必須  | チェック | チェック  | チェック  |
| パターン  | ―  | ―  | Email  |

| 項目 | radio2 | 
|:-:|:-:|
| ラベル  | 属性  |
| Values  | ["社員", "パート"]  |
| Default value  | {{ table1.selectedRow.data.属性 }} |
| 必須  | チェック |

ユーザー追加との変更点はDefault valueに`{{ table1.selectedRow.data.〇〇(列名) }}`を設定していることです。
これで、テーブル内の更新したい行をクリックすると、その行の項目が自動でインプット欄に表示される設定になります。

例）テーブルの田中太郎の行をクリックするとインプット欄に田中太郎のデータが自動表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/821c1abb-11d0-1ba9-528f-2635a451597d.png)

③更新ボタンに設定するデータフローを新しく作成します。
データフローリストの新規作成をクリックし、GoogleSpreadsheetのアイコンをクリックします。この時、データフローの名前を`update`に変更しておきます。
![無題43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/8b6b041f-5092-5b54-c1a2-de5c95499378.png)

④データフローのアクションで`Update values`を選択し、シート名を入力します。
次にユーザー追加時と同様に、パラメーターを追加するをクリックして、データのどの列にどのインプットの値を追加するか設定します。
![無題44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/ba40c562-d546-8a62-9125-249e0d5850ff.png)
| 項目 | パラメーター01 | パラメーター02 | パラメーター03 | パラメーター04 | 
|:-:|:-:|:-:|:-:|:-:|
| 上段(key)  | 氏名 | フリガナ | メールアドレス | 属性 |
| 下段(value)  |{{ input4.value }}|{{ input5.value }}|{{ input6.value }}|{{ radio2.value }}|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/1a06997b-e7ec-3722-069d-421b5b61bb5e.png)

さらに、フィルターを追加するをクリックして、フィルターの条件に`==`、keyに`氏名`、valueに`{{ table1.selectedRow.data.氏名 }}`を入力します。
このフィルターを追加することで、現在選択しているテーブルの行に対してインプットの値を上書き(更新)する処理が動きます。
![無題46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/9e4b4579-3d6e-e730-f9c4-a42b1a4521ca.png)

最後に、ユーザー追加時と同様、成功時に実行するアクションを設定します。
イベントを追加するをクリックし、実行するアクションに`データフローの実行`、データフローに`dataflow1`を設定します。
これを設定することで、ユーザー更新ボタンを押下後、リアルタイムで更新した情報がデータに反映されるようになります。
![無題45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/d8e3af54-3125-8a8c-7b8a-8e21d9d1a120.png)

⑤④で作成したデータフローをボタンに割り当てます。
ボタンのコンポーネントをクリックし、ラベルを`更新`に、イベントを追加するをクリックし、実行するアクションを`データフローの実行`、データフローを`update`に設定します。
※更新ボタンの色は、わかりやすくするために追加ボタンと違う色を設定しました。
![無題47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/6c8b32fc-ea59-60f8-af66-f7ff690a0fad.png)

⑥ユーザー更新ボタンが完成しました。右上のプレビューボタンからプレビュー画面に遷移して、動作確認を行います。

試しに、3行目の佐藤健さんのフリガナを`サトウケン`→`サトウタケル`に変更して更新ボタンを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/3c63795b-f7a2-c663-7a6d-bb3eb80fe4d2.png)
問題なく更新できました。
![無題48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/202b7051-c909-aaff-306f-4be2fa70c3dc.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/5ae68182-7f07-fe9f-010e-2d432f6f1676.png)

# ユーザーの削除
テーブルのユーザーを削除する機能を実装します。
削除の流れは、ユーザー更新と同様に、テーブルの中から削除する行をクリックし、削除ボタンを押下するイメージです。
ただし、ワンボタンで削除できてしまうと誤操作の恐れがあるため、ポップアップを挟んで削除する方法を採用します。
①コンポーネントから`モーダル`をドラッグ&ドロップし、更新ボタンの下に挿入します。
![無題49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/8b6e0ee4-bb51-37aa-8bfc-f64a67df28b5.png)

②モーダルをクリックするとポップアップが表示されるので、テキストとボタンをドラッグ&ドロップで挿入します。
![無題50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/ffca838f-5ca9-541d-f24c-5d5b0622c054.png)

③挿入したテキストをクリックし、エディターのテキストに`{{ table1.selectedRow.data.氏名 }}を削除してよろしいですか？`と入力します。
`{{ table1.selectedRow.data.氏名 }}`で現在テーブルで選択しているユーザーの氏名が表示されます。
確認のメッセージなのでサイズは`large`に変更しました。
![無題51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/8b6fb4ce-0cfa-fac0-6073-63826a522b12.png)

④削除ボタンに設定するデータフローを新しく作成します。
データフローリストの新規作成をクリックし、GoogleSpreadsheetのアイコンをクリックします。この時、データフローの名前を`delete`に変更しておきます。
![無題52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/af89ed32-8576-2706-e826-628f054f153c.png)

⑤データフローのアクションで`Delete values`を選択し、シート名を入力します。
次にフィルターを追加するをクリックして、フィルターの条件に`==`、keyに`氏名`、valueに`{{ table1.selectedRow.data.氏名 }}`を入力します。
現在テーブルで選択している氏名でフィルターをかけることで、その行の削除を行うことができます。
![無題53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/0d1296bd-a2e6-5a1b-7ab3-6d9ad9289f9d.png)

さらに、成功時に実行するアクションを設定します。
イベントを追加するをクリックし、実行するアクションに`データフローの実行`、データフローに`dataflow1`を設定します。
これを設定することで、削除ボタンを押下後、リアルタイムでデータが削除されたテーブルが反映されるようになります。
![無題54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/fa7d5a64-9bdb-42b3-9bec-344ab29bed01.png)

⑥⑤で作成したデータフローを削除ボタンに設定します。
モーダル内のボタンをクリックし、ラベルに`削除`、イベントを追加するをクリックし、実行するアクションに`データフローの実行`、データフローに`delete`を設定します。
![無題55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/f577ac9a-6d8e-456e-aeae-e748f7679ef8.png)

⑦最後にモーダルの設定を行います。
モーダルをクリックし、エディターのボタンラベルに`{{ table1.selectedRow.data.氏名 }}を削除する`を設定します。これで、テーブルで現在選択しているユーザーの氏名がボタンに表示されるようになります。
タイトルには`削除確認画面`と入力します。ポップアップ内のタイトルを変更することができます。
※モーダルの色は分かりやすいように赤色に変更しました。
![無題56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/6d1f35d5-05ba-b326-ce45-a819f3e22ff1.png)
![無題57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/22fea3ff-6a62-ef71-f634-3c775b058bb8.png)

⑧ユーザー削除ボタンが完成しました。右上のプレビューボタンからプレビュー画面に遷移して、動作確認を行います。

試しに、テスト太郎さんを選択し、「テスト太郎を削除する」を押下します。
![無題58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/b15b6f60-f49c-96c8-4811-cd0b7739efc7.png)

確認のポップアップが表示されたので、削除ボタンを押下します。
![無題59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/b07fedce-fa05-298e-7d40-ca18294b5866.png)

削除が完了し、ポップアップを×ボタンで閉じます。
テーブルを参照するとテスト太郎さんのデータが問題なく削除されていました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/8b852f92-51f6-1872-1bdf-9724161dea7e.png)

# ユーザーの検索
テーブルのユーザーを検索する機能を実装します。
検索欄を作成し、氏名を入力すると、一致するデータのみがテーブルに表示される というイメージです。
①コンポーネントからインプットをドラッグ&ドロップでテーブルの上に挿入します。
エディターのラベルに`氏名で検索`と設定します。
![無題60.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/a2e19ff2-4e24-532c-8415-0bd39ee5f757.png)

②現在テーブルを表示しているデータフローにフィルターの機能を追加します。
`dataflow1`をクリックします。
![無題61.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/e0cd1c64-bded-824e-812c-3efe280e0976.png)

③`action1`をクリックし、フィルターを追加をクリックします。
フィルターの条件に`contains`、keyに`氏名`、valueに`{{ input7.value }}`を設定します。また、左側の`変更発生時に自動で実行`にチェックを入れます。
条件を`==`でなく`contains`にすることで、苗字だけ一致、名前だけ一致などの部分一致に対応することができます。
※`{{ input7.value }}`は①で追加した検索欄のインプット
![無題62.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/c7afb2b9-3c4c-6361-c81c-99cef2ba8aad.png)

④検索機能が完成しました。上のプレビューボタンからプレビュー画面に遷移して、動作確認を行います。

試しに、検索欄に`田中`と入力すると、下のテーブルには氏名が`田中`のユーザーのみ表示されました。
![無題63.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/0f1f1568-06af-0928-f072-7248b32c0aa1.png)

検索を終了したいときは、検索欄を空欄にすると元のテーブル全体が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/13275437-dc78-9c8a-646d-e55d93f92c9d.png)


# 完成
社内名簿管理画面が完成しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/f9050270-70ac-6d05-f5d4-d3b6f47c99d2.png)
※バランスを整えるために、テーブルの高さを10→20に変更しました。
![無題64.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128319/1a4533fd-2872-6a90-7eb1-9cdf78891cb8.png)

# おわりに
記事を作成するにあたって、参考になるQiitaの記事があまりなかったので、[公式のガイド](https://docs.querier.io/docs)を参考に画面を作成しました。
また、ガイドを読んでもわからなかった箇所は、画面右下の問い合わせチャットから不明な点をすぐに質問でき、丁寧で早急な対応をしていただきました。ありがとうございました。

# 前回の記事
https://qiita.com/matsuko003/private/5e7ca48a1aa1efb5de0c