React Hook Form と Zod によるフォームバリデーション

3FBDU)PPL'PSNͱ;PEʹΑΔ ϑΥʔϜόϦσʔγϣϯ ϑϩϯτΤϯυษڧձJOେࡕ 4"8

$(whoami) w ࢯ໊Ճ౻फҰ࿠ ࡀ w ϋϯυϧωʔϜ4"8 w 9 چ5XJUUFS
!B[VLJ@FBUFS w ؔ੢ͷ*5ΤϯδχΞίϛϡχςΟͷ೐΍͔͠ ࣗশ w େࡕࡏॅɾѪ஌ग़਎ w ಘҙ෼໺8FCΞϓϦέʔγϣϯ։ൃ w -BSBWFM 7VF w ॴଐ༗ݶձࣾΞϦ΢ʔϓ 2 ඇৗ༻ίοΫͷதʹ খ͞ͳίοΫ͞Μ͸ೖ͍ͬͯͳ͍ ࠓ೔ͷ໎ݴ

ϑΥʔϜόϦσʔγϣϯͷඞཁੑ w ϢʔβʔͷೖྗϛεΛϑΥʔϜͷૹ৴લʹݕग़ w ೖྗඞਢͷ߲໨͕ೖྗ͞Ε͍ͯͳ͍ w ϝʔϧΞυϨε΍༣ศ൪߸ͳͲͷೖྗܗ͕ࣜਖ਼͘͠ͳ͍ w ೖྗ͞Εͨจࣈ਺͕ࢦఆͷൣғ಺ʹऩ·͍ͬͯͳ͍ w
Ͳͷ߲໨ʹΤϥʔ͕͋Δ͔Ϣʔβʔʹࢹ֮తʹೝࣝͤ͞Δ w ೖྗΤϥʔͷ͋Δ߲໨ʹରͯ͠Τϥʔ಺༰ͷϝοηʔδΛදࣔ w Ϣʔβʔ͸Τϥʔϝοηʔδͷ಺༰Λ֬ೝͯ͠ଈ࠲ʹೖྗΛमਖ਼Ͱ͖Δ 3

ϑΥʔϜόϦσʔγϣϯͷ࣮ݱ w ϑΥʔϜͷ֤ϑΟʔϧυͷೖྗΛͦΕͧΕνΣοΫ w ֤ϑΟʔϧυʹରͯ͠όϦσʔγϣϯϧʔϧΛఆٛͯ͠ద༻ w ֤ϑΟʔϧυͷঢ়ଶ ݕূ݁ՌͳͲ ͷ؅ཧ͕ඞཁ w
Τϥʔ͕͋ΔϑΟʔϧυʹରͯ͠ΤϥʔϝοηʔδΛద੾ʹදࣔ w ϑΟʔϧυͷݕূ݁Ռʹج͍ͮͯΤϥʔͷදࣔɾඇදࣔͷঢ়ଶͷ؅ཧ͕ඞཁ w ϑΥʔϜͷ؅ཧϥΠϒϥϦΛར༻͢Δ͜ͱͰ࣮૷Λ؆ૉԽ w ϑΥʔϜͷঢ়ଶ؅ཧ w όϦσʔγϣϯͱΤϥʔϝοηʔδͷද੍ࣔޚ 4

3FBDU)PPL'PSNͷ֓ཁ

3FBDU)PPL'PSNͱ͸ w 3FBDUͰϑΥʔϜΛ؆୯ʹѻ͑ΔΑ͏ʹ͢ΔϥΠϒϥϦ w 3FBDUͷ)PPLTʹΑͬͯϑΥʔϜͷঢ়ଶ؅ཧ΍όϦσʔγϣϯ͕Մೳ w ϑΥʔϜͷೖྗঢ়ଶͷอ࣋ w όϦσʔγϣϯͱΤϥʔϝοηʔδͷදࣔ w
ϑΥʔϜͷૹ৴ॲཧ 6

