めんどくさいフォーム_エンジニア作業飲み集会_2025-12-12

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

• https://engineer-meetup.com/

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

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

Webフォーム

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

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

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

Webフォームはめんどい

Webフォームはめんどい

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

おまけ 欲張ってみた

おまけ 欲張ってみた

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

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