1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Yupのarray全部試す

Posted at

はじめに

業務で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]

nullundedfinedなどの空の値の場合には、空の配列を設定します。
配列でない値が渡された場合には、配列の形式に変換します。

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?