yup【JSライブラリ1日1個】

JSライブラリを1日1つ紹介する

1日1つJSのライブラリを調べます。

① ライブラリに関するドキュメントを最初から最後まで読む
② 実際に使ってみる or 使い方を調べる
③ ライブラリを3行で説明する

本日は、yupのドキュメントを読んで実際に業務で使っているところを調べました。

ドキュメント

今回読んだドキュメントはこちらです。
github.com

Philosophy、Motivation、Back Story

なし

実際に使ってみる

このライブラリは、動的にスキーマのバリデーションチェックができるライブラリです。
これを使えば、submitをしなくてもフォームのバリデーションを行うことができます。

今回はドキュメントから、フォームの文字数をバリデーションするコードを実際に動かしてみました。

いつものようにnpm installします。
react-create-appしたアプリに以下のように書きます。

import * as yup from 'yup';
import { setLocale } from 'yup';

setLocale({
  // use constant translation keys for messages without values
  mixed: {
    default: 'field_invalid',
  },
  // use functions to generate an error object that includes the value from the schema
  number: {
    min: ({ min }) => ({ key: 'field_too_short', values: { min } }),
    max: ({ max }) => ({ key: 'field_too_big', values: { max } }),
  },
});

// now use Yup schemas AFTER you defined your custom dictionary
let schema = yup.object().shape({
  name: yup.string(),
  age: yup.number().min(18),
});

schema.validate({ name: 'jimmy', age: 11 }).catch(function(err) {
  console.log(err.name); // => 'ValidationError'
  console.log(err.errors); // => [{ key: 'field_too_short', values: { min: 18 } }]
});

jimmyは11歳なので、バリデーションに引っかかりました。エラー内容は以下のように取得できます。

jimmyを成人させてみると、エラーが出なくなりました。

バリデーションがフロント側で完結できるのはとても便利ですねー！！

3行でまとめる

yupを導入すると、

• フロントでバリデーション処理を完結できる。

以上です！