---
title: めんどくさいフォーム_エンジニア作業飲み集会_2025-12-12
tags: 
author: [慕狼ゆに](https://convert.docswell.com/user/yuni-0928)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/LE186XQ47G.jpg?width=480
description: めんどくさいフォーム_エンジニア作業飲み集会_2025-12-12 by 慕狼ゆに
published: January 27, 26
canonical: https://convert.docswell.com/s/yuni-0928/KLV44P-2026-01-27-131040
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/LE186XQ47G.jpg)

エンジニア作業飲み集会
エンジニア作業飲み集会
https://engineer-meetup.com/
https://engineer-meetup.com/
Join me!
めんどくさいフォーム
めんどくさいフォーム
エンジニア集会 代表
エンジニア集会
代表
慕狼ゆに
慕狼ゆに
スライド撮影OK
スライド撮影OK
SNSアップOK
SNSアップOK
#エンジニア集会
#エンジニア集会


# Page. 2

![Page Image](https://bcdn.docswell.com/page/GEWZWNMZE2.jpg)

自己紹介
慕狼 ゆに ／ しのがみ ゆに
｢エンジニア集会｣という技術コミュニティの主催･運営
毎週金曜日にVRChatで技術イベントをやっています
普段の職業
慕狼ゆに
Shinogami Yuni
Webエンジニア（ フルスタックみならい ）
（ClaudeCodeシバキが仕事になりつつある）
X(Twitter)
@yuni_shinogami


# Page. 3

![Page Image](https://bcdn.docswell.com/page/47Z153QLJ3.jpg)

みなさん一度は作ったことがあるはず


# Page. 4

![Page Image](https://bcdn.docswell.com/page/YJ6L9X6MEV.jpg)



# Page. 5

![Page Image](https://bcdn.docswell.com/page/GJ51NX6Q74.jpg)

Webフォーム


# Page. 6

![Page Image](https://bcdn.docswell.com/page/9E215XMWJR.jpg)

Webフォーム
Webエンジニアなら一度は作ったことがある
Webフォーム


# Page. 7

![Page Image](https://bcdn.docswell.com/page/D7YZK8X9JM.jpg)

Webフォーム
Webエンジニアなら一度は作ったことがある
Webフォーム
めんどくさいフォームに遭遇したことが
一度や二度はあるのではないでしょうか？


# Page. 8

![Page Image](https://bcdn.docswell.com/page/VEN3RQ1DE8.jpg)

Webフォームはめんどい
我々Webエンジニアは、
「めんどくさいフォーム」
に向き合う必要がある


# Page. 9

![Page Image](https://bcdn.docswell.com/page/Y799MD5873.jpg)

Webフォームはめんどい


# Page. 10

![Page Image](https://bcdn.docswell.com/page/G789L3YZJD.jpg)

Webフォームはめんどい


# Page. 11

![Page Image](https://bcdn.docswell.com/page/L7LWLV41ER.jpg)

めんどくさいフォームの
向き合い方


# Page. 12

![Page Image](https://bcdn.docswell.com/page/4EM9MGK57W.jpg)

今回の前提
こういう技術選定をしていることが前提に話が進みます
言語：TypeScript
FEライブラリ：React
Fromライブラリ：React Hook Form
Validation：Zod
個別の技術解説はこのスライドでは行いません


# Page. 13

![Page Image](https://bcdn.docswell.com/page/PERGVZXZ79.jpg)

今日話すこと
めんどいフォームについて
何がめんどい？
どう立ち向かうか
今回のためのリサーチ
めんどいフォームに
向き合っていくよ！


# Page. 14

![Page Image](https://bcdn.docswell.com/page/P7XXZ9617X.jpg)

今日話すこと
めんどいフォームについて
何がめんどい？
どう立ち向かうか
今回のためのリサーチ
１つ目！


# Page. 15

![Page Image](https://bcdn.docswell.com/page/37KW8P1M7D.jpg)

フォームがめんどくなる理由
フォームがめんどくなる理由・・・


# Page. 16

![Page Image](https://bcdn.docswell.com/page/LJ312XQ2E5.jpg)

フォームがめんどくなる理由
フォームがめんどくなる理由・・・
「動的」


# Page. 17

![Page Image](https://bcdn.docswell.com/page/8JDXZ2967G.jpg)

動的フォームはめんどい
例えば、こんな要件
「+」ボタンで増える入力フォーム
増えたフォームにもちゃんとValidationをかけてね
フォームの入力値がhogehogeだったらこういうValidation
をかけてね
Radioボタンの選択肢は入力値を元にBEから選択肢情報をも
らって表示してね
※実際に私が趣味・仕事開発で遭遇した要件です


# Page. 18

![Page Image](https://bcdn.docswell.com/page/VEPPD19ZE8.jpg)

動的フォームはめんどい
まぁ、実装はできるけど・・・
めんどくさいなぁ・・・
では、何が面倒くさい？


# Page. 19

![Page Image](https://bcdn.docswell.com/page/27V21YMM7Q.jpg)

動的フォームはめんどい
状態・値・Validation
が面倒くさい


# Page. 20

![Page Image](https://bcdn.docswell.com/page/5JGR29GX7L.jpg)

動的フォームはめんどい
「状態・値・Validation」
動的なフォームは「状態」をたくさん持つ！
状態が増えれば増えるほど、組み合わせが増える
組み合わせが増えれば増えるほど、実装が増える
（仕様が膨らめば膨らむほどつらい）
値の扱い方に工夫が必要
BEに情報を投げる際に少なくともmappingの処理が必要になってくる
複雑な情報を扱うフォームであればあるほど、値の扱い方はたいへん
Validation schemaが一意に定まらない
状態が多ければ多いほど、状態に対応したValidation schemaが求められる
BEで弾いてもらうのが丸いけど、仕様でValidationが必要だと辛い


# Page. 21

![Page Image](https://bcdn.docswell.com/page/47QVPWX5EP.jpg)

動的フォームはめんどい
アプリ開発全般に言えるけど
たくさんの状態を持つのは、めんどい


# Page. 22

![Page Image](https://bcdn.docswell.com/page/KE4MYK6V71.jpg)

今日話すこと
めんどいフォームについて
何がめんどい？
どう立ち向かうか
今回のためのリサーチ
2つ目！


# Page. 23

![Page Image](https://bcdn.docswell.com/page/L7186XV4JG.jpg)

めんどいフォームに立ち向かうためのTips
対処法１：増減するフォームは、配列で管理すべし
配列でフォーム値を管理するための機能
React Hook Form ： useFieldArray
Formik：FieldArray
「配列で情報を管理する機能」がないか探してみよう


# Page. 24

![Page Image](https://bcdn.docswell.com/page/G7WZWNLZ72.jpg)

めんどいフォームに立ち向かうためのTips
対処法２：動的Validationは、schemaの再生成 or superRefine
schemaを作る関数を作って、引数が変わるたびに再生成する
こんなめんどい処理を書かなくても良いように工夫できるならすべき
zodの場合は、superRefine()を使うという手もある


# Page. 25

![Page Image](https://bcdn.docswell.com/page/4JZ153MLE3.jpg)

今日話すこと
めんどいフォームについて
何がめんどい？
どう立ち向かうか
今回のためのリサーチ
3つ目！


# Page. 26

![Page Image](https://bcdn.docswell.com/page/YE6L9XNM7V.jpg)

考えるためにやったこと
簡単な動的フォームの知見はZenなどで見つけたが、
動的フォーム x 動的Validationに関する記事は上手く
見つけられなかった･･･


# Page. 27

![Page Image](https://bcdn.docswell.com/page/GE51NX5QJ4.jpg)

考えるためにやったこと
Claudeに書かせた


# Page. 28

![Page Image](https://bcdn.docswell.com/page/97215XNWER.jpg)

生成AIにベストプラクティスを考えてもらう
生成させたFormがこちら
Githubで公開しています


# Page. 29

![Page Image](https://bcdn.docswell.com/page/DJYZK8P9EM.jpg)

生成AIにベストプラクティスを考えてもらう
生成させたFormの要件
必須入力のFormはValidationする
入力フォームは追加･削除をするこ
とができる
JSONを入力すると、そこから
Radioボタンの選択肢を作る
Githubで公開しています


# Page. 30

![Page Image](https://bcdn.docswell.com/page/V7N3RQ5D78.jpg)

生成AIにベストプラクティスを考えてもらう
だいぶ良いなと感じた学び方ができた
一度実装で悩む
悩んだ実装の要件をLLMに生成させる
(単純に生成させるだけだと微妙なので、適度に修正する)
LLMが生成したコードを読んで、使えそうなTipsを学ぶ


# Page. 31

![Page Image](https://bcdn.docswell.com/page/YJ99MDY8J3.jpg)

めんどくさいフォーム
まとめ
1. 動的フォームはめんどくさい
2. 動的フォームを乗りこなす術はある
3. めんどくさい実装をLLMに生成させて、自分の考えた実装との
差分を見ると、学びが捗る


# Page. 32

![Page Image](https://bcdn.docswell.com/page/GJ89L36ZED.jpg)

めんどくさい実装に
いい感じに向き合っていきましょう


# Page. 33

![Page Image](https://bcdn.docswell.com/page/LJLWLV917R.jpg)

おまけ
欲張ってみた


# Page. 34

![Page Image](https://bcdn.docswell.com/page/47M9MGZ5JW.jpg)

おまけ
欲張ってみた


# Page. 35

![Page Image](https://bcdn.docswell.com/page/P7RGVZ6ZJ9.jpg)

おまけ
欲張ってみた
要件がバチクソに膨らんだ
壊れたフォームができた
直すのめんどいので放置


# Page. 36

![Page Image](https://bcdn.docswell.com/page/PJXXZ9M1JX.jpg)

バーチャル空間を中心に
エンジニアが集まり
技術交流を行う
がコンセプトの技術者コミュニティです
興味があったら覗いてみてね


