フォームのバリデーションに役立つYupとは？ React向けライブラリを解説

現場で役立つ！ React向けライブラリ詳説 第2回

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）。

図2：メールアドレスではない値を入れた

　前回なら入力値ありで通ってしまっていたバリデーションでしたが、今回はメールアドレスの形式チェックが入ったので、エラー扱いになりました。今度は正しい形式のメールアドレスにしてみましょう（図3）。

図3：メールアドレスとして正しい値を入れた

　エラーメッセージが消えました。Yupはちゃんと動いているようです。

まとめ

　フォームの各項目の特性を宣言的に定義するだけで、バリデーションルールの実装ができるようになりました。FormikやYupを駆使して、堅牢なフォームを作っていきましょう。さて、次回はReactに特化した通信ライブラリとして、SWRについて解説します。お楽しみに。