3FBDU)PPL'PSNͷ࢖͍ํ w ϑΥʔϜϑΟʔϧυΛ3FBDU)PPL'PSNͰ؅ཧର৅ͱͯ͠ొ࿥ w ϑΥʔϜૹ৴࣌ͷॲཧΛࢦఆ w ϑΥʔϜͷόϦσʔγϣϯͱΤϥʔͷදࣔ 7

ϑΥʔϜσʔλͷܕఆٛ w ϑΥʔϜͰѻ͏σʔλͷܕΛఆٛ w ఆٛͨ͠ܕΛuseForm()ͷܕҾ਺ʹࢦఆՄೳ w ϑΥʔϜϑΟʔϧυͷ஋ͷܕࢦఆ͕ՄೳʹͳΔ 8 import {
useForm } from 'react-hook-form'; interface FormInput { name: string; email: string; age: number; } useForm<FormInput>();

ϑΥʔϜϑΟʔϧυͷొ࿥ w VTF'PSNIPPL͔Βregister()Λऔಘ w ϑΥʔϜϑΟʔϧυΛ3FBDU)PPL'PSNͷ؅ཧର৅ʹొ࿥ w register()ͷҾ਺ʹ͸ೖྗϑΥʔϜʹࢦఆ͢ΔҰҙͳ໊લΛࢦఆ w useForm()ͰܕҾ਺Λࢦఆͨ͠৔߹͸ͦͷܕͷϓϩύςΟ໊ͷΈʹ੍໿͞ΕΔ w
ϑΥʔϜཁૉ಺Ͱregister()Λ࢖༻ 9 const { register } = useForm<FormInput>(); return ( <form> <input {...register('name')} />  </form> );

ϑΥʔϜͷૹ৴ॲཧ w VTF'PSNIPPL͔ΒhandleSubmit()Λऔಘ w formཁૉͷonSubmitʹhandleSubmit()Λࢦఆ w handleSubmit()ͷҾ਺ʹϑΥʔϜૹ৴࣌ʹ࣮ߦ͢Δؔ਺Λࢦఆ 10 const {
register, handleSubmit } = useForm(); const onSubmit = (data: FormInput) => { // 送信時の処理 }; return ( <form onSubmit={handleSubmit(onSubmit)}>  </form> );

ϑΥʔϜͷόϦσʔγϣϯ w register()ͷୈҾ਺ʹόϦσʔγϣϯϧʔϧΛࢦఆ w ඞਢ΍࠷খ஋΍࠷େ஋ͳͲΛࢦఆՄೳ w Τϥʔϝοηʔδͷઃఆ΋Մೳ 11 const {
register } = useForm<FormInput>(); return ( <form> <input {...register('name', { required: { value: true, message: '必須項目です', } })} />  </form> );

Τϥʔϝοηʔδͷදࣔ w VTF'PSNIPPL͔ΒformStateΛऔಘͯ͠errorsΛऔΓग़͢ w errorsʹ͢΂ͯͷϑΥʔϜϑΟʔϧυͷΤϥʔΛแؚ w register()Ͱࢦఆͨ͠ϑΟʔϧυ໊ͱerrorsͷϓϩύςΟ໊͕ରԠ 12 const {
/* 略 */ formState: { errors } } = useForm(); return ( <form> <input {...register('name', { /* 略 */ }) /> {errors.name && (<span>{errors.name.message}</span>)} </form> );

;PEͷ֓ཁ

;PEͱ͸ w 5ZQF4DSJQU fi STUͳόϦσʔγϣϯϥΠϒϥϦ w ܕʹج͍ͮͯεΩʔϚΛఆٛ w จࣈྻͷΑ͏ͳ୯७ͳ΋ͷ͔Βෳࡶͳߏ଄·ͰॊೈʹఆٛՄೳ w
ఆٛͨ͠εΩʔϚʹج͍ͮͯೖྗ஋Λݕূ w ಛఆͷϥΠϒϥϦ΍ϑϨʔϜϫʔΫʹґଘ͠ͳ͍ w 3FBDU)PPL'PSNҎ֎ͷϑΥʔϜϥΠϒϥϦʹ΋ར༻Մೳ w 7VFͳͲͷ3FBDUҎ֎ͷϑϨʔϜϫʔΫͰ΋ར༻Մೳ 14

