mBaaSのデータストアの利点はスキーマレスで柔軟に使えることです。あらかじめ項目を設定することなく、項目の増減が簡単にできます。
今回はそんなデータストアの特徴を活かして柔軟性あるフォームを作成してみます。
例の紹介
こちらは筆者が主催したDevRel/Asia 2020のフォームの一つです。10を超える入力項目があります。これを一つずつ set を使って値を設定するのはとても面倒です。フォームの追加をする度にJavaScriptを編集するのも面倒です。
const contact = new Contact();
contact
.set('title', title)
.set('body', body)
.set('name', name)
// :
入力項目の増減に対応したJavaScript処理
ではここから入力項目の増減に対応した方法を紹介します。まずフォームの送信イベントを使います。
$('form').on('submit', async e => {
e.preventDefault();
// 以下に処理を記述
});
そして serializeArray を使います。このメソッドを使うことで、フォームの入力内容を配列で受け取れます。
const ary = $(e.target).serializeArray();
そして、この値をデータストアのインスタンスに設定します。
const Contact = ncmb.DataStore('Contact');
const contact = new Contact();
for (const v of ary) {
contact.set(v.name, v.value);
}
後はデータを保存するだけです。
await contact.save();
利点
この方法で実装しておくと、後からHTMLフォーム側で項目を追加してもJavaScriptの修正は不要です。もし項目によって特別な処理を実装したい時には v.name の値によって処理分けすればいいでしょう。
まとめ
データストアの柔軟性を活かすことで、容易に拡張できるフォームを作成できます。他にも応用できますので、データストアを利用する際に参考にしてください。
