Zenn
🛠️

yupを使ってみよ【基本編】

2024/03/08に公開
バリデーション
yup
tech

yupって何？

yupとはバリデーションチェックをするためのJSライブラリーです。バリデーションチェックとは、入力フォームにルールに合ったデータが入っているかを確認することです。yupのようなライブラリーを使うと、「数字だけ入力可」、「10文字以内のテキストだけ入力可」のようにルールを決めることと、それに反する値が入力フォームに入った時にエラーを返すことが出来ます。

例えば、名前は4文字以上10文字以下のテキスト、生年月日は必須というルールを決めておくと、それに反する値がフォームに入った場合、下記のようにエラーを発火させることが出来ます。

「確認画面へ」押下前 「確認画面へ」押下後
入力画面 入力画面

重要な機能

スキーマ定義:
バリデーションチェック: .string(), .number(), .boolean() 。。。。
必須フィールド: .required()
範囲の設定: .min(), .max()
パターン設定: .matches()

Yupの使用法

主に使用される以下の5つのプロパティタイプについて取り上げます。

  • string
  • number
  • boolean
  • date
  • array

タイプ指定

以下のように各プロパティのタイプを指定できます。

javascript
const randomSchema = object({
  str: string(),
  num: number(),
  bool: boolean(),
  date: date(),
  arr: array(), // array().of(number()) もしくは array(number()) を使ってタイプを指定可能
});

スキーマを使用してバリデーションをチェックする場合、エラーが発生するのは以下のような場合です。

  • nullを持つ場合
  • タイプに合わない値を持つ場合(ただし、指定されたタイプにパース可能な値の場合はエラーが発生しません。)
javascript
// 成功
await randomSchema.validate({ str: undefined });
await randomSchema.validate({ str: '' });
await randomSchema.validate({ str: '文字列' });
await randomSchema.validate({ str: new Date() });
// 失敗
await randomSchema.validate({ str: null });
await randomSchema.validate({ str: [] });

しかし、注意が必要な点があります。
スキーマで定義されたプロパティが検証対象のオブジェクトに存在しなくてもエラーは発生しません。
極端な例として、以下のような場合でもエラーは発生しません。

javascript
// 成功
await randomSchema.validate({});

これは、検証対象のプロパティの値が有効かのみをチェックするためです。
このような場合を避けるためには、後述する defined() や required() を使用します。

例

バリデーションチェックをする方法は簡単に言うと、
①理想のデータ型をオブジェクトで定義する。
②入力値が上記で定義したオブジェクトに準拠しているか確認する。

①理想のデータ型をオブジェクトで定義する

import * as yup from "yup";

export const userValidation = yup.object().shape({
  name: yup.string().required(),
  email: yup.string().email().required(),
  password: yup.string().min(8).required(),
});

②入力値が上記で定義したオブジェクトに準拠しているか確認する

export default function App() {
  //登録ボタン押下時のハンドラー
  const handleClickSubmitButton = async (event) => {
    event.preventDefault();
    let formData = {
      name: event.target[0].value,
      email: event.target[1].value,
      password: event.target[2].value,
    };
    const isValid = await userValidation.isValid(formData);
    console.log(isValid);
  };

  return (
    <div className="App">
      <h1>yupを使ってみよ【基本編】</h1>
      <form onSubmit={handleClickSubmitButton}>
        <input type="text" placeholder="名前" />
        <input type="text" placeholder="メールアドレス" />
        <input type="password" placeholder="パスワード" />
        <button type="submit">登録</button>
      </form>
    </div>
  );
}

Discussion