;PEͷ࢖͍ํ w ;PEͰόϦσʔγϣϯ͢ΔͨΊͷεΩʔϚΛఆٛ w όϦσʔγϣϯϧʔϧͳͲ΋߹Θͤͯఆٛ w ఆٛͨ͠εΩʔϚΛར༻ͯ͠ೖྗ஋Λݕূ w Τϥʔϝοηʔδͷઃఆ 15

εΩʔϚͷఆٛ w ;PEͷϝιουΛར༻ͯ͠εΩʔϚͷܕΛఆٛ w string()΍number()ͳͲͰجຊܕΛදݱ w object()ͰΦϒδΣΫτΛදݱ w Ҿ਺ͷΦϒδΣΫτͰ͞Βʹ;PEͷεΩʔϚͷܕఆ͕ٛՄೳ w
ೖΕࢠߏ଄ͷεΩʔϚͷఆٛ΋Մೳ w array()Ͱ഑ྻΛදݱ 16 import * as z from 'zod'; const UserSchema = z.object({ name: z.string(), email: z.email(), age: z.number(), });

ೖྗ஋ͷݕূ w parse()Λར༻ͯ͠εΩʔϚͷఆ͔ٛΒೖྗ஋Λݕূ w όϦσʔγϣϯΤϥʔ͕͋Δ৔߹͸ZodError͕UISPX͞ΕΔ w safeParse()Λར༻ͯ͠ݕূ݁ՌͷΦϒδΣΫτΛऔಘ w safeParse()Ͱ͸ZodError͸UISPX͞Εͳ͍ w
ݕূ݁ՌͷΦϒδΣΫτΛฦ٫ w ฦ٫ܕ͸ݕূ੒ޭɾࣦഊͷ݁ՌͷVOJPOܕ 17 try { UserSchema.parse({ name: 'foo', age: 31 }); } catch (error) { if (error instanceof z.ZodError) { // エラー処理 } }

Τϥʔϝοηʔδͷઃఆ w εΩʔϚఆٛͷؔ਺ͷҾ਺ͰΤϥʔϝοηʔδΛࢦఆՄೳ w ZodErrorͷmessageʹࢦఆͨ͠Τϥʔϝοηʔδ͕ઃఆ͞ΕΔ 18 z.email('Invalid email address'); z.number().positive('value
should be positive');

3FBDU)PPL'PSN ;PEͷ όϦσʔγϣϯ

3FBDU)PPL'PSNͱ;PEΛ૊Έ߹ΘͤΔ w @hookform/resolversΛΠϯετʔϧ w useForm()ͷresolverʹzodResolverΛࢦఆ w @hookform/resolvers/zod͔ΒJNQPSU w useForm()ͷܕҾ਺ʹ;PEͷεΩʔϚ͔Βੜ੒͞ΕΔܕΛࢦఆ w
ϑΥʔϜσʔλͷܕΛ;PEͷεΩʔϚఆٛͱ࿈ಈͤ͞Δ 20

εΩʔϚఆ͔ٛΒܕΛੜ੒ w ;PEͷinfer<>ͰεΩʔϚఆ͔ٛΒਪ࿦͞ΕͨܕΛੜ੒ w infer<>ͷܕҾ਺ʹ͸;PEͷεΩʔϚఆٛͷܕ৘ใΛࢦఆ w typeofԋࢉࢠͰܕ৘ใΛऔಘ w ੜ੒͞Εͨܕ͸ϑΥʔϜͷೖྗܕͱͯ͠ར༻Մೳ 21
const UserSchema = z.object({ name: z.string(), email: z.email(), age: z.number(), }); type UserType = z.infer<typeof UserSchema>;

3FBDU)PPL'PSNʹ;PEΛઃఆ w useForm()ͷΦϓγϣϯͷresolverʹzodResolver()Λࢦఆ w zodResolver()ͷҾ਺ʹ͸;PEͰఆٛͨ͠εΩʔϚΦϒδΣΫτΛࢦఆ w useForm()ͷܕҾ਺ʹ;PEͰੜ੒ͨ͠ܕΛࢦఆ w register()ͷόϦσʔγϣϯϧʔϧͷઃఆ͸ෆཁ w
;PEͷεΩʔϚఆٛʹج͍ͮͯࣗಈతʹόϦσʔγϣϯ͞ΕΔ 22 import { zodResolver } from '@hookform/resolvers/zod'; const { /* 略 */ } = useForm<UserType>({ resolver: zodResolver(UserSchema), });

