CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2021/02/12 11:00
目次

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:メールアドレスではない値を入れた
図2:メールアドレスではない値を入れた

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

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

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

まとめ

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



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:現場で役立つ! React向けライブラリ詳説

著者プロフィール

  • WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5