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

フロントエンド勉強会 in 大阪 の発表資料です。

1. 3FBDU
   )PPL
   'PSN
   ͱ
   ;PE
   ʹΑΔ
   ϑΥʔϜόϦσʔγϣϯ ϑϩϯτΤϯυษڧձ
   JO
   େࡕ
    4"8
2. $(whoami) w ࢯ໊
   Ճ౻
   फҰ࿠
   
   ࡀ
   w ϋϯυϧωʔϜ
   4"8
   w 9
   چ
   5XJUUFS 
   !B[VLJ@FBUFS
   w ؔ੢ͷ
   *5
   ΤϯδχΞ
   ίϛϡχςΟͷ೐΍͔͠
   ࣗশ
   w େࡕࡏॅɾѪ஌ग़਎
   w ಘҙ෼໺
   8FC
   ΞϓϦέʔγϣϯ։ൃ
   w -BSBWFM
   7VF
   w ॴଐ
   ༗ݶձࣾΞϦ΢ʔϓ 2 ඇৗ༻ίοΫͷதʹ
   খ͞ͳίοΫ͞Μ͸ೖ͍ͬͯͳ͍ ࠓ೔ͷ໎ݴ
3. ϑΥʔϜόϦσʔγϣϯͷඞཁੑ w ϢʔβʔͷೖྗϛεΛϑΥʔϜͷૹ৴લʹݕग़
   w ೖྗඞਢͷ߲໨͕ೖྗ͞Ε͍ͯͳ͍
   w ϝʔϧΞυϨε΍༣ศ൪߸ͳͲͷೖྗܗ͕ࣜਖ਼͘͠ͳ͍
   w ೖྗ͞Εͨจࣈ਺͕ࢦఆͷൣғ಺ʹऩ·͍ͬͯͳ͍
   w Ͳͷ߲໨ʹΤϥʔ͕͋Δ͔Ϣʔβʔʹࢹ֮తʹೝࣝͤ͞Δ
   w ೖྗΤϥʔͷ͋Δ߲໨ʹରͯ͠Τϥʔ಺༰ͷϝοηʔδΛදࣔ
   w Ϣʔβʔ͸Τϥʔϝοηʔδͷ಺༰Λ֬ೝͯ͠ଈ࠲ʹೖྗΛमਖ਼Ͱ͖Δ 3
4. ϑΥʔϜόϦσʔγϣϯͷ࣮ݱ w ϑΥʔϜͷ֤ϑΟʔϧυͷೖྗΛͦΕͧΕνΣοΫ
   w ֤ϑΟʔϧυʹରͯ͠όϦσʔγϣϯϧʔϧΛఆٛͯ͠ద༻
   w ֤ϑΟʔϧυͷঢ়ଶ
   ݕূ݁ՌͳͲ
   ͷ؅ཧ͕ඞཁ
   w Τϥʔ͕͋ΔϑΟʔϧυʹରͯ͠ΤϥʔϝοηʔδΛద੾ʹදࣔ
   w ϑΟʔϧυͷݕূ݁Ռʹج͍ͮͯΤϥʔͷදࣔɾඇදࣔͷঢ়ଶͷ؅ཧ͕ඞཁ
   w ϑΥʔϜͷ؅ཧϥΠϒϥϦΛར༻͢Δ͜ͱͰ࣮૷Λ؆ૉԽ
   w ϑΥʔϜͷঢ়ଶ؅ཧ
   w όϦσʔγϣϯͱΤϥʔϝοηʔδͷද੍ࣔޚ 4
5. 3FBDU
   )PPL
   'PSN
   ͷ֓ཁ
6. 3FBDU
   )PPL
   'PSN
   ͱ͸ w 3FBDU
   ͰϑΥʔϜΛ؆୯ʹѻ͑ΔΑ͏ʹ͢ΔϥΠϒϥϦ
   w 3FBDU
   ͷ
   )PPLT
   ʹΑͬͯϑΥʔϜͷঢ়ଶ؅ཧ΍όϦσʔγϣϯ͕Մೳ
   w ϑΥʔϜͷೖྗঢ়ଶͷอ࣋
   w όϦσʔγϣϯͱΤϥʔϝοηʔδͷදࣔ
   w ϑΥʔϜͷૹ৴ॲཧ 6
