背景
業務でFormikを使っているのでそもそもなぜ作られたのかについて調査しました。
前の職場だとReact-Hook-Formを使っていました。今の職場でFormikを初めて知りました。
Formikとは
React上で動くフォームライブラリです。
download数についてはReact-Hook-Formと大きく差があるものの規模は大きいと言えます。
次にformikの起源について以下のdocを参考にまとめます。
Formikが生まれたきっかけ
I (@jaredpalmer) wrote Formik while building a large internal administrative dashboard with @eonwhite. With around ~30 unique forms, it quickly became obvious that we could benefit by standardizing not just our input components but also the way in which data flowed through our forms.
jaredpalmerさんとeonwhiteさんが大規模な社内管理ダッシュボードを作っているときにFormikが生まれたそうです。
そのプロジェクトには約30のフォームがあったので入力コンポーネントだけでなく、フォームを通してデータが流れる方法も標準化すると恩恵を受けられることがすぐに分かったそうです。
Formikが目指しているもの
My goal with Formik was to create a scalable, performant, form helper with a minimal API that does the really really annoying stuff, and leaves the rest up to you.
「最小限のAPIでスケーラブルでパフォーマンスも高く面倒なことをやってくれて、それ以外は自分でカスタマイズできる」ようにすることだそうです。
「なぜRedux-FormがあるのにFormikを作るのか？」というセクションについて
Redux-Formとの比較について記載されています。
Formikは2017年
Redux-Formは2015年に登場しています。
Formikができる前はRedux-Formが覇権を取っていたと思われます。
今最も人気のあるReact-Hook-Formは2019年に登場していたので当時はこのような経緯でRedux-Formについて触れているんだと思いました。
次にdocではRedux-Formで出た課題について説明が書かれていました。
フォームの状態はそもそもReduxに入れる必要はない
Dan Abramovさん（Reduxの作者）いわく、
「フォームの状態は一時的かつ局所的なものだから、わざわざReduxみたいなアプリ全体の状態管理ツールで管理する必要はない」とのことです。
Redux-Formはサイズが大きい
| ライブラリ | サイズ（min+gzip） |
|---|---|
| Redux-Form | 22.5 kB |
| Formik | 12.7 kB |
Redux-Formは遅くなる
Redux-Formは、キーボード入力のたびにRedux のトップレベルのreducerを何度も呼び出す。
→ 小規模なアプリならいいけど、アプリが大きくなるとどんどん遅くなる（入力が重くなる）。
バリデーションにYupが使われる理由とZod対応
Formikのバリデーションはユーザーがカスタマイズ可能です。
独自のバリデータを書くのも、サードパーティのライブラリを使うのも自由です。
FormikにはvalidationSchemaというYup用の特別な設定オプション/プロップがあります。
このようになっている背景はFormikができた当時はYupがバリデーションで覇権を取っていたことが関係していると思います。
yupの登場時期：2016年
zodの登場時期：2020年
Formikは次に紹介するライブラリを使えばZodもバリデーションに使用できます。
zod-formik-adapterでzodに対応できる
こちらでZodスキーマをFormikのvalidationSchemaとして使えるようにできます。
業務ではこちらを使っています。
まとめ
Formikが生まれた背景を理解できました。
当時の背景を推測することでFormikがなぜこのような実装になっているのかも理解できました。
なぜを突き詰めるのは今後自分の技術選定にも生きるので改めて大切だなと思いました。
今後の学習方針
次は今後の業務でのフォームライブラリの技術選定の為にもReact-Hook-FormとFormikの違いについても調べたいです。
また、以下の動画でもFormikの理解が深まるそうなので見たいと思います。
この講演では、Formikの誕生の動機や設計哲学を解説しながら、Jared Palmer氏がミニFormikの実装をライブで構築するそうです。
さらに、配列やカスタム入力を使った複雑なフォームの実例もデモされており、Formikの活用イメージが深まる内容になっているとのことです。
参考
Discussion