useField と useFormの説明

useField と useForm は、vee-validate ライブラリの Composition API の一部で、Vue 3 と TypeScript でバリデーションを簡単に管理できるツールです。これらを使用すると、フォームの状態やバリデーションをより宣言的かつリアクティブに扱うことができます。以下にそれぞれの詳細な説明と使い方を示します。

useField
useField は、個々のフォームフィールドの状態とバリデーションを管理するためのフックです。フォーム内の各フィールドに対して、値やエラーメッセージなどを追跡します。

基本的な使い方
ts
コードをコピーする
const { value, errorMessage, handleChange, handleBlur } = useField<string>('fieldName', validationSchema)
value: フィールドの現在の値を保持します。この値はリアクティブで、フォームが変更されるたびに更新されます。
errorMessage: バリデーションエラーがある場合、エラーメッセージを表示します。これにより、ユーザーにエラーをフィードバックできます。
handleChange: フィールドの値が変更されたときに呼ばれる関数です。通常は入力イベントと結びつけて使用します。
handleBlur: フィールドがフォーカスを失ったときに呼ばれる関数です。これも通常は入力イベントと結びつけて使用します。
例
以下は、useField を使用してテキストフィールドを管理する例です：

vue
コードをコピーする
<script lang="ts" setup>
import { useField } from 'vee-validate';
import * as yup from 'yup';

// バリデーションスキーマを定義
const schema = yup.string().required('必須項目です');

// フィールドを定義
const { value: name, errorMessage: nameError, handleChange: onNameChange, handleBlur: onNameBlur } = useField('name', schema);
</script>

<template>
<div>
<input
type="text"
v-model="name"
@input="onNameChange"
@blur="onNameBlur"
/>
<span v-if="nameError">{{ nameError }}</span>
</div>
</template>
useForm
useForm は、フォーム全体の状態とバリデーションを管理するためのフックです。複数のフィールドをまとめて扱うことができ、フォームの送信やバリデーションを簡単に行うことができます。

基本的な使い方
ts
コードをコピーする
const { handleSubmit, errors, resetForm } = useForm({
validationSchema: schema,
initialValues: initialValues,
})
handleSubmit: フォームの送信処理を定義します。バリデーションを行い、エラーがなければ指定されたコールバック関数が実行されます。
errors: フォーム全体のバリデーションエラーを含むオブジェクトです。各フィールドのエラーを確認するのに使用します。
resetForm: フォームの状態をリセットするための関数です。これにより、フォームの値やエラーが初期状態に戻ります。
例
以下は、useForm を使用してフォーム全体を管理する例です：

vue
コードをコピーする
<script lang="ts" setup>
import { useForm } from 'vee-validate';
import * as yup from 'yup';

// バリデーションスキーマを定義
const schema = yup.object({
name: yup.string().required('名前は必須です'),
email: yup.string().email('有効なメールアドレスを入力してください').required('メールアドレスは必須です'),
});

// フォームの初期値を定義
const initialValues = {
name: '',
email: '',
};

// useForm でフォームを定義
const { handleSubmit, errors, resetForm } = useForm({
validationSchema: schema,
initialValues: initialValues,
});

// フォームの送信処理
const onSubmit = handleSubmit((values) => {
console.log('送信されたデータ:', values);
// フォームの送信処理をここに記述
});
</script>

<template>
<form @submit="onSubmit">
<div>
<label for="name">名前</label>
<input type="text" v-model="name" />
<span v-if="errors.name">{{ errors.name }}</span>
</div>
<div>
<label for="email">メールアドレス</label>
<input type="email" v-model="email" />
<span v-if="errors.email">{{ errors.email }}</span>
</div>
<button type="submit">送信</button>
</form>
</template>
まとめ
useField: 個々のフィールドの値、エラー、変更処理を管理するために使用します。
useForm: フォーム全体の状態やバリデーションを管理し、送信処理やリセット処理を行います。
これらを組み合わせることで、複雑なフォームの管理が容易になり、バリデーションエラーの処理やユーザーインターフェースのフィードバックが効率的に行えます。