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を導入すると、
- フロントでバリデーション処理を完結できる。
以上です!