はじめに
業務でYupのarrayについて扱ったのですが、あまりYupについてそもそも理解できていなかったので、どのような処理ができるのかを確かめてみます。
Yupのarray
以下のような複数入力のフォームに対してバリデーションをかける場合に、arrayを使用します。
なお、後続のコードでは、画面ではなくコンソールログでバリデーションの実行結果を確認します。
of
概要
ofは配列の中身について一つずつ確認できるメソッドです。
使用例
const ofMethodSchema = Yup.array().of(Yup.number().min(2));
console.log(await ofMethodSchema.isValid([2, 3])); // true
console.log(await ofMethodSchema.isValid([1, -24])); // false
of
の中に、さらにYup.number().min(2)
を定義しています。
これにより、配列の各項目は数値で最小値が2となります。
json
概要
要素をJSON.parse
でjson形式に変換できるかをチェックします。
使用例
const jsonMethodSchema = Yup.array().json();
console.log(await jsonMethodSchema.isValid('["a", "b", "c"]')); // true
console.log(await jsonMethodSchema.isValid("not a json")); // false
json形式に変換できない場合はfalse
を返します。
length
概要
配列の長さを指定できます。固定長の配列を取得したい場合などに便利です。
使用例
const lengthMethodSchema = Yup.array().length(
3,
"配列の長さは${length}である必要があります"
);
console.log(await lengthMethodSchema.isValid([1, 2, 3])); // true
console.log(await lengthMethodSchema.isValid([1, 2])); // false
console.log(await lengthMethodSchema.isValid([1, 2, 3, 4])); // false
指定した長さより、長くても短くてもfalse
を返します。
設定した長さは、メッセージ内で${length}
の形で取得できます。
min
概要
配列の最小の長さを指定できます。
使用例
const minMethodSchema = Yup.array().min(
2,
"少なくとも${min}個の要素が必要です"
);
console.log(await minMethodSchema.isValid([1, 2])); // true
console.log(await minMethodSchema.isValid([1])); // false
指定した長さより短い場合、false
を返します。
指定した長さは、メッセージ内で${min}
の形で取得できます。
max
概要
配列の最大の長さを指定できます。
使用例
const maxMethodSchema = Yup.array().max(5, "最大${max}個の要素までです");
console.log(await maxMethodSchema.isValid([1, 2, 3, 4, 5])); // true
console.log(await maxMethodSchema.isValid([1, 2, 3, 4, 5, 6])); // false
指定した長さより長い場合、false
を返します。
指定した長さは、メッセージ内で${max}
の形で取得できます。
ensure
概要
直接的なバリデーションではありません。
入力要素が配列であることを保証(ensure)するものです。
使用例
const ensureMethodSchema = Yup.array().ensure();
console.log(ensureMethodSchema.cast(null)); // []
console.log(ensureMethodSchema.cast(undefined)); // []
console.log(ensureMethodSchema.cast(1)); // [1]
console.log(ensureMethodSchema.cast([1])); // [1]
null
やundedfined
などの空の値の場合には、空の配列を設定します。
配列でない値が渡された場合には、配列の形式に変換します。
compact
概要
直接的なバリデーションではありません。
配列からfalsyな値を除外するものです。
使用例
const compactMethodSchema = Yup.array().compact();
console.log(compactMethodSchema.cast(["", 1, 0, 4, false, null])); // [1, 4]
const customCompactMethodSchema = Yup.array().compact((v) => v === "");
console.log(customCompactMethodSchema.cast(["", 1, 0, 4, false, null])); // [ 1, 0, 4, false, null ]
そのまま使用すると、真偽値に変換したときにfalse
と判定される値がすべて配列から除外されます。
戻り値としてboolean
を返す関数を定義することで、除外対象をカスタムできます。
上記の例では、空文字のときのみ除外するように指定した関数を定義しています。
まとめ
Yupのarrayで使える処理をすべてまとめてみました。
compactはかなり使えそうですね。
空文字の入力項目を弾いたり、特定の要素が入っていない場合に弾いたりしてバリデーションを設定することができそうです。
Yupにはまだまだ便利なバリデーションの処理が用意されているので、一つずつ使い方を確認して、またまとめたいと思いました。