Yupのarray全部試す

はじめに

業務で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にはまだまだ便利なバリデーションの処理が用意されているので、一つずつ使い方を確認して、またまとめたいと思いました。