【TanStack Form入門】TanStack Form？何それおいしいの？
✨ はじめに
Webアプリを開発する際、フォームの実装はほぼ必須といっても過言ではありません。
Reactを使用してフォームを実装する際、React Hook Form や Formik などのライブラリを使用することが一般的です。
そんなフォーム界隈に新たなライブラリが登場しました！！
今回は、その新ライブラリTanStack Formの使い方を紹介します！
🛢️ 序章 : TanStack Form とは
概要
「High-quality open-source software for web developers.(ウェブ開発者向けの高品質なオープンソースソフトウェア)」をコンセプトに掲げるTanStackが提供するフォームライブラリです。
（同コミュニティは、TanStack Query や TanStack Router などのライブラリも提供しており、これらのライブラリは、利用者からかなり高い評価を受けています）
2024年10月現在、v0.x というバージョンであり、まだまだ開発途中のライブラリです。
開発途中ではありますが、Githubやnpmのデータを見る限りでは、スター数やダウンロード数が着実に増えていることがわかります。
特徴
-
ファーストクラスのTypeScriptサポート
Default TypeScript support
はい。もはやTypeScriptサポートは当たり前ですが、TanStack FormももちろんTypeScriptサポートがされています。
React Hook Form と同等レベルで型補完が効くため、型安全なコードを書くことができます。 -
ヘッドレスでフレームワークに依存しない
さまざまなフレームワークで動作するよう、別々のパッケージが提供されています。
各フレームワーク間で一部機能が異なりますが、coreのAPIは共通なため、フレームワークにとらわれることなく技術選定が可能です。サポートされているフレームワークは以下の通りです。
- React
- Vue
- Angular
- Solid
- Lit
-
最適化されたリアクティブパフォーマンス
coreのAPIは、リアクティブなパフォーマンスを最適化するために設計されています。
フォームに値が入力された時、変換した値に関連するFieldのみに変更が伝播されるように設計されています。
Reactだと、際レンダリングの最適化にはかなりのコストをかけなければいけませんが、TanStack Formはその辺りを自動で行ってくれるため、開発者はその辺りを意識する必要がありません。
🎉 1章 : インストール
ReactとZodの組み合わせでフォームを実装する方法を紹介します。
以下の3つのパッケージをインストールします。
npm install @tanstack/react-form @tanstack/zod-form-adapter zod
-
@tanstack/react-form: TanStack FormのReact版 -
@tanstack/zod-form-adapter: ZodとTanStack Formを組み合わせるためのアダプタ -
zod: バリデーションライブラリ
👶 2章 : 超基本的な使い方
TanStack Form を動作させるのに最低限必要な使い方です。
ポイント解説
useForm (4-11)
フォームを定義します
-
defaultValues: フォームのKey/初期値を設定します。ここに設定したKeyのみが他の機能ででてくるnameという引数になります。 -
onSubmit: フォームがSubmitされた時に実行される関数を設定します。引数にはフォームの値が渡されます。
onSubmit (17-20)
form.handleSubmit を呼び出すことで、useFormで設定したonSubmitが実行されます。
form.Field (22-35)
StanStack FormのFieldコンポーネントです。
Headlessなコンポーネントとなっており、name と children を最低限の引数に取ります。
name は、useFormで設定したdefaultValues のKeyと一致する値を指定します。（型補完が効きます）
children には、フォームの入力要素を指定します。fieldをいう引数を受け取ることができ、これを使って要素の値とTanStack Formの値をバインドすることができます。
🧒 3章 : Zodを使ってバリデーションを設定する方法
ポイント解説
useForm.validatorAdapter (10)
useFormにzodValidator()を渡してあげることで、定義したform内でZodを使ったバリデーションを行うことができます。
const form = useForm({
// ...
validatorAdapter: zodValidator(),
// ...
});
useForm.validators (11-14)
フォーム全体に適用するバリデーションを設定します。
複数の入力値を使用してバリデーションを行う場合は、ここに定義を書くと良いでしょう！
バリデーションを実行するタイミング別にバリデーションを設定することが可能です。
onChangeAsync, onBlurAsync, onSubmitAsync などを使うことで、入力値が変更された時やフォームがSubmitされた時に、非同期でバリデーションを行うことも可能です。
const form = useForm({
// ...
validators: {
onMount: {/* ... */},
onChange: {/* ... */},
onChangeAsync: {/* ... */},
onBlur: {/* ... */},
onBlurAsync: {/* ... */},
onSubmit: {/* ... */},
onSubmitAsync: {/* ... */},
},
// ...
});
form.Field.validators (32-34)
Fieldコンポーネントにバリデーションを設定します。
できることはuseForm.validatorと同様です。
🧑 4章 : エラーハンドリング
ポイント解説
useForm.onSubmitInvalid (19-21)
初めてSubmitボタンが押されて、バリデーションが行われた時にエラーがあった場合に実行される関数を設定します。
field.state.meta.errors (49-51)
Fieldコンポーネントのvalidatorsで設定したバリデーションが失敗した場合、field.state.meta.errors にエラーメッセージが格納されます。
これを使ってエラーメッセージを表示することができます。
🧑 5章 : Submitボタンを制御する
ポイント解説
form.Subscribe (56-63)
フォームの状態を監視するためのコンポーネントです。
selector : 監視したい値を返り値に設定します。
children : 引数から監視している値を受け取り、それに応じて表示を変更する処理を書くことができます。
exampleでは、submit可能な状態か(バリデーションエラーがないか)どうかのcanSubmitの変更を監視し、それに基づいてdisablesを変化させています。
さいごに
TanStack Formとはなんぞやと、基本的な使い方について紹介しました。
HeadlessコンポーネントでUIとロジックを簡単に分離できる点が、プロジェクトが肥大化した時でもコンポーネントごとに実装がばらつくリスクが軽減できるのではないかなと感じ、とても魅力的に感じました。
実装方法が React Hook Form と一部彷彿とさせたり、型補完がしっかりしているおかげで、別のライブラリを使っている方や初学者でもすぐに使い方を覚えられると思います！
まだv0であるため、
- 実装してきていない機能がある(ロードマップ参照)ため、予期せぬバグや実装不可能といった問題に直面する可能性があります
- ドキュメントが少ないため、実装に詰まった時は解決するまでに時間を要するかもしれません
上記の点ではまだまだ React Hook Form の方が優秀ですし、TanStack Form にしかできない革新的な機能があまりないので、今すぐ導入する必要はないかなと思います。
ですが、安定して稼働でき、コミュニティの活発度・注目度をみる限り、今後の成長が楽しみなライブラリであることは間違いありません。
今後リリースが予定されている TanStack Router を搭載したフルスタック React フレームワーク、TanStack Startと統合することで真価を発揮するのではないかと期待しています。
長々と書きましたが、最後まで読んでいただきありがとうございました！
皆さんもぜひ一度、TanStack Form を試してみてください！
筆者
片手間でOSSを作っています！
Discussion