react-hook-formとは
-
状態管理やバリデーションの実装がシンプル：
フォームの状態管理やバリデーションを自分で管理する必要がなく、
難しいコードを書かなくても、フォームの入力値やエラー管理が行えます。
バリデーション（入力チェック）も簡単な設定だけで実現できます。 -
高速で軽い：
大きなフォームでも、入力した部分だけ更新されるので、
アプリが重くなりにくい。 -
TypeScript対応：
入力値の型（データの種類）をしっかり管理できるので、
型安全にフォームを扱える。 -
他のライブラリとの親和性
React Native Paperなど、
他のデザインライブラリとも一緒に使える。
記事のきっかけ
react-hook-formの記事は多数ありますが、
React Nativeでの実装例がある記事を見かけなかったのと、
職業訓練学校の卒業制作でReact Nativeのアプリ作成をした際、
react-hook-formでフォーム作成したので、
記事作成を行おうと思った次第です。
（公式ドキュメントもReact向けのサンプルコードがほとんどのため）
- 本記事ではUIコンポーネントでreact-native-paperを使っております
（卒業制作で利用していたので） - react-native-paperの詳細については、割愛させていただきます
（時間があれば別記事で書きたいと思います）
フォーム作成準備
１．パッケージインストール
npm install react-hook-form
実装例
Reactでは主にRegisterを利用するケースが多いと思いますが、
React Nativeでは、主にControllerを利用します。
hook_form_test.tsx
import { router } from "expo-router"
import { useState } from "react"
import { Controller, useForm } from "react-hook-form"
import { Alert, StyleSheet, View } from "react-native"
import { Button, HelperText, Text, TextInput } from "react-native-paper"
// フォームデータの型定義（TypeScriptの型安全）
type FormData = {
email: string;
password: string;
confirmPassword: string;
}
/**
* HookFormTestコンポーネント
*
* このコンポーネントは、React Hook Formを使用してユーザー登録フォームを提供します。
* フォームには、メールアドレス、パスワード、パスワード確認の3つのフィールドが含まれています。
* - メールアドレス：必須、メールアドレス形式である必要があります。
* - パスワード：必須、8文字以上で英大文字、英小文字、数字を含む必要があります。
* - パスワード確認：必須、パスワードと一致する必要があります。
*
* フォーム送信時には、入力データがコンソールに出力され、
* `Alert`で送信成功メッセージが表示されます。
* また、`reset`関数でフォームがリセットされます。
*
* @returns ユーザー登録フォームを含むReact要素
*/
const HookFormTest = () => {
// パスワードのマスク表示
// 初期表示時ではマスク表示
const [secureTextEntry, setSecureTextEntry] = useState(true)
const [confirmSecureTextEntry, setConfirmSecureTextEntry] = useState(true)
// React-Hook-Form初期設定
const {
control, // 各入力値（TextInputなど）とフォームの状態を繋ぐ
handleSubmit, // フォーム送信時の処理をまとめてくれる。バリデーションも自動で実施
watch, // フォームの入力値をリアルタイムで監視。（例：パスワード確認欄でパスワードの入力値と一致しているかチェックしたい時に使います。）
formState: { errors }, // 入力ミスやバリデーションエラーの情報が格納されている。どの入力欄でどんなエラーが起きているかを簡単に取得可能
reset // フォームの入力値を初期状態に戻す関数。送信後やリセットボタンで使います。
} = useForm<FormData>({ // フォーム全体を管理するための関数。フォームで使うデータ型を指定（TypeScriptの型安全のため）
defaultValues: { // フォームの初期値を設定
email: '',
password: '',
confirmPassword: ''
}
})
// confirmPasswordのバリデーションのためにpasswordフィールドを監視
const password = watch('password')
/**
* フォーム送信時の処理
* フォームに入力された情報をconsoleに出力し、
* `Alert`で送信成功メッセージを表示します。
* また、`reset`関数でフォームを初期状態にリセットします。
*
* @param data - フォームに送信されたデータ
*/
const onSubmit = (data: FormData) => {
console.log('フォーム送信データ：', data)
// APIなどで呼び出してユーザー情報を登録
Alert.alert('送信成功しました。')
// 送信後にフォームの入力値をリセット
reset()
}
return (
<View style={styles.container}>
<Text style={styles.title}>ユーザー登録</Text>
{/* React NativeではControllerを利用する */}
<Controller
control={control} // controlは「フォーム全体の状態管理」を担うオブジェクト。Controllerコンポーネントに渡すことで、フォームの入力値やエラーを管理できる。
name='email'
// バリデーションのルール設定（必須と正規表現）
rules={{
required: 'メールアドレスは必須項目です',
pattern: {
value: /\S+@\S+\.\S+/,
message: 'メールアドレスの形式で入力してください'
}
}}
// 入力欄をどのように表示するかを定義する
// field：フォームの入力欄（例：TextInput）と
// react-hook-formの状態管理をつなぐための情報や関数がまとまったオブジェクト
render={({ field: { onChange, onBlur, value } }) => (
<View style={styles.inputContainer}>
<TextInput
label='email'
mode='outlined'
keyboardType="email-address"
value={value}
onChangeText={onChange}
onBlur={onBlur}
error={!!errors.email}
autoCapitalize="none"
left={<TextInput.Icon icon="email" />}
/>
{errors.email && (
<HelperText type="error">{errors.email.message}</HelperText>
)}
</View>
)}
/>
<Controller
control={control}
name="password"
rules={{
required: 'パスワードは必須です',
minLength: {
value: 8,
message: 'パスワードは８文字以上入力してください'
},
pattern: {
value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/,
message: 'パスワードは英大文字、英小文字、数字を含む必要があります'
}
}}
render={({ field: { onChange, onBlur, value } }) => (
<View style={styles.inputContainer}>
<TextInput
label="password"
mode="outlined"
secureTextEntry={secureTextEntry}
value={value}
onChangeText={onChange}
onBlur={onBlur}
error={!!errors.password}
left={<TextInput.Icon icon='lock' />}
right={
<TextInput.Icon
icon={secureTextEntry ? 'eye-off' : 'eye'}
onPress={() => setSecureTextEntry(!secureTextEntry)}
/>
}
/>
{errors.password && (
<HelperText type="error">{errors.password.message}</HelperText>
)}
</View>
)}
/>
<Controller
control={control}
name="confirmPassword"
rules={{
required: 'パスワード（確認）は必須です',
validate: (value) => value === password || 'パスワードが一致してません'
}}
render={({ field: { onChange, onBlur, value } }) => (
<View style={styles.inputContainer}>
<TextInput
label="password(confirm)"
mode="outlined"
secureTextEntry={confirmSecureTextEntry}
value={value}
onChangeText={onChange}
onBlur={onBlur}
error={!!errors.confirmPassword}
left={<TextInput.Icon icon='lock' />}
right={
<TextInput.Icon
icon={confirmSecureTextEntry ? 'eye-off' : 'eye'}
onPress={() => setConfirmSecureTextEntry(!confirmSecureTextEntry)}
/>
}
/>
{errors.confirmPassword && (
<HelperText type="error">{errors.confirmPassword.message}</HelperText>
)}
</View>
)}
/>
<View style={styles.buttonContainer}>
<Button
mode='contained'
// handleSubmitでバリデーションチェックを行い、
// バリデーションOKならonSubmit関数が実行される。
// NGの場合はrulesで定義したメッセージが画面に表示されます。
onPress={handleSubmit(onSubmit)}
style={styles.button}
>
送信
</Button>
<Button
mode='outlined'
onPress={() => router.back()}
style={styles.button}
>
戻る
</Button>
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingVertical: 48,
paddingHorizontal: 16
},
title: {
fontSize: 20,
fontWeight: 'bold',
marginBottom: 16
},
inputContainer: {
marginBottom: 8
},
buttonContainer: {
marginTop: 16
},
button: {
marginBottom: 16,
padding: 4
}
})
export default HookFormTest
画面起動（Androidエミュレータ）
初期表示
エラー発生時
送信成功時
送信後（リセット）
