【Next.js】Yupのエラーメッセージを日本語で表示する方法

今回は、Yupのエラーメッセージを日本語で表示する方法を紹介していきます。公式サイトの実装例も参考にしてみてください。

GitHub - jquense/yup: Dead simple Object schema validation
Dead simple Object schema validation. Contribute to jquense/yup development by creating an account on GitHub.
github.com
スポンサーリンク

検証環境

検証に使用した環境／ライブラリを次に記載します。

  • React
    • バージョン：18.2.0
  • Next.js
    • バージョン：12.3.0
  • Yup
    • バージョン：0.32.11

動作例

プロジェクト情報の詳細と動作例は、次のサイトで確認することができます。

https://codesandbox.io/s/next-js-typescript-react-hook-form-yup-yup-locale-r3i8si
codesandbox.io

プログラム内容（基本）

Pages

画面表示のエラーメッセージを表示するためのソースコードは、次のようになります。

【pages/index.tsx】

import type { NextPage } from "next";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";

const exampleSchema = yup.object().shape({
  name: yup.string().label("name").required(),
  email: yup.string().label("email").email()
});

type exampleFormTyep = {
  name: string;
  email: string;
};

const Index: NextPage = () => {
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm<exampleFormTyep>({
    resolver: yupResolver(exampleSchema)
  });

  const onSubmit = (data) => console.log(data);

  return (
    <div>
      <div>Next.js + TypeScript + Yup</div>
      <div>error message customization example.</div>
      <hr />
      <div>
        <form onSubmit={handleSubmit(onSubmit)}>
          <div>
            <span>name(required):</span>
            <input type="text" {...register("name")} />
            <div>{errors.name?.message}</div>
          </div>
          <div>
            <span>email:</span>
            <input type="text" {...register("email")} />
            <div>{errors.email?.message}</div>
          </div>
          <div>
            <input type="submit" />
          </div>
        </form>
      </div>
    </div>
  );
};

export default Index;

Yupで使用するためのスキーマの定義とバリデーションの設定は、次の箇所になります。

const exampleSchema = yup.object().shape({
  name: yup.string().label("name").required(),
  email: yup.string().label("email").email()
});

type exampleFormTyep = {
  name: string;
  email: string;
};

ここまでの処理では、フォームのボタンを押下すると英語のエラーメッセージが表示される動作になります。

Message

日本語のエラーメッセージを表示するための情報を「yup.setLocale」に設定して、「pages/index.tsx」に追加します。設定例は、次のようのなります。

yup.setLocale({
  mixed: {
    required: ({ label }) =>
      (label ? label + "には" : "") + "値を入力してください"
  },
  string: {
    email: ({ label }) =>
      (label ? label + "は" : "") + "正しいメールアドレスではありません"
  }
});

ここまでの処理では、フォームのボタンを押下すると日本語のエラーメッセージが表示される動作になります。

エラーメッセージに表示される入力項目の名称を日本語で表示するときは、スキーマ情報を次のように設定します。

const exampleSchema = yup.object().shape({
  name: yup.string().label("名称").required(),
  email: yup.string().label("メールアドレス").email()
});

「label」の設定内容を変更することで入力項目の名称を日本語で表示することができます。

プログラム内容（応用）

日本語のエラーメッセージを画面に追加しましたが、このままでは、画面を追加するときに同じ設定を追加する必要があります。ここでは、プログラム全体で使用する方法を紹介していきます。

Message

画面で追加したエラーメッセージを別のファイルで定義します。ソースコードは、次のようになります。

【config/locales/ja.ts】

export const ja = {
  mixed: {
    required: ({ label }) =>
      (label ? label + "には" : "") + "値を入力してください"
  },
  string: {
    email: ({ label }) =>
      (label ? label + "は" : "") + "正しいメールアドレスではありません"
  }
};

export default ja;

ファイルを作成する場所のルールはないため、わかりやすい場所に作成してください。

動作例で紹介しているプログラムでは、ここには記載していないメッセージ定義もあるため、参考にしてみてください。

Page

追加したメッセージファイルを「yup.setLocale」に設定します。各画面に追加するのではなく、すべての画面の共通処理に設定します。

【pages/_app.tsx】

import type { AppProps } from "next/app";
import * as yup from "yup";
import { ja } from "../config/locales/ja";

yup.setLocale(ja);

function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default App;

ここまでの処理を追加した後は、画面に追加した設定を削除して、フォームのボタンを押下すると日本語のエラーメッセージを表示できることを確認することができます。

まとめ

Yupを使用して日本語のエラーメッセージを表示する方法を紹介しました。

参考資料

YupのGitHubサイト

GitHub - jquense/yup: Dead simple Object schema validation
Dead simple Object schema validation. Contribute to jquense/yup development by creating an account on GitHub.
github.com