React TypeScript

ReactとTypeScriptでフォームのバリデーションを自作した話 | React Hooks


ReactとTypeScriptでフォームのバリデーションをするとき、何か良い方法はないかなと検討をしていました。

React Form Hooksというnpmを使うと良いみたいな話も聞いたのですが、refを使ってるので良くないという話も聞きました。

ですので、自作することにしたのです。

条件的には、ステートの管理が煩雑にならないようにオブジェクトでフォームの値を一括管理して、

jsのsome関数でオブジェクトのメンバーの値が全てtrueになってたら、バリデーションが通ったということで、

ボタンが押せるという仕様です。

型を作る

まずはTypeScriptでユーザー登録の型を作っておきます。一旦、今回のバリデーションは、メールアドレスと名字と名前のみ、作ります。

export type MemberCreate = {
  eMail: boolean
  seiKana: boolean
  meiKana: boolean
}

型が出来たら、こんな感じでuseStateにオブジェクトを作って、ステートで管理します、最初は全てのバリデーションに落ちるように全部falseです。

このオブジェクトのメンバーが全てtrueになったらボタンが押せるという具合です。

const [isValidation, setValidation] = useState<MemberCreate>({
    eMail: false,
    meiKana: false,
    seiKana: false
  })

次、useEfectを使って、フォームから値が入力されて値が変わったら、その値の変更をキャッチしてuseEfectが発火するようにします。

正規表現を使って、パターンを決めます、この正規表現の精度は気にしないでください、とりあえずメアド、それから日本語のひらがなの場合フラグをtrueにしてオブジェクトを更新します。

  useEffect(() => {
    const patternEmail = /[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]/
    const patternHiragana = /^[\u3040-\u309F]+$/

    setValidation({
      ...isValidation,
      meiKana: patternHiragana.test(meiKana) ? true : false,
      eMail: patternEmail.test(email) ? true : false,
      seiKana: patternHiragana.test(seiKana) ? true : false
    })
  }, [email, meiKana, seiKana])

老婆心で付け加えておくと、それぞれのフォームの値は、下記のような感じで作っています。

const [email, setEmail] = useState<string>('')
<Grid item xs={12}>
    <TextField
       variant="outlined"
       onChange={e => setEmail(e.target.value)}
       fullWidth
       label="メールアドレス"
    />
</Grid>

最後に、オブジェクトのメンバーの値が全部trueだったらボタンを押せるようにsome関数を使ってバリデーションを判定します。

 <Button
    disabled={Object.values(isValidation).some(
      isAllValidationsPassed => isAllValidationsPassed !== true)}

これでいける、実行動画は下記のような感じです。色々とフォームがありますが、今は名字と名前のひらがなフォームが、どっちもひらがなだけだった場合、なおかつメールアドレスが正しい場合のみ、

オブジェクトのメンバーの値が全部trueなので、ボタンが押せるようになります。それで、some関数は、オブジェクトのメンバーに一つでもfalseがあれば結果としてfalseを返すので、ボタンが押せず、フォームバリデーションが機能しますということでございます。

Pocket
LinkedIn にシェア

React入門者へおすすめ動画&書籍おすすめ!

フロントエンド入門者へおすすめ動画&書籍おすすめ!

  • この記事を書いた人

藤沢瞭介(Ryosuke Hujisawa)

りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

-React, TypeScript

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.