/FYUKTͰར༻͢Δࡍͷ஫ҙ఺ w 3FBDU)PPL'PSN͸ΫϥΠΞϯταΠυͰͷΈಈ࡞ w 3FBDU)PPL'PSNΛར༻͢Δίϯϙʔωϯτʹ'use client'͕ඞཁ w αʔόʔίϯϙʔωϯτͰར༻͠Α͏ͱ͢ΔͱϏϧυΤϥʔ͕ൃੜ 23 'use
client'; import { useForm } from "react-hook-form";

·ͱΊ w 3FBDU)PPL'PSNͷجૅతͳ࢖͍ํʹ͍ͭͯઆ໌ w ;PEʹ͍ͭͯͷجૅతͳ࢖͍ํʹ͍ͭͯઆ໌ w 3FBDU)PPL'PSNͱ;PEΛ૊Έ߹Θͤͨར༻ํ๏ʹ͍ͭͯઆ໌ 24

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

એ఻ w ϑϩϯτΤϯυΧϯϑΝϨϯεؔ੢։࠵༧ఆ w ೔෇ ೔ w ৔ॴϚΠυʔϜ͓͓͔͞' w
ҰൠࢀՃνέοτ ·͍Ͳνέοτ ൃചத

React Hook Form と Zod によるフォームバリデーション

React Hook Form と Zod によるフォームバリデーション

SAW

More Decks by SAW

Other Decks in Programming

Featured

Transcript

3FBDU)PPL'PSNͱ;PEʹΑΔ ϑΥʔϜόϦσʔγϣϯ ϑϩϯτΤϯυษڧձJOେࡕ 4"8

$(whoami) w ࢯ໊Ճ౻फҰ࿠ ࡀ w ϋϯυϧωʔϜ4"8 w 9 چ5XJUUFS

ϑΥʔϜόϦσʔγϣϯͷඞཁੑ w ϢʔβʔͷೖྗϛεΛϑΥʔϜͷૹ৴લʹݕग़ w ೖྗඞਢͷ߲໨͕ೖྗ͞Ε͍ͯͳ͍ w ϝʔϧΞυϨε΍༣ศ൪߸ͳͲͷೖྗܗ͕ࣜਖ਼͘͠ͳ͍ w ೖྗ͞Εͨจࣈ਺͕ࢦఆͷൣғ಺ʹऩ·͍ͬͯͳ͍ w

ϑΥʔϜόϦσʔγϣϯͷ࣮ݱ w ϑΥʔϜͷ֤ϑΟʔϧυͷೖྗΛͦΕͧΕνΣοΫ w ֤ϑΟʔϧυʹରͯ͠όϦσʔγϣϯϧʔϧΛఆٛͯ͠ద༻ w ֤ϑΟʔϧυͷঢ়ଶ ݕূ݁ՌͳͲ ͷ؅ཧ͕ඞཁ w

3FBDU)PPL'PSNͷ֓ཁ

