こんにちは！このチュートリアルでは、Yup 検証ライブラリを使用して文字列の配列を検証する方法を学習します。まず、文字列を検証して配列に適用する方法を学びます。最近、フォームで各入力フィールドを空にしないことが必要になるという問題が発生しました。このチュートリアルでは、私がどのように行ったかを共有します。

うん、何ですか？

Yup は、JavaScript (および Typescript) 用の人気のある、シンプルなオープンソースのランタイム検証ライブラリです。 Yup は、宣言的で使いやすい方法でデータ スキーマを定義および検証する方法を提供する JavaScript スキーマ検証ライブラリです。フロントエンド開発、特にフォームやデータ入力の検証でよく使用されます。開発者は、Yup の API を使用して検証スキーマを作成し、期待するデータの形状と制約を指定できます。

導入

ユーザーが複数の電子メールを入力できるフォームを実装しているとします。各電子メールが有効かどうかを確認する必要がありますが、各電子メールが電子メールとして検証されるスキーマを実際に作成するにはどうすればよいですか?

import { object, string, array } from 'yup'

const schema = object({
  emails: array() //how do you validate each email in the array as an actual email? 
});

文字列を検証する方法

はい、文字列を検証するには、string() 関数と他の関数を使用する必要があります。

たとえば、有効な電子メールが必要な場合は、string().email().
を使用できます。

import { object, string, array } from 'yup'

const schema = object({
  email: string().email()
});

const isValid = schema.isValidSync({
    emails: ["", "@test.com"],
  });
console.log(isValid); //true which is wrong since they are clearly not emails

必須フィールドが必要な場合は、string().required().
を使用できます。

import { object, string, array } from 'yup'

const schema = object({
  requiredField: string().required()
});

これは非常に簡単なので、配列に適用してみましょう。

Yup で文字列の配列を検証する方法

yup で文字列の配列を検証するには、array().of() 関数を使用して検証する配列のタイプを指定する必要があります。例えば：

import { object, string, array } from 'yup'

//1. create a simple validation schema for the string
const requiredEmail = string().email().required("Email is required");

//2. apply it to the array().of() function
const schema = object({
  emails: array().of(requiredEmail)
});

ここで、いくつかのデータを使用して再度テストしてみると、正しい結果が得られます:

let isValid = schema2.isValidSync({
  emails: ["", "@test.com"],
});
console.log(isValid); //false

isValid = schema2.isValidSync({
  emails: ["[email protected]", "[email protected]"],
});
console.log(isValid); //true

他の型の配列を検証する方法

同様に、数値の配列や任意の型を検証する場合にも、同じ手法を使用できます。例えば：

import { object, string, array, number, boolean } from "yup";

const requiredNumber = number().required();
const optionalBoolean = boolean().optional();
const user = object({
  firstName: string().required(),
  lastName: string().required(),
});
const schema3 = object({
  numbers: array().of(requiredNumber), // array of numbers
  booleans: array().of(optionalBoolean), //array of booleans
  users: array().of(user),  // array of objects
});

基本的には以上です!

結論

Yup を使用するときに文字列の配列を検証する方法を学習しました。また、array().of() 関数を使用して他の型の配列を検証し、複雑な配列スキーマを作成する方法も学習しました。単一のオブジェクトで実行できることはすべて、配列でも実行できます。