tkc310.com

技術学習ログ更新

Reactのフォーム、バリデーションライブラリの比較

目次
  1. Reactフォームライブラリの比較
  2. react-final-form vs react-hook-form
  3. 結論
  4. バリデーションライブラリの比較
  5. yup vs zod
  6. 結論
  7. 余談

Reactフォームライブラリの比較

formik vs react-final-form vs react-hook-form vs react-redux-form | npm trends
Comparing trends for formik 2.4.9 which has 2,486,438 weekly downloads and 34,307 GitHub stars vs. react-final-form 7.0.1 which has 295,698 weekly downloads and 7,434 GitHub stars vs. react-hook-form 7.90.0 which has 32,173,754 weekly downloads and 44,863 GitHub stars vs. react-redux-form 1.16.14 which has 3,770 weekly downloads and 2,038 GitHub stars.
www.npmtrends.com
  • react-redux-form: 状態管理にreduxを利用していないため除外
  • formic: 再レンダリングパフォーマンスが悪いらしいため除外
  • react-final-form
  • react-hook-form
react-hook-form.com
react-hook-form.com

react-final-form vs react-hook-form

react-final-form, react-hook-formを比較する。

react-final-form

  • 3.2kb (+ final-form 5.2kb)
  • ts型ビルトイン
  • Blitz.jsで採用されている。
  • name, value, handlerなどをコンポーネントに渡す形式

ドキュメント
https://final-form.org/docs/react-final-form/api https://final-form.org/docs/react-final-form/types/FieldRenderProps

chakrauiとの併用サンプル https://codesandbox.io/s/github/final-form/react-final-form/tree/master/examples/chakra?file=/index.js:5672-5679

hooksもある https://github.com/final-form/react-final-form-hooks

react-hook-form

  • 8.2KB
  • ts型ビルトイン
  • react-final-formより人気
  • ドキュメントが見やすい、日本語記事も見つかりやすい
  • 最大/最小値、必須、正規表現などもビルトインでできる
  • refをコンポーネントに渡す形式

ドキュメント https://react-hook-form.com/api https://react-hook-form.com/api/useform/register

chakrauiとの併用サンプル https://chakra-ui.com/guides/integrations/with-hook-form

外部ライブラリのコンポーネント、自作コンポーネントはrefを渡せるようにする必要がある。 自作の場合は React.forwardRef で対応できる。 https://ja.reactjs.org/docs/forwarding-refs.html

結論

どちらも出来ることに差はなさそう

react-hook-formはrefを渡すインターフェースが特徴的で、react-final-formの方がシンプルに見える。 ドキュメントが充実していて、日本語記事も多いためreact-hook-formを選んでおくのが無難そうではある。

バリデーションライブラリの比較

バリデーションライブラリの比較をする。 シンプルなAPIのものを利用して複雑なバリデーションは自作する方針にしたい。

参考記事 https://bagelee.com/programming/react/validation-library/ https://github.com/react-hook-form/resolvers https://www.npmtrends.com/io-ts-vs-joi-browser-vs-superstruct-vs-vest-vs-yup-vs-zod とりあえず沢山あることが分かった..

下記がメジャーで日本語記事もよく見つかる。

  • yup
  • zod

yup vs zod

yupとzodを比較する。 zodのREADME.mdに比較内容が記載されている。 https://github.com/colinhacks/zod#comparison

yup

  • 18.2kb
  • デフォルト任意入力
  • APIの差分
    • nubmer.round
    • object.camelCase
    • string.trim
    • cast, transform

API https://github.com/jquense/yup

zod

  • 11.3kb
  • デフォルト必須入力
  • APIの差分
    • object.partial, object.deepPartial
    • union, intersection
    • primise
    • function
  • Blitz.jsで採用されている (final-form x zod)

API https://github.com/colinhacks/zod#defining-schemas

Blitz.js https://blitzjs.com/docs/utilities

yupは途中からzodは最初からtypescriptに対応していたという経緯があるからか、下記の記事に書かれているように型生成時の挙動が安定していない部分があるらしい。 https://bagelee.com/programming/react/validation-library/#4

react-hook-formと組み合わせる場合、zodでnumberを扱う時に { valueAsNumber: true } のような記載をする必要がある。 scheme自体はyupよりzodの方がシンプルに見える。

結論

ユーザ数はyupが圧倒的に多いため困った時に助かりそうだが、Blitz.jsが採用している & typescriptフレンドリーなzodを利用してみたいと思った。

余談

Ant Designはビルトインで Form コンポーネントにtypescript対応のstate管理とバリデーションが付いている。

async-validatorという薄い(4.5kb)ライブラリが利用されていた。 https://github.com/yiminghe/async-validator

Ant Designを利用する場合はreact-hook-form, zodを利用せず、ビルトインのシンプルなAPIで頑張れそうだと思った。