Formikと組み合わせる
最後に、Formikと組み合わせるための方法を確認しておきましょう。前回Formikで作成した申し込みフォームのプロジェクトに、npmでYupをインストールします（リスト13）。
［リスト13］yupをインストールする
$ npm install yup --save
次に、Yupでスキーマを作成して、Formikに設定します（リスト14）。
［リスト14］FormikとYupを併用する
import * as yup from 'yup';
function App() {
// （1）
const validationSchema = yup.object().shape({
email: yup.string()
.email('Eメールアドレスの形式が不正です')
.required('Eメールアドレスを入力してください')
});
const formik = useFormik({
initialValues: {
email: '',
},
validationSchema: validationSchema, // （2）
onSubmit: (values, { setSubmitting }) => {
postData(values)
.then(() => {
alert('送信完了しました\n' + JSON.stringify(values, null, 2));
setSubmitting(false);
});
},
});
（1）でyup.object()をベースにしてスキーマを定義しています。入力欄としてemailがあるので、チェック内容もyup.string().email().required()にしました。これで、必須チェックだけではなく、メールアドレスとしての形式チェックも簡単に導入できました。スキーマが出来上がったら、（2）のように、FormikのvalidationSchemaプロパティにスキーマを設定します。validateプロパティは削除して構いません。これだけでFormikとYupのつなぎ込みは完了です。
それでは動作確認です。まずは、メールアドレスではない値を入力してみましょう（図2）。
前回なら入力値ありで通ってしまっていたバリデーションでしたが、今回はメールアドレスの形式チェックが入ったので、エラー扱いになりました。今度は正しい形式のメールアドレスにしてみましょう（図3）。
エラーメッセージが消えました。Yupはちゃんと動いているようです。
まとめ
フォームの各項目の特性を宣言的に定義するだけで、バリデーションルールの実装ができるようになりました。FormikやYupを駆使して、堅牢なフォームを作っていきましょう。さて、次回はReactに特化した通信ライブラリとして、SWRについて解説します。お楽しみに。
