React でのバリデーション: onChange と 投稿ボタン時 のデータ構造の違い
React でフォームバリデーションを実装する際に、onChange のタイミングと 投稿ボタン を押したときでデータ構造が異なる ことがあります。
特に、ネストされたデータを管理 する場合、配列形式と文字列形式が使い分けられることが多い です。
Redux、または Formik/Yup などのフォーム管理ライブラリ でも見られる仕組みです。
🎯 onChange のデータ構造
📌 ユースケース
例えば、ブログ記事の管理画面を作成するとします。
記事には タイトル、本文、カテゴリ などのフィールドがあり、カテゴリごとにタグを設定できます。
{
"blogPosts": {
"0": {
"category": {
"tags": "React,JavaScript"
}
}
}
}
このような構造のデータを管理するとします。
🛠 onChange の場合
フォームの 各フィールドの値が変更 されると、それに対応するデータが更新されます。
この時、データのパスは 配列形式 で管理されることが多いです。
['blogPosts', '0', 'category', 'tags']
この 配列形式のパス を使うことで、ネストされたデータの特定の部分を簡単に取得・更新できます。
✅ onChange のメリット
- データの更新が簡単（例えば
setIn([...])で値を変更できる）。 - ネストされた構造でも一貫性を持って管理 できる。
🎯 投稿ボタンを押したときのデータ構造
📌 文字列形式のパス
一方、投稿ボタンを押して データをサーバーに送信 するときには、データのキーが 文字列形式 になることが一般的です。
{
"blogPosts.0.category.tags": "React,JavaScript"
}
このように、ネストされたデータの キーを "blogPosts.0.category.tags" のような文字列で表現 することで、
サーバー側でデータを簡単にパースして処理できます。
🛠 投稿ボタン時 のメリット
- シリアライズしやすい（JSON に変換しやすい）。
- API との連携がしやすい（サーバー側が
"blogPosts.0.category.tags"をパースして処理）。
🎯 onChange と 投稿ボタン時 のデータ構造の違い
| タイミング | データ形式 | 例 |
|---|---|---|
onChange |
配列（パス表現） | ['blogPosts', '0', 'category', 'tags'] |
投稿ボタン時 |
文字列（ドット表記） | "blogPosts.0.category.tags" |
💡 両方の形式に対応する方法
フォームバリデーションやデータ処理を行う際には、どちらの形式にも対応できるようにする ことが重要です。
例えば、バリデーション関数で 配列形式と文字列形式の両方を処理 するようにすると、
どのタイミングでも正しく動作するようになります。
isInvalid(key, value) {
let keyParts;
// keyが配列（onChange時）
if (Array.isArray(key)) {
keyParts = key;
}
// keyが文字列（投稿ボタン時）
else if (typeof key === 'string') {
keyParts = key.split('.'); // ドットで区切って配列に変換
}
else {
return false;
}
// 最後の要素が 'tags' ならバリデーション対象
if (keyParts[keyParts.length - 1] === 'tags') {
return !this.isValidTags(value);
}
return false;
}
✔ Array.isArray(key) で onChange のときの配列を処理。
✔ typeof key === 'string' のときは .split('.') で配列に変換。
✔ これで onChange でも 投稿ボタン時 でも正しく動作！
🎯 まとめ
✅ React では onChange の時は ['blogPosts', '0', 'category', 'tags'] のような配列を使うことが多い（ネストされたデータの更新が簡単）。
✅ API にデータを送るときには "blogPosts.0.category.tags" のようなドット表記のキーを使うことが一般的。
✅ 両方に対応するには Array.isArray(key) で判定し、文字列なら .split('.') で配列に変換すると便利！ 🚀
この仕組みを理解しておくと、フォームの管理がスムーズ になり、柔軟なバリデーションを実装 できるようになります！ 💡
登録日：
更新日：