はじめに
この記事では、React Hook Formを用いて配列データを管理する際に直面した問題と、その解決方法について詳しく解説します。
特に、useFieldArrayを利用する際に発生する型定義の問題に焦点を当て、なぜプリミティブな配列ではなくオブジェクトの配列を使用する必要があるのかを説明します。
プリミティブ配列で発生する問題
React Hook Formはフォーム管理を効率化するライブラリですが、useFieldArrayでプリミティブな配列（例えばstring[]）を扱おうとすると、以下のようなTypeScriptエラーが発生します。
// ❌ これは動作しません
const { control } = useForm<{ items: string[] }>();
const { fields, append } = useFieldArray({
control,
name: "items"
});
このコードでは「型 'string' を型 'never' に割り当てることはできません」というエラーが発生します。これは、useFieldArrayが内部でオブジェクト型のデータ構造を前提としているためです。
オブジェクトの配列を利用する解決策
上記の問題を回避するためには、各要素をオブジェクトとして管理する必要があります。例えば、以下のように配列の各要素を{ title: string }という形式にすることで、正しく動作します。
// ✅ これは動作します
const { control } = useForm<{ items: { title: string }[] }>();
const { fields, append } = useFieldArray({
control,
name: "items"
});
この方法により、React Hook Form内部で期待されるデータ構造と一致し、TypeScriptエラーを回避できます。
React Hook Formの型定義からの学び
実際にReact Hook Formのソースコードや公式サンプルコードを確認すると、useFieldArrayはオブジェクトの配列を前提として設計されていることがわかります。例えば、公式のサンプルでは以下のような型定義が使用されています。
type FormValues = { data: { name: string }[] };
この定義から、配列の各要素は必ずオブジェクト（ここでは{ name: string }）であることが明示されており、正しい型定義を行うための参考になります。
まとめ
React Hook FormのuseFieldArrayを利用する際の重要なポイントは以下の通りです。
-
オブジェクトの配列を使用する
- ❌ プリミティブな配列（例:
string[]）は使用しない - ✅ オブジェクトの配列（例:
{ name: string }[]や{ title: string }[]）を使用する
- ❌ プリミティブな配列（例:
-
公式ソースコードやサンプルを参照する
- 公式の型定義やサンプルコードを確認することで、正しい使い方を理解できます
以上のポイントを押さえることで、React Hook Formを用いた配列管理がスムーズに行えるようになります。