React お ど う ぐ ば こ〜Form編〜【React × Typescript × React Hook Form × Zod】
お初にお目にかかります。みのりと申します。ｍ（＿＿）ｍ
いつもこちらのサイト様（=Zenn）には、大変お世話になっております。
そんなGeekの皆さんが集う中にお邪魔して良いのかわからないのですが、
汎用的（この言葉も死語かしらん）に使えそうな（あくまで「使えそう」）部品を恩返し的にご提供できればと思い、ちまちま書いてみた過去の落穂拾い的な駄コードを、恥を忍んでアップしてみようという次第です。
御用とお急ぎでなかったら、ゆっくりしてってね！ ＞ 定型文
さて、前置きがありえないくらい長くなりましたが、「そういったもの」 を 「おどうぐばこ」 と名付けまして、これから挙げさせて頂こうかと。
第一回に選ばせて頂いたのは、Reactです。
「そういったもの」……の代表選手と言えば、やはり 「Form」 関連ではないでしょうか？
大抵のシステムは、INとOUTで成り立っていますよね。
そのINを担う 「Form」。
こちらは、システム開発とは切っても切り離せないよく使われる 「おどうぐ」 かと。
そこで、今回は、React を使った個人的に最強と思われる組み合わせでFormの雛形を作成してみました。
組み合わせ
React × Typescript × React Hook Form × Zod
フォーム全体像
Validation時
搭載Form部品
- てきすとぼっくす
- せれくとぼっくす
- らじおぼたん
- ちぇっくぼっくす
- てきすとえりあ
- ぼたん
搭載Validation
- てきすとぼっくすになんか書いてないと怒られるやつ
- めーるあどれすの形式じゃないと怒られるやつ
- めーるあどれすをもう一回入力して、違っていたら怒られるやつ
- せれくとぼっくす選んでないと怒られるやつ
- らじおぼたん選んでないと怒られるやつ
- ちぇっくぼっくすにちぇっくしてないと怒られるやつ
- てきすとえりあになんか書いてないと怒られるやつ
なぜReact Hook Formなのか
業務では、Redux Form、Formik、React Hook Formの全てを使ったことがあります。
現在、React Hook Formを愛用しているのは、以下の点からです。
- 処理速度の速さ
- 豊富なValidationライブラリ（
Yup、Zod等）と組み合わせ可 - 軽量なライブラリ
で、特に処理速度で感じたエピソードをひとつ。
業務で、Formikを利用した際、フォーム選択された値を表示する処理がありまして。
フォームの項目が膨大で、割と処理も遅い印象だったのですが、 React Hook Formへ切り替えた際、速いなと。しかも、最近、v6からv7にアップデートした際、更に処理速度が上がっているなあと体感できるほどで。
いやあ、すごいや。ブルースリーのアイコンの人。（コラ）
なぜZodなのか
実は、元々業務では長年、React Hook Form × Yupの組み合わせで対応していました。
ですが、今回、せっかく個人でサンプルを作成するので、使ったことのないライブラリを試してみたいなあという願望というか欲望と以下の理由からZodを採用してみました。
-
Typescriptとの相性が良い（スキーマからTypeScriptの型を自動的に作成できる） - 2020年登場と、比較的新参者（失礼）のくせに（失礼の上塗り）、Yupと互角の戦いを繰り広げている、てか、抜いた！？（下記資料参照）
2023年8月時点での比較
どうでもいいことですが、Zodのimportがzって、シンプルでいいですよね。
てか、ド○ゴンボ○ルを思い出してしまうのは、私だけでしょうか。（ほんとにどうでもいい）
何はともあれ……
さて、このように大変恐縮なシロモノですが、何かのお役に立つようでしたら、みんな大好きGitHubにコードを置いてありますので、ご自由にお使い下さい。
詳細もそちらのReadMeにございます。
次回は、テーマをVueにして 「Form」の最強伝説（大袈裟な大法螺） を追求してみたいと思います。
お暇なら次回も見てよね（はあと）。 ＞ 定型文ではじまり、定型文で締める
ちなみに、ちらほら顔を見せている 「最強」 というワードは、もちろん、ネタです。 本気で突っ込まないで下さいね。
初めての投稿がこれでよかったのか、今日も悩みの尽きないみのりさんでした。。
Discussion