バリデーションを攻略する

どうもこんばんは、みかんです。

**！！！！とつぜんですがたいせつなおしらせ！！！！**

2020年1月27日
App Maker の提供終了に向けた対応のご案内
https://support.google.com/a/answer/9682494?p=am_announcement&visit_id=637157414793613981-426262357&rd=1


??!???!?!?!???!?

残念ながら2021年1月19日には終了してしまうそうです(涙)
移行先はAppSheetかApp EngineかGoogleフォームだそうです・・・

消すのは忍びないので記事は残して置きますが、何かの間違いじゃ無い限り役に立つことはないでしょう・・・


**！！！！おしらせはおわりです！！！！！**

今回は「バリデーションを攻略する」という題で書いてみます。
下記ステップでやっていきます。

* 1 下準備
* 2 バリデーションについて
* 3 ウィジェットバリデーション
* 4 onValidate
* 5 フィールドバリデーション

# 1 下準備

今回は「Blank Application」に最低限の設定をしながらバリデーションを解説していきます。

|![ap01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/97b0d1f7-1e26-3b85-9e6d-85bed08798d5.png)|
|:-:|

# 2 バリデーションについて

App Makerにおけるバリデーションですが、種類として次の3つがあります。

- ウィジェットバリデーション
- onValidate
- フィールドバリデーション

そして、入力ウィジェットの値が変更されたタイミングで、次の順序でバリデートされます。

ウィジェットバリデーション → onValidate → フィールドバリデーション

それぞれ見てみましょう！

# 3 ウィジェットバリデーション

まずはウィジェットバリデーションを見るために、テキストボックスを配置してみます。
また、そのテキストボックスのバリデートが通っているかどうかを示すプロパティ**valid**を参照するラベルも一緒に置いてみます。

|![ap02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/8d90ec2f-f40a-235e-9487-ad04dd2c9e28.png)|
|:-:|

とりあえず実行してみます。

|![ap03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/87a752de-cf9d-c252-2c2a-badc32596b1b.png)|![ap04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/b41724a4-01b2-bec1-ad9c-4c8498e6f79f.png)
|:---:|:---:|


特に何も条件を設定していないので、常にtrueですね。

|![ap05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/4588d4c6-0d02-86b0-0205-5cbbbbe3311d.png)|
|:-:|

ではどこに設定があるかというと、プロパティエディタの**Data Validation**にあります。
それっぽいのが並んでいますね。requiredにチェックを入れ、minLengthに5を入れています。

|![ap06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/505aa177-6873-7a72-ae5f-1b63fd10cc07.png)|![ap07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/33a974b1-bfa8-66c4-04ec-d0bd454db491.png)|![ap08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/24f87066-f712-2ac6-8e2e-de7876cf3747.png)|
|:---:|:---|:---:|

まず空欄だとrequiredに引っかかるのでfalseです。1文字入れただけでも、minLength:5に引っかかるのでfalse。5文字入れたらようやくtrueになります。

このような感じで、ウィジェットにはバリデーションを設定することができます。

# 4 onValidate

次に、onValidateです。
これはプロパティエディタのイベントにある設定です。

|![ap09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/c9505f01-843b-8a6b-386b-c08504bc7b3c.png)|
|:-:|

DataValidationに無いような判定を行いたい場合はこちらに書きます。
例では、"あいうえお"の時だけOKとする判定を入れています。(この内容ならDataValidationのregexp(正規表現)でもできますが、あくまで例です)

|![ap10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/f9e359f9-827b-d40b-f616-67ec19805144.png)|![ap11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/27183028-f403-cc85-bffa-ad2e1f0d44fb.png)|![ap12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/e2d37a37-9019-cb4c-fd8a-04c82394c283.png)|
|:---:|:---:|:---:|

onValidateでは、エラーにする場合はエラーメッセージを返す形で表現するようになっているので、2枚目でエラーの表示が出ていますね。

onValidateは値が変わった時呼び出されますが、validate()メソッドで明示的に呼び出すこともできます。
ボタンを置いて、validate()関数を呼び出すように設定してみます。

|![ap13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/4f0bf2f2-9302-a3f1-e15d-113513f7a217.png)|
|:-:|

|![ap14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/8d19ad1c-f775-12a8-5857-08943d1733f5.png)|
|:-:|

初期状態ではfalseのみでしたが、強制的にvalidate()関数を呼んで処理を流した結果、エラーメッセージが表示されるようになりました。

もちろん、DataValidationも有効にした場合は、先にDataValidationが検証され、その次にonValidate関数による検証がなされます。上の例ではちょっと雑すぎるのでうまくいきませんが、使い所としては正規表現では判定できないレベルの内容になってくるので、データベースに登録されている情報に合致するかどうかや、実行日から何日以内とかそういった動的な条件を設定したい場合などが考えられます。

# 5 フィールドバリデーション

最後に、フィールドバリデーションです。
フィールドとはモデルの列定義のことなので、これはモデル側の設定になります。また、Cloud Cloud SQL (recommended)モデルでしか利用できません。他のモデルは入力(書き込み)を扱わないのでそうなっています。

ではモデルを定義してみます。

|![ap15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/cff74f8c-c327-3e9e-aca4-c75988cb3fc6.png)|![ap16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/ff7a94c1-dcbc-bef7-8584-120e3496098f.png)|
|:---:|:---:|

フィールドのAdvancedに、RequiredやMinimum Lengthなどの条件がありますね。

ここでは、Possible Valuesを設定してみます。

|![ap17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/ec6cb49b-4e16-b27b-8900-a1c6259c9a4d.png)|
|:-:|

上の画像はBULK EDITをしてみている図です。改行で区切りながら一括で設定できます。

|![ap18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/bf7b5f47-4426-29b4-8c3e-74d694de351f.png)|
|:-:|

設定するとこんな感じに。

このモデルを使ったフォームを置いてみます。

|![ap19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/f7da39cf-589f-4f84-f38c-84a37f74030a.png)|
|:-:|

そうすると、ウィジェットがドロップダウンウィジェットになっていて、最初からPossible Valuesを満たしてしまうフィールドになっています。
検証にならないので普通のTextBoxに取り替えます。でプレビュー。

|![ap20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26085/ff17f428-6716-2027-28b8-6c22070c809b.png)|
|:-:|

ここで、ウィジェット自体には何も検証を設定していないので、SUBMIT自体は可能です。
(ちなみにSUBMITボタンはフォーム自体のvalidプロパティで判断するようになっています)

しかし、モデル側のフィールドに条件を設定しているので、受け付けない値が含まれた状態ではエラーとなっています。

普通にモデルを元にフィールドを作成するときは、フィールドの条件に従って適切にウィジェットが選択されたり、ウィジェットのバリデーションの設定がフィールドを参照する形で設定されていたりするので、カスタムして作らない限りはこのパターンには遭遇しずらいです。

ただ、ベースとなっているのが

- ウィジェットバリデーション
- onValidate
- フィールドバリデーション

の3種の設定であることを押さえておけば、思い通りのバリデーションがかからないということは無いと思います。

以上です。良いApp Makerライフを!