めんどくさいフォーム

CTOA若手エンジニアコミュニティ勉強会 #6 CTOA若手エンジニアコミュニティ勉強会 #6 https://engineer-meetup.com/ https://engineer-meetup.com/ Join me! めんどくさいフォーム めんどくさいフォーム エンジニア集会 代表 エンジニア集会 代表 慕狼ゆに 慕狼ゆに スライド撮影OK スライド撮影OK SNSアップOK SNSアップOK #エンジニア集会 #エンジニア集会

• https://engineer-meetup.com/

自己紹介 慕狼 ゆに ／ しのがみ ゆに VR-SNSが大好き！ VRChatプレイ時間9800時間 バーチャルでエンジニアが集まる技術コミュニティ 「エンジニア集会」の主催・運営 慕狼ゆに Shinogami Yuni 21卒の5年目Webエンジニア メインは、React x TS のフロントエンド中心 最近はFull-Stack TypeScript目指してNest.jsをやっている SNS X(Twitter)： @yuni_shinogami

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

Webフォーム

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

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

Webフォームはめんどい 複雑なWebシステムじゃなくても、 「めんどくさいフォーム」 に向き合う必要がある

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

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

今日話すこと めんどいフォームに 向き合っていくよ！ めんどいフォームの何がめんどいのか めんどいフォームにどう立ち向かうか めんどいフォームについて考えるために やったこと

今日話すこと 一つ目！ めんどいフォームの何がめんどいのか めんどいフォームにどう立ち向かうか めんどいフォームについて考えるために やったこと

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

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

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

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

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

動的フォームはめんどい めんどくさい点１：コードが汚くなりがち フォームが増える＆減るという仕様が入る時点で状態管理が 複雑になってしまう（仕様が膨らめば膨らむほどつらい） 値の持ち方を考えないと、handleSubmitをするタイミングで BEに情報を投げるためのロジックが生まれてしまう （どこでMappingするか、値の持ち方をどうきれいにするか 考えるのがめんどい） 保守性が低い実装になって触りたくないコードが生まれる

動的フォームはめんどい めんどくさい点２：動的Validationがめんどい Validation schemaで「動的にフォームが増える・減る」こと を想定しないといけない。簡単なやり方ができない

動的フォームはめんどい めんどくさい点１：コードが汚くなりがち めんどくさい点２：動的Validationがめんどい 変なことをやろうとして、変なロジックが至る所に 増えてしまう

今日話すこと 二つ目！ めんどいフォームの何がめんどいのか めんどいフォームにどう立ち向かうか めんどいフォームについて考えるために やったこと

めんどいフォームに立ち向かうためのTips 対処法１：増えるフォームは、配列で管理すべし React Hook Formでは、useFieldArrayという配列でフ ォーム値を管理するHooksが用意されています Formikでは、FieldArrayがありそう 自分が使っているフォームライブラリに「配列で情報 を管理する機能」がないかどうか探してみよう BEに情報を投げるためにmappingは必要かも・・・？ （BEの仕様しだい）

めんどいフォームに立ち向かうためのTips 対処法２：動的Validationは、型を生成する関数をメモ化 し、型作りを頑張る 例：BEから受け取ったObjectを配列にして、key: stringのZod Schemaを作る実装 Zod Schemaを作る関数をメモ化して、BEからの情報が変わる たびにSchemaを再生成する

めんどいフォームに立ち向かうためのTips 対処法１：増えるフォームは、配列で管理すべし 対処法２：動的Validationは、型を生成する関数をメモ化 し、型作りを頑張る 使っているFormライブラリに、便利機能がないか探して みよう。validationはsuperRefine()という逃げ道がある 型で頑張れ！！！！！！！

今日話すこと 三つ目！ めんどいフォームの何がめんどいのか めんどいフォームにどう立ち向かうか めんどいフォームについて考えるために やったこと

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

考えるためにやったこと ちょうど、Claude4がリリースされたので使ってみるか

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

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

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

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

2024年度の成果 めんどくさいフォームに 向き合った

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

おまけ 欲張ってみた

おまけ 欲張ってみた

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

おまけ 欲張ってみた Githubで公開しています。oni branchを立ち上げると、 真の地獄フォームを見ることができます(壊れています)

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