teppeis_sushi でした。てっぺーさん、おめでとう。
2017ͷformʹ͍ͭͯ#teppeis_sushi @ ͑͢ͷϛϟϯϚʔϨετϥϯ
View Slide
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 (Name: this.input = input} />);}}
Controlled formclass 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 (Name:);}}
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-PDBMTUPSBHFDPPLJF*OEFYFE%#
Ͳ͜ʹΛอଘ͢Δͷ͕ਖ਼͍͠ͷ͔ʁ
6TF3FBDUGPSFQIFNFSBMTUBUFUIBUEPFTO`UNBUUFSUPUIFBQQHMPCBMMZ
ࠓͷ form ͷΛཧ͢Δॴ%0. 3FBDU 3FEVY-PDBMTUPSBHFDPPLJF*OEFYFE%#&QIFNFSBM &UFSOBM 'PSFWFS
ࠓͷ form ͷΛཧ͢Δॴ%0. 3FBDU 3FEVY-PDBMTUPSBHFDPPLJF*OEFYFE%#Ұ࣌తͳGPSNͷͳΒ͜͜ʹHMPCBMͳTUBUFͳΒ͜͜ʹ
ͰͬͯΈΔͱ
React ͷ state ͱ Redux ͷstate Ͱ form ͔ͩΒͱ͍͚ͬͯΔͷ໘
ࠓ
ࠓͷ form ͷΛཧ͢Δॴ%0. 3FBDU 3FEVY-PDBMTUPSBHFDPPLJF*OEFYFE%#ͳΜ͔ύϑΥʔϚϯεͷϘτϧωοΫ͕͋ͬͨΒ͜͜جຊ͜͜
twitter Lite ͷߏ
ࠓͷ form ͷΛཧ͢Δॴ%0. 3FBDU 3FEVY-PDBMTUPSBHFDPPLJF*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/