今回はAmplify StudioのFormBuilderでカスタムのエラーバリデーションを設定する方法を紹介します。
社会人として働き始めて日々初期研修をこなしています。
名刺の受け渡しや上座・下座などのテーブルマナーから、エンジニアとしての基礎知識の学習まで様々なことを学んでいます。
一番大変なことは、研修以外で会社内の申請やルールを覚えること。早いとこ覚えてしまいたいです。
しかし研修の合間に暇な時間ができるので、AWSのサービスであるAmplify Studioを触ったり、Reactを学んだりしています。
今回は、Amplify StudioでFormBuilderを使用する際に気になったカスタムのエラーバリデーションを設定する方法を紹介します。
Amplify Studioとは？
AWSのサービスの1つで、Webアプリケーションやモバイルアプリケーションのフロントエンド開発を迅速化するためのサービスです。
開発者は、Amplify Studioを使ってコードを書くことなく、ビジュアルなインターフェース上でアプリケーションを設計することができます。
また、Amplify Studioは、AWS Amplifyの他のサービスと連携し、シームレスな開発体験を提供しまするうえ、開発者はサーバーセットアップや管理の手間を省くことができます。
AmplifyとAmplify Studioの違いは？
Amplify は、Web / モバイルアプリ開発者が、機能豊富なアプリを AWS 上で爆速で構築することを目的としたツールと機能のセットであり、幅広い AWS サービスと連携できる柔軟性を備えています。Amlify StudioはAmplifyを構成するツールの1つです。
FormBuilderとは？
ビジュアルなインターフェースを使って、Webフォームを簡単に作成できる機能です。FormBuilderを使用すると、コードを書くことなく、独自のフォームを作成し、ユーザーからの入力を収集できます。FormBuilderは、AWS Amplifyの他の機能と統合されており、フォームの送信先や、収集したデータの保存場所を簡単に指定できます。現在はReactのみサポートされています。
FormBuilderの使い方は公式のドキュメントが参考になります。
デフォルトのエラーバリデーション
FormBuilderではデフォルトのバリデーションとして以下のようなものが準備されています。
Input type Configurable validation rule String– Start With
– End With
– Contain
– Does not contain
– Be less than N characters long
– Be at least N characters longInt,Float– Be greater than
– Be less than
– Be equal toAWSDate,AWSTime,AWSDateTime– Be before
– Be after
他にも、
・IPアドレス
・URL
・Email
・JSON
・Phone
などのバリデーションにも対応しています。
カスタムのエラーバリデーションを設定する方法
考えようと思ったきっかけ
それではデフォルト以外のバリデーションルールを追加する方法について書きます。
例えばチェックボックスグループを作成して最低でも選択肢を１つ選んでほしい場合を考えます。
FormBuilderではチェックボックスグループの提供はありませんが、自作することは可能です。しかし、エラー表示の実装を自前で行うことは以下のようなデメリットがあります。
・既存のFormBuilderのエラー表示と統一する必要がある
・既存のFormBuilderのエラー実装ファイルと異なるファイルを作成する必要がある。
また公式のカスタムのエラーバリデーションを設定する方法としてはonValidateに直接渡す方法が紹介されています。もちろんこの方法が良いのですが、同じカスタムのエラーバリデーションを設定するさいにコードが冗長になる可能性があります。
実装する方法
FormBuilderを出力した時に作成される「ui-components」内の「util.js」を編集していきます。
util.jsの中身
util.jsの内容は簡潔に示すと以下のようになっています。
export const validateField = (value, validations) => {
for(.....){
//必須項目の確認
//バリデーションを設定している項目にバリデーションチェック関数を適用
}
}
//バリデーションチェック関数
const checkValidation = (value, validation) => {
if(validation.numValues?.length){
//入力が数字の場合のバリデーションをそれそれのタイプに対してswitchを使って実装
}else if (validation.strValues?.length){
//入力がテキストの場合のバリデーションをそれそれのタイプに対してswitchを使って実装
}
switch(){
//EmailやJSONなどのバリデーションに対してswitchを使って実装
}
}
//以下日付時間のフォーマット関数などカスタマイズ方法
util.js内の「//EmailやJSONなどのバリデーションに対してswitchを使って実装」内に書き足していきます。今回は例として「CheckAtLeast」というtypeのチェックボックスグループの最低1つ選択していない場合にエラーを表示するコードを示します。valueという変数に選択された選択肢の配列が入るイメージです。
case "CheckAtLeast":
return {
hasError: Object.keys(value).length < 1,
errorMessage: valiation.validationMessage || '最低でも１つ選択してください'
};util.jsに追加した後に、FormBuilderで作成したFormコンポーネントコードファイルのvalidationを設定している部分に追加してあげることで設定可能です。
....
const validations = {
...
checkBoxGroup: [{type:"CheckAtLeast"}]
...
}
....【おまけ】Amplify Studioはメリットだらけなのか
Amplify Studioを使うことで簡単にReactベースのWebアプリを作成することに対してメリットだらけなのでしょうか？この点については作りたいものによると考えています。ゼロからWebアプリを作成するよりは手間は減ります。しかし作りたいものによって手間が減る割合は減ります。
例えば簡単なWebアプリであれば50％の手間削減になりますが、少し手の込んだWebアプリを作成する（上記のようにCheckBoxGroupなどAmplifyStudioに用意されていないものを実装するなど）のであれば30％の手間削減になるなどです。
ただ１つだけいえることは、ゼロからWebアプリを作成するよりは確実に手間は減ります。
まとめ
Amplify StudioでReactベースのWebアプリを作成する際に、FormBuilerを使用することで簡単にフォームを作成できます。今回はカスタムバリデーションの設定方法について、公式で紹介されている方法ではなくutil.jsを直接編集する方法を紹介しました。
Amplify Studioﾊは、ゼロからWebアプリを作成するよりは確実に手間は減るので、どんどん活用していきたいです。
よくわからない点、相談があればFollow @halkumlmanにお願いします。
コメント