Reactにおいてフォームを効率的かつ効果的に扱うために、Mui (Material-UI) の TextField、react-hook-form、そして yup でのバリデーションを組み合わせた手法を紹介します。これらのライブラリを使うことで、簡単に安全にバリデーションを実装することができます！
もちたreact-form-hookとyupは、バリデーションを行う上で非常に便利なので、皆さんもこの記事を参考に使ってみてください。
目次
環境セットアップ
必要なパッケージをインストールしましょう。以下のコマンドを実行して、Mui、React Hook Form、Yup、そして関連するリゾルバーをインストールします。
npm install @mui/material @emotion/react @emotion/styled
npm install react-hook-form yup @hookform/resolversフォームの作成
次に、基本的なフォームコンポーネントを作成します。以下の例では、名前を入力するシンプルなフォームを作成します。
import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import { TextField } from '@mui/material';
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
// Yupでバリデーションスキーマを定義
const schema = yup.object({
name: yup.string().required('名前は必須です').min(2, '名前は2文字以上である必要があります')
}).required();
function MyForm() {
const { control, handleSubmit, formState: { errors } } = useForm({
resolver: yupResolver(schema)
});
const onSubmit = data => {
console.log(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Controller
name="name"
control={control}
render={({ field }) => (
<TextField
{...field}
label="名前"
variant="outlined"
error={!!errors.name}
helperText={errors.name?.message}
/>
)}
/>
<button type="submit">送信</button>
</form>
);
}
export default MyForm;
- Controller:
react-hook-formのControllerコンポーネントは、外部の UI コンポーネントライブラリ（この場合は Mui のTextField）とreact-hook-formを繋ぐために使用されます。 - yupResolver: Yup を使ったスキーマ定義でバリデーションを行い、その結果を
react-hook-formが理解できる形に変換します。 - handleSubmit: フォームの送信ハンドラーです。バリデーションが成功すると、フォームのデータを処理する
onSubmit関数が呼び出されます。 - errors: バリデーションエラーを表示します。Mui の
TextFieldのerrorとhelperTextプロパティを利用してエラーメッセージを表示しています。
以上で、Mui、React Hook Form、および Yup を組み合わせてフォームを作成する基本的な流れが完成しました。このパターンを使用すれば、複雑なフォームも簡単に管理し、バリデーションを強力に行うことができます。
MUI TextFieldをカスタマイズしたい場合は、以下の記事を参考にしてください
React MUI TextFieldの始め方と使い方、よく使う機能・設定について