7. 3FBDU
   )PPL
   'PSN
   ͷ࢖͍ํ w ϑΥʔϜϑΟʔϧυΛ
   3FBDU
   )PPL
   'PSN
   Ͱ؅ཧର৅ͱͯ͠ొ࿥
   w ϑΥʔϜૹ৴࣌ͷॲཧΛࢦఆ
   w ϑΥʔϜͷόϦσʔγϣϯͱΤϥʔͷදࣔ 7
8. ϑΥʔϜσʔλͷܕఆٛ w ϑΥʔϜͰѻ͏σʔλͷܕΛఆٛ
   w ఆٛͨ͠ܕΛ
   useForm()
   ͷܕҾ਺ʹࢦఆՄೳ
   w ϑΥʔϜϑΟʔϧυͷ஋ͷܕࢦఆ͕ՄೳʹͳΔ 8 import { useForm } from 'react-hook-form'; interface FormInput { name: string; email: string; age: number; } useForm<FormInput>();
9. ϑΥʔϜϑΟʔϧυͷొ࿥ w VTF'PSN
   IPPL
   ͔Β
   register()
   Λऔಘ
   w ϑΥʔϜϑΟʔϧυΛ
   3FBDU
   )PPL
   'PSN
   ͷ؅ཧର৅ʹొ࿥
   w register()
   ͷҾ਺ʹ͸ೖྗϑΥʔϜʹࢦఆ͢ΔҰҙͳ໊લΛࢦఆ
   w useForm()
   ͰܕҾ਺Λࢦఆͨ͠৔߹͸ͦͷܕͷϓϩύςΟ໊ͷΈʹ੍໿͞ΕΔ
   w ϑΥʔϜཁૉ಺Ͱ
   register()
   Λ࢖༻ 9 const { register } = useForm<FormInput>(); return ( <form> <input {...register('name')} /> <!-- 略 --> </form> );
10. ϑΥʔϜͷૹ৴ॲཧ w VTF'PSN
    IPPL
    ͔Β
    handleSubmit()
    Λऔಘ
    w form
    ཁૉͷ
    onSubmit
    ʹ
    handleSubmit()
    Λࢦఆ
    w handleSubmit()
    ͷҾ਺ʹϑΥʔϜૹ৴࣌ʹ࣮ߦ͢Δؔ਺Λࢦఆ 10 const { register, handleSubmit } = useForm(); const onSubmit = (data: FormInput) => { // 送信時の処理 }; return ( <form onSubmit={handleSubmit(onSubmit)}> <!-- 略 --> </form> );
11. ϑΥʔϜͷόϦσʔγϣϯ w register()
    ͷୈҾ਺ʹόϦσʔγϣϯϧʔϧΛࢦఆ
    w ඞਢ΍࠷খ஋΍࠷େ஋ͳͲΛࢦఆՄೳ
    w Τϥʔϝοηʔδͷઃఆ΋Մೳ 11 const { register } = useForm<FormInput>(); return ( <form> <input {...register('name', { required: { value: true, message: '必須項目です', } })} /> <!-- 略 --> </form> );
12. Τϥʔϝοηʔδͷදࣔ w VTF'PSN
    IPPL
    ͔Β
    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> );
13. ;PE
    ͷ֓ཁ
