Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Hyuga-Tsukui

January 12, 2023
Tweet

More Decks by Hyuga-Tsukui

Other Decks in Programming

Transcript

  1. Form実装基本を学び直して
    みた!
    制御・非制御コンポーネントを意識しながら
    React Tech Night TOKYO@株式会社Another works主催
    Speaker@Hyuga-Tsukui

    View full-size slide

  2. ・Hyuga-Tsukui (@hy_twenで活動中です!)
    ・最近27歳になってしまいました!
    ・シェルフィー株式会社でエンジニアとして在籍(主にバックエンド)
    ・Java,Kotlin,TypeScript,Python
    ・React,Spring,Django
    自己紹介

    View full-size slide

  3. はじめに

    View full-size slide

  4. UI・UXとしてのFormはこうだといった、ユーザ体験ベースの話題ではありませ
    ん!󰢃
    ReactでFormを実装する時の実装観点での基本を私が学びなおしたお話で
    す!
    題材的に初歩的内容かと思うので、知見や間違いの指摘は大歓迎です!(く
    れたら泣いて喜びます 😂
    例としてライブラリが出ますが、ライブラリを主題としてはいません!
    はじめに

    View full-size slide

  5. きっかけ

    View full-size slide

  6. きっかけ
    ・私がReact Hook FormからReactでのForm実装に入門した
    ・どうやらFormilkなるものの時代もあったようだ
    ・大きく差がついた(?)両者のアプローチの違いなどが気になった

    View full-size slide

  7. formik vs react-hook-form

    View full-size slide

  8. 少し脱線してしまったので本題へ
    本題へ

    View full-size slide

  9. ・rhfは非制御コンポーネントの利用をベースとしたAPIでのアプローチ
    ・Formilkは制御コンポーネントベースのAPIでのアプローチ
    ・とはいえ非制御・制御の違いを知るとどちらが悪いとかは無いだろうと思える
    超結論

    View full-size slide

  10. 少し脱線してしまったので本題へ
    ところで制御・非制御って?

    View full-size slide

  11. 公式の引用

    View full-size slide

  12. 制御されたコンポーネント
    HTML では 、、そして のようなフォーム要素は通常、自身で状態を保持しており、
    ユーザの入力に基づいてそれを更新します。
    React では、変更されうる状態は通常はコンポーネントの state プロパ
    ティに保持され、setState() 関数でのみ更新されます。
    React の state を “信頼できる唯一の情報源 (single source of truth)” とすることで、上述の 2 つの状態を結合させ
    ることができます。そうすることで、フォームをレンダーしている
    React コンポーネントが、後続するユーザ入力で
    フォームで起きることも制御できるようになります。このような方法で
    React によって値が制御される入力フォーム要
    素は「制御されたコンポーネント」と呼ばれます。
    https://ja.reactjs.org/docs/forms.html#controll
    ed-components

    View full-size slide

  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

    View full-size slide

  14. 私の理解

    View full-size slide

  15. 制御で実装している例

    View full-size slide

  16. このStateが

    View full-size slide

  17. このStateが
    inputコンポーネントのPropsに渡さ
    れて

    View full-size slide

  18. このStateが
    inputコンポーネントのPropsに渡さ
    れて
    onChangeで状態が変化し、
    ReactiveにUIが制御されている

    View full-size slide

  19. 制御されたコンポーネント
    HTML では 、、そして のようなフォーム要素は通常、自身で状態を保持しており、
    ユーザの入力に基づいてそれを更新します。
    React では、変更されうる状態は通常はコンポーネントの state プロパ
    ティに保持され、setState() 関数でのみ更新されます。
    React の state を “信頼できる唯一の情報源 (single source of truth)” とすることで、上述の 2 つの状態を結合させ
    ることができます。そうすることで、フォームをレンダーしている
    React コンポーネントが、後続するユーザ入力で
    フォームで起きることも制御できるようになります。このような方法で
    React によって値が制御される入力フォーム要
    素は「制御されたコンポーネント」と呼ばれます。
    https://ja.reactjs.org/docs/forms.html#controll
    ed-components

    View full-size slide

  20. あるローカルな状態を持つコンポーネントを「非制御」と呼ぶのはよくあることです。例えば、
    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

    View full-size slide

  21. 非制御で実装している例

    View full-size slide

  22. 一般に、DOMで管理された値を取
    得するためにRefを生成します

    View full-size slide

  23. 一般に、DOMで管理された値を取得す
    るためにRefを生成します
    Propsを渡していない

    View full-size slide

  24. 制御されたコンポーネント
    HTML では 、、そして のようなフォーム要素は通常、自身で状態を保持しており、
    ユーザの入力に基づいてそれを更新します
    。React では、変更されうる状態は通常はコンポーネントの state プロパ
    ティに保持され、setState() 関数でのみ更新されます。
    React の state を “信頼できる唯一の情報源 (single source of truth)” とすることで、上述の 2 つの状態を結合させ
    ることができます。そうすることで、フォームをレンダーしている
    React コンポーネントが、後続するユーザ入力で
    フォームで起きることも制御できるようになります。このような方法で
    React によって値が制御される入力フォーム要
    素は「制御されたコンポーネント」と呼ばれます。
    https://ja.reactjs.org/docs/forms.html#controll
    ed-components

    View full-size slide

  25. あるローカルな状態を持つコンポーネントを「非制御」と呼ぶのはよくあることです。例えば、
    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

    View full-size slide

  26. 私の理解
    ・Propsによって状態が制御されているのが制御コンポーネント
    ・逆にPropsでないつまり、親から渡されたものではないローカルだけの状態コ
    ンポーネントが非制御コンポーネント

    View full-size slide

  27. Form実装におけるそれぞれの違い

    View full-size slide

  28. Form実装時のそれぞれの得意ポイント
    https://goshacmd.com/controlled-vs-uncontrolled-inputs-react/

    View full-size slide

  29. この違いはどこから生まれるか
    ・入力にReactiveに反応できるかどうか
    ・信頼できる唯一の情報源 (single source of truth)かどうか

    View full-size slide

  30. https://f-tra.com/ja/blog/column/7036

    View full-size slide

  31. UXとして右が良いというのはおいておい
    て。。。

    View full-size slide

  32. https://f-tra.com/ja/blog/column/7036
    ここの入力によって

    View full-size slide

  33. https://f-tra.com/ja/blog/column/7036
    ここの入力によって
    ここを制御する

    View full-size slide

  34. https://f-tra.com/ja/blog/column/7036
    ここの入力によって
    ここを制御する

    View full-size slide

  35. 制御の場合

    View full-size slide

  36. zipCodeを受け取る

    View full-size slide

  37. zipCodeを受け取る
    状態が変わるので、再レンダリング

    View full-size slide

  38. zipCodeを受け取る
    状態が変わるので、再レンダリング
    条件によりEffect内のCBが実行、
    AddressがReactiveに設定される

    View full-size slide

  39. 非制御の場合

    View full-size slide

  40. 制御下にないローカルな DOMの値を
    操作するためにRefを用意

    View full-size slide

  41. 制御下にないローカルな DOMの値を
    操作するためにRefを用意
    zipCodeのBlurEventで変更を検知
    し、Refを通して直接更新

    View full-size slide

  42. この違いはどこから生まれるか
    ・入力にReactiveに反応できるかどうか
    ・信頼できる唯一の情報源 (single source of truth)かどうか

    View full-size slide

  43. どちらが良いとかいうわけではないはず。。
    ・制御
    ・非制御にくらべ多くのレンダリングを発生させる可能性が有る
    ・Reactの思想に沿っているので宣言的な記述になりやすい
    ・非制御
    ・制御に比べレンダリングを抑制しやすい
    ・インスタントな検証など即時反応したいケースを実装することがし辛い(複雑になる、refの操作など、ライブラリ使っ
    た場合も後述)

    View full-size slide

  44. react-hook-formに触れる
    ・modeにonChange modeがあったり(制御になる)
    ・watchやgetValue,setValueなどローカルな状態を変更させるAPIがいい感
    じに用意されてはいるが根底はこの仕組の差があるはず

    View full-size slide

  45. まとめ
    ・普段かんたんにライブラリを使うだけなら、あまり意識しないかもしれない部
    分を改めて学習できた!
    ・非制御、制御の違いを知っていればハマったときに回避できるヒントになるか
    もしれない

    View full-size slide

  46. ご清聴ありがとうございました!󰢛

    View full-size slide