Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2017年のformの話
Search
Yosuke Furukawa
PRO
July 05, 2017
Programming
7
2k
2017年のformの話
teppeis_sushi でした。てっぺーさん、おめでとう。
Yosuke Furukawa
PRO
July 05, 2017
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Module Harmony について
yosuke_furukawa
PRO
3
1.4k
LTのやり方
yosuke_furukawa
PRO
15
1.8k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
620
Node.js v22 で変わること
yosuke_furukawa
PRO
13
4.7k
リアーキテクトと開発生産性について
yosuke_furukawa
PRO
25
8.9k
JavaScript Server Runtime History
yosuke_furukawa
PRO
8
3.4k
tc39 x jsconf.jp Panel Discussion
yosuke_furukawa
PRO
0
1.5k
フロントエンドの開発生産性とは
yosuke_furukawa
PRO
18
10k
7 principles for rich web apps And how next.js achieves these principles
yosuke_furukawa
PRO
6
2.8k
Other Decks in Programming
See All in Programming
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
英語
s_shimotori
1
220
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
【Go言語】golangci-lintの使い方
tomo1227
0
280
CSC307 Lecture 13
javiergs
PRO
0
150
【Go言語】ジェネリクス
tomo1227
0
170
유연한 Composable 설계
l2hyunwoo
0
380
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
160
Activities at Cairo Library
cairolibrary720
0
1.2k
Xcode 16のPreviewModifierと@Previewableを活用した効率的なプレビュー方法の考察
ojun9
2
160
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
Code Review Best Practice
trishagee
58
16k
In The Pink: A Labor of Love
frogandcode
139
22k
The Cult of Friendly URLs
andyhume
75
5.9k
Fireside Chat
paigeccino
25
2.8k
Six Lessons from altMBA
skipperchong
24
3.2k
What the flash - Photography Introduction
edds
65
11k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
Producing Creativity
orderedlist
PRO
340
39k
Building an army of robots
kneath
301
42k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
Transcript
2017ͷformʹ͍ͭͯ #teppeis_sushi @ ͑͢ͷϛϟϯϚʔϨετϥϯ
formͯ͠·͔͢ʁ <form> <input type="text" name="username" /> <input type="password" name="password" />
<input type="submit" /> </form>
2017ݱࡏɺ form ͷΛ Ͳ͏ͬͯѻ͏͔ܾ·ͬͯ ͳ͍ʢԶௐʣ
ࠓͷ form ͷΛཧ͢Δॴ %0. 3FBDU 3FEVY +BWB4DSJQUͷϝϞϦ
ࠓͷ form ͷΛཧ͢Δॴ %0. 3FBDU 3FEVY +BWB4DSJQUͷϝϞϦ 6ODPOUSPMMFE 'PSN $POUSPMMFE
'PSN
Uncontrolled vs Controlled • DOMͷΛ͏ (Uncontrolled) • DOM͔Βऔ͖ͬͯͨΛJSͷϝϞϦʹೖΕ ͯɺεφοϓγϣοτͱͯ͠͏ (Controlled)
Uncontrolled form // React ͩͱ͜͏ class NameForm extends React.Component {
// … handleSubmit(event) { alert('A name was submitted: ' + this.input.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" ref={(input) => this.input = input} /> </label> <input type="submit" value="Submit" /> </form> ); } }
Controlled form class NameForm extends React.Component { // … handleChange(event)
{ this.setState({value: event.target.value}); } handleSubmit(event) { alert('A name was submitted: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" value={this.state.value} onChange={this.handleCha </label> <input type="submit" value="Submit" /> </form> ); } }
Uncontrolled vs Controlled • Controlled ͳํ ͜͜Ͱ React ͷ state
ͱ ͯ͠ཧ͢Δ • Uncontrolled ͳํDOMʹ͚ͩཧͤ͞Δ
Uncontrolled vs Controlled • Facebook ͕ਪͯ͠Δͷ Controlled Ұ • React
ͷ v-dom ߋ৽ͷλΠϛϯάͱ߹Θͤͯ React ͕࠷దԽͨ͠ํ๏ͰDOMʹөͤ͞Δ͜ͱ ͕Ͱ͖Δ • ͪΐͬͱڽͬͨformΛ࡞ΕେମControlledͰ࣮ ͢Δඞཁ͕ग़ͯ͘Δɻ
Uncontrolled vs Controlled • jQuery UI Έ͍ͨͳϥΠϒϥϦେମ Uncontrolled ͳํ๏ͰͬͯΔ͜ͱ͕ଟ͍ʢؾ ͕͢Δʣ
• طଘͷࢿ࢈͕jQueryʹ͋ͬͯͦΕ͕ Uncontrolled ͳํ๏Ͱ࣮ݱ͞ΕͯΔͳΒ͏ͷ ྑ͍͕ɺجຊ Controlled Ͱྑ͍ؾ͕͢Δɻɹ
Uncontrolled vs Controlled • https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/
ࠓͷ form ͷΛཧ͢Δॴ %0. 3FBDU 3FEVY +BWB4DSJQUͷϝϞϦ 6ODPOUSPMMFE 'PSN ͏Εͯྑ͍͔
$POUSPMMFE 'PSN ͓ͬͪ͜͢͢Ί
Ͱ 2017 ݱࡏ state ͕ ෳ͋Δ
ࠓͷ form ͷΛཧ͢Δॴ %0. 3FBDU 3FEVY -PDBMTUPSBHF DPPLJF *OEFYFE%#
Ͳ͜ʹΛอଘ͢Δͷ͕ਖ਼͠ ͍ͷ͔ʁ
None
6TF3FBDUGPSFQIFNFSBMTUBUFUIBUEPFTO`UNBUUFSUPUIF BQQHMPCBMMZ
ࠓͷ form ͷΛཧ͢Δॴ %0. 3FBDU 3FEVY -PDBMTUPSBHF DPPLJF *OEFYFE%# &QIFNFSBM
&UFSOBM 'PSFWFS
ࠓͷ form ͷΛཧ͢Δॴ %0. 3FBDU 3FEVY -PDBMTUPSBHF DPPLJF *OEFYFE%# Ұ࣌తͳGPSNͷ
ͳΒ͜͜ʹ HMPCBMͳTUBUFͳΒ ͜͜ʹ
ͰͬͯΈΔͱ
React ͷ state ͱ Redux ͷ state Ͱ form ͔ͩΒͱ͍ͬͯ
͚Δͷ໘
ࠓ
ࠓͷ form ͷΛཧ͢Δॴ %0. 3FBDU 3FEVY -PDBMTUPSBHF DPPLJF *OEFYFE%# ͳΜ͔ύϑΥʔϚϯεͷϘ
τϧωοΫ͕͋ͬͨΒ͜͜ جຊ͜͜
twitter Lite ͷߏ
ࠓͷ form ͷΛཧ͢Δॴ %0. 3FBDU 3FEVY -PDBMTUPSBHF DPPLJF *OEFYFE%# UXJUUFSͷGPSNͷใ
Ұ୴͜͜ͰCV⒎FS จࣈهड़ͨ͠Β SFEVDFSʹߦ͘
͋Δఔ form ͷใ React ͰͨΊͯɺจࣈೖΕ ͨΒ Redux ʹ flush ͤ͞Δɻ
·ͱΊ • 2017ݱࡏɺ Controlled form ͕ओྲྀ • ͨͩ͠ɺControll ͢Δ state
Ͳ͜ͰΔ͔ఆ·ͬͯ ͳ͍ • ݟతʹ Redux ʹཧ͢ΔͰྑͦ͞͏ɻ • ύϑΥʔϚϯε্ͷ͕͋ͬͨ࣌ʹReactͰཧ͕ ྑͦ͞͏ɻ
ࢀߟࢿྉ • https://goshakkk.name/controlled-vs- uncontrolled-inputs-react/ • https://goshakkk.name/should-i-put-form- state-into-redux/