14. ;PE
    ͱ͸ w 5ZQF4DSJQU fi STU
    ͳόϦσʔγϣϯϥΠϒϥϦ
    w ܕʹج͍ͮͯεΩʔϚΛఆٛ
    w จࣈྻͷΑ͏ͳ୯७ͳ΋ͷ͔Βෳࡶͳߏ଄·ͰॊೈʹఆٛՄೳ
    w ఆٛͨ͠εΩʔϚʹج͍ͮͯೖྗ஋Λݕূ
    w ಛఆͷϥΠϒϥϦ΍ϑϨʔϜϫʔΫʹґଘ͠ͳ͍
    w 3FBDU
    )PPL
    'PSN
    Ҏ֎ͷϑΥʔϜϥΠϒϥϦʹ΋ར༻Մೳ
    w 7VF
    ͳͲͷ
    3FBDU
    Ҏ֎ͷϑϨʔϜϫʔΫͰ΋ར༻Մೳ 14
15. ;PE
    ͷ࢖͍ํ w ;PE
    ͰόϦσʔγϣϯ͢ΔͨΊͷεΩʔϚΛఆٛ
    w όϦσʔγϣϯϧʔϧͳͲ΋߹Θͤͯఆٛ
    w ఆٛͨ͠εΩʔϚΛར༻ͯ͠ೖྗ஋Λݕূ
    w Τϥʔϝοηʔδͷઃఆ 15
16. εΩʔϚͷఆٛ 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(), });
17. ೖྗ஋ͷݕূ 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) { // エラー処理 } }
18. Τϥʔϝοηʔδͷઃఆ w εΩʔϚఆٛͷؔ਺ͷҾ਺ͰΤϥʔϝοηʔδΛࢦఆՄೳ
    w ZodError
    ͷ
    message
    ʹࢦఆͨ͠Τϥʔϝοηʔδ͕ઃఆ͞ΕΔ 18 z.email('Invalid email address'); z.number().positive('value should be positive');
19. 3FBDU
    )PPL
    'PSN
    
    ;PE
    ͷ
    όϦσʔγϣϯ
20. 3FBDU
    )PPL
    'PSN
    ͱ
    ;PE
    Λ૊Έ߹ΘͤΔ w @hookform/resolvers
    ΛΠϯετʔϧ
    w useForm()
    ͷ
    resolver
    ʹ
    zodResolver
    Λࢦఆ
    w @hookform/resolvers/zod
    ͔Β
    JNQPSU
    w useForm()
    ͷܕҾ਺ʹ
    ;PE
    ͷεΩʔϚ͔Βੜ੒͞ΕΔܕΛࢦఆ
    w ϑΥʔϜσʔλͷܕΛ
    ;PE
    ͷεΩʔϚఆٛͱ࿈ಈͤ͞Δ 20
21. εΩʔϚఆ͔ٛΒܕΛੜ੒ 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>;
22. 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), });
23. /FYUKT
    Ͱར༻͢Δࡍͷ஫ҙ఺ w 3FBDU
    )PPL
    'PSN
    ͸ΫϥΠΞϯταΠυͰͷΈಈ࡞
    w 3FBDU
    )PPL
    'PSN
    Λར༻͢Δίϯϙʔωϯτʹ
    'use client'
    ͕ඞཁ
    w αʔόʔίϯϙʔωϯτͰར༻͠Α͏ͱ͢ΔͱϏϧυΤϥʔ͕ൃੜ 23 'use client'; import { useForm } from "react-hook-form";
24. ·ͱΊ w 3FBDU
    )PPL
    'PSN
    ͷجૅతͳ࢖͍ํʹ͍ͭͯઆ໌
    w ;PE
    ʹ͍ͭͯͷجૅతͳ࢖͍ํʹ͍ͭͯઆ໌
    w 3FBDU
    )PPL
    'PSN
    ͱ
    ;PE
    Λ૊Έ߹Θͤͨར༻ํ๏ʹ͍ͭͯઆ໌ 24
25. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
26. એ఻ w ϑϩϯτΤϯυΧϯϑΝϨϯεؔ੢
    
    ։࠵༧ఆ
    w ೔෇
    
    ೔
    w ৔ॴ
    ϚΠυʔϜ͓͓͔͞
    '
    w ҰൠࢀՃνέοτ
    ·͍Ͳνέοτ
    ൃചத