Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Form実装基本を学び直してみた
Hyuga-Tsukui
January 12, 2023
Programming
0
240
Form実装基本を学び直してみた
https://anotherworks.connpass.com/event/270238/
Hyuga-Tsukui
January 12, 2023
Tweet
Share
More Decks by Hyuga-Tsukui
See All by Hyuga-Tsukui
エンジニアリングの本質を見極めて、何気ない行動の質を上げよう
hyugatsukui
0
76
非同期処理を使った応答性能改善 AWS Lambda
hyugatsukui
1
170
Other Decks in Programming
See All in Programming
T3 Stack and TypeScript ecosystem
quramy
3
760
Hatena Engineer Seminar #23「新卒研修で気軽に『ありがとう』を伝え合える Slack アプリを開発した話」
slashnephy
0
300
Gradle build: The time is now
nonews
1
470
ipa-medit: Memory search and patch tool for IPA without Jailbreaking/ipa-medit-bh2022-europe
tkmru
0
130
Cloudflare WorkersでGoを動かすライブラリを作っている話
syumai
1
320
An Advanced Introduction to R
nicetak
0
1.8k
Circuit⚡
monaapk
0
200
WordPress(再)入門 - 基礎知識・環境編
oleindesign
1
130
LIFFで動く割り勘アプリTATEKAをリリースしてみた話
inoue2002
0
250
ECテックカンファレンス2023
kspace
1
350
23年のJavaトレンドは?Quarkusで理解するコンテナネイティブJava
tatsuya1bm
1
120
和暦を正しく扱うための暦の話
nagise
10
6.4k
Featured
See All Featured
Embracing the Ebb and Flow
colly
75
3.6k
The Invisible Customer
myddelton
113
12k
BBQ
matthewcrist
75
8.1k
Learning to Love Humans: Emotional Interface Design
aarron
263
38k
Visualization
eitanlees
128
12k
Making Projects Easy
brettharned
102
4.8k
We Have a Design System, Now What?
morganepeng
37
5.9k
Statistics for Hackers
jakevdp
785
210k
A designer walks into a library…
pauljervisheath
199
16k
The Art of Programming - Codeland 2020
erikaheidi
35
11k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.2k
How To Stay Up To Date on Web Technology
chriscoyier
779
250k
Transcript
Form実装基本を学び直して みた! 制御・非制御コンポーネントを意識しながら React Tech Night
[email protected]
株式会社Another works主催
[email protected]
・Hyuga-Tsukui (@hy_twenで活動中です!) ・最近27歳になってしまいました! ・シェルフィー株式会社でエンジニアとして在籍(主にバックエンド) ・Java,Kotlin,TypeScript,Python ・React,Spring,Django 自己紹介
はじめに
UI・UXとしてのFormはこうだといった、ユーザ体験ベースの話題ではありませ ん! ReactでFormを実装する時の実装観点での基本を私が学びなおしたお話で す! 題材的に初歩的内容かと思うので、知見や間違いの指摘は大歓迎です!(く れたら泣いて喜びます 😂 例としてライブラリが出ますが、ライブラリを主題としてはいません! はじめに
きっかけ
きっかけ ・私がReact Hook FormからReactでのForm実装に入門した ・どうやらFormilkなるものの時代もあったようだ ・大きく差がついた(?)両者のアプローチの違いなどが気になった
formik vs react-hook-form
少し脱線してしまったので本題へ 本題へ
・rhfは非制御コンポーネントの利用をベースとしたAPIでのアプローチ ・Formilkは制御コンポーネントベースのAPIでのアプローチ ・とはいえ非制御・制御の違いを知るとどちらが悪いとかは無いだろうと思える 超結論
少し脱線してしまったので本題へ ところで制御・非制御って?
公式の引用
制御されたコンポーネント 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
あるローカルな状態を持つコンポーネントを「非制御」と呼ぶのはよくあることです。例えば、 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
私の理解
制御で実装している例
None
このStateが
このStateが inputコンポーネントのPropsに渡さ れて
このStateが inputコンポーネントのPropsに渡さ れて onChangeで状態が変化し、 ReactiveにUIが制御されている
制御されたコンポーネント 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
あるローカルな状態を持つコンポーネントを「非制御」と呼ぶのはよくあることです。例えば、 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
非制御で実装している例
None
一般に、DOMで管理された値を取 得するためにRefを生成します
一般に、DOMで管理された値を取得す るためにRefを生成します Propsを渡していない
制御されたコンポーネント 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
あるローカルな状態を持つコンポーネントを「非制御」と呼ぶのはよくあることです。例えば、 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
私の理解 ・Propsによって状態が制御されているのが制御コンポーネント ・逆にPropsでないつまり、親から渡されたものではないローカルだけの状態コ ンポーネントが非制御コンポーネント
Form実装におけるそれぞれの違い
Form実装時のそれぞれの得意ポイント https://goshacmd.com/controlled-vs-uncontrolled-inputs-react/
この違いはどこから生まれるか ・入力にReactiveに反応できるかどうか ・信頼できる唯一の情報源 (single source of truth)かどうか
https://f-tra.com/ja/blog/column/7036
UXとして右が良いというのはおいておい て。。。
https://f-tra.com/ja/blog/column/7036 ここの入力によって
https://f-tra.com/ja/blog/column/7036 ここの入力によって ここを制御する
https://f-tra.com/ja/blog/column/7036 ここの入力によって ここを制御する
制御の場合
None
zipCodeを受け取る
zipCodeを受け取る 状態が変わるので、再レンダリング
zipCodeを受け取る 状態が変わるので、再レンダリング 条件によりEffect内のCBが実行、 AddressがReactiveに設定される
非制御の場合
None
制御下にないローカルな DOMの値を 操作するためにRefを用意
制御下にないローカルな DOMの値を 操作するためにRefを用意 zipCodeのBlurEventで変更を検知 し、Refを通して直接更新
この違いはどこから生まれるか ・入力にReactiveに反応できるかどうか ・信頼できる唯一の情報源 (single source of truth)かどうか
どちらが良いとかいうわけではないはず。。 ・制御 ・非制御にくらべ多くのレンダリングを発生させる可能性が有る ・Reactの思想に沿っているので宣言的な記述になりやすい ・非制御 ・制御に比べレンダリングを抑制しやすい ・インスタントな検証など即時反応したいケースを実装することがし辛い(複雑になる、refの操作など、ライブラリ使っ た場合も後述)
react-hook-formに触れる ・modeにonChange modeがあったり(制御になる) ・watchやgetValue,setValueなどローカルな状態を変更させるAPIがいい感 じに用意されてはいるが根底はこの仕組の差があるはず
まとめ
まとめ ・普段かんたんにライブラリを使うだけなら、あまり意識しないかもしれない部 分を改めて学習できた! ・非制御、制御の違いを知っていればハマったときに回避できるヒントになるか もしれない
ご清聴ありがとうございました!