Form実装基本を学び直してみた

https://anotherworks.connpass.com/event/270238/

Transcript

1. Form実装基本を学び直して みた！ 制御・非制御コンポーネントを意識しながら React Tech Night TOKYO@株式会社Another works主催 Speaker@Hyuga-Tsukui
2. ・Hyuga-Tsukui (@hy_twenで活動中です！） ・最近27歳になってしまいました！ ・シェルフィー株式会社でエンジニアとして在籍（主にバックエンド） ・Java,Kotlin,TypeScript,Python ・React,Spring,Django 自己紹介
3. はじめに
4. UI・UXとしてのFormはこうだといった、ユーザ体験ベースの話題ではありませ ん！󰢃 ReactでFormを実装する時の実装観点での基本を私が学びなおしたお話で す！ 題材的に初歩的内容かと思うので、知見や間違いの指摘は大歓迎です！（く れたら泣いて喜びます 😂 例としてライブラリが出ますが、ライブラリを主題としてはいません！ はじめに
5. きっかけ
6. きっかけ ・私がReact Hook FormからReactでのForm実装に入門した ・どうやらFormilkなるものの時代もあったようだ ・大きく差がついた（？）両者のアプローチの違いなどが気になった
7. formik vs react-hook-form
8. 少し脱線してしまったので本題へ 本題へ
9. ・rhfは非制御コンポーネントの利用をベースとしたAPIでのアプローチ ・Formilkは制御コンポーネントベースのAPIでのアプローチ ・とはいえ非制御・制御の違いを知るとどちらが悪いとかは無いだろうと思える 超結論
10. 少し脱線してしまったので本題へ ところで制御・非制御って？
11. 公式の引用
12. 制御されたコンポーネント HTML では <input>、<textarea>、そして <select> のようなフォーム要素は通常、自身で状態を保持しており、 ユーザの入力に基づいてそれを更新します。 React では、変更されうる状態は通常はコンポーネントの state プロパ ティに保持され、setState() 関数でのみ更新されます。 React の state を “信頼できる唯一の情報源 (single source of truth)” とすることで、上述の 2 つの状態を結合させ ることができます。そうすることで、フォームをレンダーしている React コンポーネントが、後続するユーザ入力で フォームで起きることも制御できるようになります。このような方法で React によって値が制御される入力フォーム要 素は「制御されたコンポーネント」と呼ばれます。 https://ja.reactjs.org/docs/forms.html#controll ed-components
13. あるローカルな状態を持つコンポーネントを「非制御」と呼ぶのはよくあることです。例えば、 isActive状態変数を持つオリジナルのPanelコンポーネントは、その親がパネルがアクティブかどう かに影響できないので、非制御型です。 これに対して、コンポーネント内の重要な情報が、それ自身のローカル状態ではなく、propsによっ て駆動される場合、コンポーネントを「controlled」と呼ぶことができます。これにより、親コンポーネ ントがその動作を完全に指定することができます。最終的にisActiveプロップを持つPanelコンポー ネントは、Accordionコンポーネントによって制御されます。（一部抜粋&Deeple翻訳） Controlled and uncontrolled components https://beta.reactjs.org/learn/sharing-state-be tween-components#controlled-and-uncontroll ed-components
14. 私の理解
15. 制御で実装している例
17. このStateが
18. このStateが inputコンポーネントのPropsに渡さ れて
19. このStateが inputコンポーネントのPropsに渡さ れて onChangeで状態が変化し、 ReactiveにUIが制御されている
20. 制御されたコンポーネント HTML では <input>、<textarea>、そして <select> のようなフォーム要素は通常、自身で状態を保持しており、 ユーザの入力に基づいてそれを更新します。 React では、変更されうる状態は通常はコンポーネントの state プロパ ティに保持され、setState() 関数でのみ更新されます。 React の state を “信頼できる唯一の情報源 (single source of truth)” とすることで、上述の 2 つの状態を結合させ ることができます。そうすることで、フォームをレンダーしている React コンポーネントが、後続するユーザ入力で フォームで起きることも制御できるようになります。このような方法で React によって値が制御される入力フォーム要 素は「制御されたコンポーネント」と呼ばれます。 https://ja.reactjs.org/docs/forms.html#controll ed-components
21. あるローカルな状態を持つコンポーネントを「非制御」と呼ぶのはよくあることです。例えば、 isActive状態変数を持つオリジナルのPanelコンポーネントは、その親がパネルがアクティブかどう かに影響できないので、非制御型です。 これに対して、コンポーネント内の重要な情報が、それ自身のローカル状態ではなく、propsによっ て駆動される場合、コンポーネントを「controlled」と呼ぶことができます。これにより、親コンポーネ ントがその動作を完全に指定することができます。最終的にisActiveプロップを持つPanelコンポー ネントは、Accordionコンポーネントによって制御されます。（一部抜粋&Deeple翻訳） Controlled and uncontrolled components https://beta.reactjs.org/learn/sharing-state-be tween-components#controlled-and-uncontroll ed-components
22. 非制御で実装している例
24. 一般に、DOMで管理された値を取 得するためにRefを生成します
25. 一般に、DOMで管理された値を取得す るためにRefを生成します Propsを渡していない
26. 制御されたコンポーネント HTML では <input>、<textarea>、そして <select> のようなフォーム要素は通常、自身で状態を保持しており、 ユーザの入力に基づいてそれを更新します 。React では、変更されうる状態は通常はコンポーネントの state プロパ ティに保持され、setState() 関数でのみ更新されます。 React の state を “信頼できる唯一の情報源 (single source of truth)” とすることで、上述の 2 つの状態を結合させ ることができます。そうすることで、フォームをレンダーしている React コンポーネントが、後続するユーザ入力で フォームで起きることも制御できるようになります。このような方法で React によって値が制御される入力フォーム要 素は「制御されたコンポーネント」と呼ばれます。 https://ja.reactjs.org/docs/forms.html#controll ed-components
27. あるローカルな状態を持つコンポーネントを「非制御」と呼ぶのはよくあることです。例えば、 isActive状態変数を持つオリジナルのPanelコンポーネントは、その親がパネルがアクティブかどう かに影響できないので、非制御型です。 これに対して、コンポーネント内の重要な情報が、それ自身のローカル状態ではなく、propsによっ て駆動される場合、コンポーネントを「controlled」と呼ぶことができます。これにより、親コンポーネ ントがその動作を完全に指定することができます。最終的にisActiveプロップを持つPanelコンポー ネントは、Accordionコンポーネントによって制御されます。（一部抜粋&Deeple翻訳） Controlled and uncontrolled components https://beta.reactjs.org/learn/sharing-state-be tween-components#controlled-and-uncontroll ed-components
28. 私の理解 ・Propsによって状態が制御されているのが制御コンポーネント ・逆にPropsでないつまり、親から渡されたものではないローカルだけの状態コ ンポーネントが非制御コンポーネント
29. Form実装におけるそれぞれの違い
30. Form実装時のそれぞれの得意ポイント https://goshacmd.com/controlled-vs-uncontrolled-inputs-react/
31. この違いはどこから生まれるか ・入力にReactiveに反応できるかどうか ・信頼できる唯一の情報源 (single source of truth)かどうか
32. https://f-tra.com/ja/blog/column/7036
33. UXとして右が良いというのはおいておい て。。。
34. https://f-tra.com/ja/blog/column/7036 ここの入力によって
35. https://f-tra.com/ja/blog/column/7036 ここの入力によって ここを制御する
36. https://f-tra.com/ja/blog/column/7036 ここの入力によって ここを制御する
37. 制御の場合
39. zipCodeを受け取る
40. zipCodeを受け取る 状態が変わるので、再レンダリング
41. zipCodeを受け取る 状態が変わるので、再レンダリング 条件によりEffect内のCBが実行、 AddressがReactiveに設定される
42. 非制御の場合
44. 制御下にないローカルな DOMの値を 操作するためにRefを用意
45. 制御下にないローカルな DOMの値を 操作するためにRefを用意 zipCodeのBlurEventで変更を検知 し、Refを通して直接更新
46. この違いはどこから生まれるか ・入力にReactiveに反応できるかどうか ・信頼できる唯一の情報源 (single source of truth)かどうか
47. どちらが良いとかいうわけではないはず。。 ・制御 ・非制御にくらべ多くのレンダリングを発生させる可能性が有る ・Reactの思想に沿っているので宣言的な記述になりやすい ・非制御 ・制御に比べレンダリングを抑制しやすい ・インスタントな検証など即時反応したいケースを実装することがし辛い（複雑になる、refの操作など、ライブラリ使っ た場合も後述）
48. react-hook-formに触れる ・modeにonChange modeがあったり（制御になる） ・watchやgetValue,setValueなどローカルな状態を変更させるAPIがいい感 じに用意されてはいるが根底はこの仕組の差があるはず
49. まとめ
50. まとめ ・普段かんたんにライブラリを使うだけなら、あまり意識しないかもしれない部 分を改めて学習できた！ ・非制御、制御の違いを知っていればハマったときに回避できるヒントになるか もしれない
51. ご清聴ありがとうございました！󰢛