3FBDU)PPL'PSNͱ͸ w 3FBDUͰϑΥʔϜΛ؆୯ʹѻ͑ΔΑ͏ʹ͢ΔϥΠϒϥϦ w 3FBDUͷ)PPLTʹΑͬͯϑΥʔϜͷঢ়ଶ؅ཧ΍όϦσʔγϣϯ͕Մೳ w ϑΥʔϜͷೖྗঢ়ଶͷอ࣋ w όϦσʔγϣϯͱΤϥʔϝοηʔδͷදࣔ w

3FBDU)PPL'PSNͷ࢖͍ํ w ϑΥʔϜϑΟʔϧυΛ3FBDU)PPL'PSNͰ؅ཧର৅ͱͯ͠ొ࿥ w ϑΥʔϜૹ৴࣌ͷॲཧΛࢦఆ w ϑΥʔϜͷόϦσʔγϣϯͱΤϥʔͷදࣔ 7

ϑΥʔϜσʔλͷܕఆٛ w ϑΥʔϜͰѻ͏σʔλͷܕΛఆٛ w ఆٛͨ͠ܕΛuseForm()ͷܕҾ਺ʹࢦఆՄೳ w ϑΥʔϜϑΟʔϧυͷ஋ͷܕࢦఆ͕ՄೳʹͳΔ 8 import {

ϑΥʔϜϑΟʔϧυͷొ࿥ w VTF'PSNIPPL͔Βregister()Λऔಘ w ϑΥʔϜϑΟʔϧυΛ3FBDU)PPL'PSNͷ؅ཧର৅ʹొ࿥ w register()ͷҾ਺ʹ͸ೖྗϑΥʔϜʹࢦఆ͢ΔҰҙͳ໊લΛࢦఆ w useForm()ͰܕҾ਺Λࢦఆͨ͠৔߹͸ͦͷܕͷϓϩύςΟ໊ͷΈʹ੍໿͞ΕΔ w

ϑΥʔϜͷૹ৴ॲཧ w VTF'PSNIPPL͔ΒhandleSubmit()Λऔಘ w formཁૉͷonSubmitʹhandleSubmit()Λࢦఆ w handleSubmit()ͷҾ਺ʹϑΥʔϜૹ৴࣌ʹ࣮ߦ͢Δؔ਺Λࢦఆ 10 const {

ϑΥʔϜͷόϦσʔγϣϯ w register()ͷୈҾ਺ʹόϦσʔγϣϯϧʔϧΛࢦఆ w ඞਢ΍࠷খ஋΍࠷େ஋ͳͲΛࢦఆՄೳ w Τϥʔϝοηʔδͷઃఆ΋Մೳ 11 const {

Τϥʔϝοηʔδͷදࣔ w VTF'PSNIPPL͔ΒformStateΛऔಘͯ͠errorsΛऔΓग़͢ w errorsʹ͢΂ͯͷϑΥʔϜϑΟʔϧυͷΤϥʔΛแؚ w register()Ͱࢦఆͨ͠ϑΟʔϧυ໊ͱerrorsͷϓϩύςΟ໊͕ରԠ 12 const {

;PEͷ֓ཁ

;PEͱ͸ w 5ZQF4DSJQU fi STUͳόϦσʔγϣϯϥΠϒϥϦ w ܕʹج͍ͮͯεΩʔϚΛఆٛ w จࣈྻͷΑ͏ͳ୯७ͳ΋ͷ͔Βෳࡶͳߏ଄·ͰॊೈʹఆٛՄೳ w

;PEͷ࢖͍ํ w ;PEͰόϦσʔγϣϯ͢ΔͨΊͷεΩʔϚΛఆٛ w όϦσʔγϣϯϧʔϧͳͲ΋߹Θͤͯఆٛ w ఆٛͨ͠εΩʔϚΛར༻ͯ͠ೖྗ஋Λݕূ w Τϥʔϝοηʔδͷઃఆ 15

εΩʔϚͷఆٛ w ;PEͷϝιουΛར༻ͯ͠εΩʔϚͷܕΛఆٛ w string()΍number()ͳͲͰجຊܕΛදݱ w object()ͰΦϒδΣΫτΛදݱ w Ҿ਺ͷΦϒδΣΫτͰ͞Βʹ;PEͷεΩʔϚͷܕఆ͕ٛՄೳ w

ೖྗ஋ͷݕূ w parse()Λར༻ͯ͠εΩʔϚͷఆ͔ٛΒೖྗ஋Λݕূ w όϦσʔγϣϯΤϥʔ͕͋Δ৔߹͸ZodError͕UISPX͞ΕΔ w safeParse()Λར༻ͯ͠ݕূ݁ՌͷΦϒδΣΫτΛऔಘ w safeParse()Ͱ͸ZodError͸UISPX͞Εͳ͍ w

Τϥʔϝοηʔδͷઃఆ w εΩʔϚఆٛͷؔ਺ͷҾ਺ͰΤϥʔϝοηʔδΛࢦఆՄೳ w ZodErrorͷmessageʹࢦఆͨ͠Τϥʔϝοηʔδ͕ઃఆ͞ΕΔ 18 z.email('Invalid email address'); z.number().positive('value

3FBDU)PPL'PSN ;PEͷ όϦσʔγϣϯ

3FBDU)PPL'PSNͱ;PEΛ૊Έ߹ΘͤΔ w @hookform/resolversΛΠϯετʔϧ w useForm()ͷresolverʹzodResolverΛࢦఆ w @hookform/resolvers/zod͔ΒJNQPSU w useForm()ͷܕҾ਺ʹ;PEͷεΩʔϚ͔Βੜ੒͞ΕΔܕΛࢦఆ w

εΩʔϚఆ͔ٛΒܕΛੜ੒ w ;PEͷinfer<>ͰεΩʔϚఆ͔ٛΒਪ࿦͞ΕͨܕΛੜ੒ w infer<>ͷܕҾ਺ʹ͸;PEͷεΩʔϚఆٛͷܕ৘ใΛࢦఆ w typeofԋࢉࢠͰܕ৘ใΛऔಘ w ੜ੒͞Εͨܕ͸ϑΥʔϜͷೖྗܕͱͯ͠ར༻Մೳ 21

3FBDU)PPL'PSNʹ;PEΛઃఆ w useForm()ͷΦϓγϣϯͷresolverʹzodResolver()Λࢦఆ w zodResolver()ͷҾ਺ʹ͸;PEͰఆٛͨ͠εΩʔϚΦϒδΣΫτΛࢦఆ w useForm()ͷܕҾ਺ʹ;PEͰੜ੒ͨ͠ܕΛࢦఆ w register()ͷόϦσʔγϣϯϧʔϧͷઃఆ͸ෆཁ w

/FYUKTͰར༻͢Δࡍͷ஫ҙ఺ w 3FBDU)PPL'PSN͸ΫϥΠΞϯταΠυͰͷΈಈ࡞ w 3FBDU)PPL'PSNΛར༻͢Δίϯϙʔωϯτʹ'use client'͕ඞཁ w αʔόʔίϯϙʔωϯτͰར༻͠Α͏ͱ͢ΔͱϏϧυΤϥʔ͕ൃੜ 23 'use

·ͱΊ w 3FBDU)PPL'PSNͷجૅతͳ࢖͍ํʹ͍ͭͯઆ໌ w ;PEʹ͍ͭͯͷجૅతͳ࢖͍ํʹ͍ͭͯઆ໌ w 3FBDU)PPL'PSNͱ;PEΛ૊Έ߹Θͤͨར༻ํ๏ʹ͍ͭͯઆ໌ 24

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

એ఻ w ϑϩϯτΤϯυΧϯϑΝϨϯεؔ੢։࠵༧ఆ w ೔෇ ೔ w ৔ॴϚΠυʔϜ͓͓͔͞' w