2017年のformの話

teppeis_sushi でした。てっぺーさん、おめでとう。

Transcript

1. 2017೥ͷformʹ͍ͭͯ #teppeis_sushi @ ΍͑͢ͷϛϟϯϚʔϨετϥϯ
2. formͯ͠·͔͢ʁ <form> <input type="text" name="username" /> <input type="password" name="password" /> <input type="submit" /> </form>
3. 2017೥ݱࡏɺ form ͷ஋Λ Ͳ͏΍ͬͯѻ͏͔͸ܾ·ͬͯ ͳ͍ʢԶௐ΂ʣ
4. ࠓͷ form ͷ஋Λ؅ཧ͢Δ৔ॴ %0. 3FBDU 3FEVY +BWB4DSJQU
   ͷϝϞϦ
5. ࠓͷ form ͷ஋Λ؅ཧ͢Δ৔ॴ %0. 3FBDU 3FEVY +BWB4DSJQU
   ͷϝϞϦ 6ODPOUSPMMFE
   'PSN $POUSPMMFE
   'PSN
6. Uncontrolled vs Controlled • DOMͷ஋Λ௚઀࢖͏ (Uncontrolled) • DOM͔Βऔ͖ͬͯͨ஋ΛJSͷϝϞϦʹೖΕ ͯɺεφοϓγϣοτͱͯ͠࢖͏ (Controlled)
7. 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> ); } }
8. 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> ); } }
9. Uncontrolled vs Controlled • Controlled ͳํ͸ ͜͜Ͱ͸ React ͷ state ͱ ͯ͠؅ཧ͢Δ • Uncontrolled ͳํ͸DOMʹ͚ͩ؅ཧͤ͞Δ
10. Uncontrolled vs Controlled • Facebook ͕ਪ঑ͯ͠Δͷ͸ Controlled Ұ୒ • React ͷ v-dom ߋ৽ͷλΠϛϯάͱ΋߹Θͤͯ React ͕࠷దԽͨ͠ํ๏ͰDOMʹ൓өͤ͞Δ͜ͱ ͕Ͱ͖Δ • ͪΐͬͱڽͬͨformΛ࡞Ε͹େମControlledͰ࣮ ૷͢Δඞཁ͕ग़ͯ͘Δɻ
11. Uncontrolled vs Controlled • jQuery UI Έ͍ͨͳϥΠϒϥϦ͸େମ Uncontrolled ͳํ๏Ͱ΍ͬͯΔ͜ͱ͕ଟ͍ʢؾ ͕͢Δʣ • طଘͷࢿ࢈͕jQueryʹ͋ͬͯͦΕ͕ Uncontrolled ͳํ๏Ͱ࣮ݱ͞ΕͯΔͳΒ࢖͏ͷ ΋ྑ͍͕ɺجຊ͸ Controlled Ͱྑ͍ؾ͕͢Δɻɹ
12. Uncontrolled vs Controlled • https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/
13. ࠓͷ form ͷ஋Λ؅ཧ͢Δ৔ॴ %0. 3FBDU 3FEVY +BWB4DSJQU
    ͷϝϞϦ 6ODPOUSPMMFE
    'PSN
    ΋͏๨Εͯ΋ྑ͍͔΋ $POUSPMMFE
    'PSN
    ͓ͬͪ͜͢͢Ί
14. Ͱ΋ 2017 ೥ݱࡏ͸ state ͕ ෳ਺͋Δ
15. ࠓͷ form ͷ஋Λ؅ཧ͢Δ৔ॴ %0. 3FBDU 3FEVY -PDBMTUPSBHF
    
    DPPLJF
    
    *OEFYFE%#
16. Ͳ͜ʹ஋Λอଘ͢Δͷ͕ਖ਼͠ ͍ͷ͔ʁ
18. 6TF
    3FBDU
    GPS
    FQIFNFSBM
    TUBUF
    UIBU
    EPFTO`U
    NBUUFS
    UP
    UIF
    BQQ
    HMPCBMMZ
    
19. ࠓͷ form ͷ஋Λ؅ཧ͢Δ৔ॴ %0. 3FBDU 3FEVY -PDBMTUPSBHF
    
    DPPLJF
    
    *OEFYFE%# &QIFNFSBM &UFSOBM 'PSFWFS
20. ࠓͷ form ͷ஋Λ؅ཧ͢Δ৔ॴ %0. 3FBDU 3FEVY -PDBMTUPSBHF
    
    DPPLJF
    
    *OEFYFE%# Ұ࣌తͳGPSNͷ஋ ͳΒ͜͜ʹ HMPCBMͳTUBUFͳΒ ͜͜ʹ
21. Ͱ΋΍ͬͯΈΔͱ
22. React ͷ state ͱ Redux ͷ state Ͱ form ͔ͩΒͱ͍ͬͯ ෼͚Δͷ໘౗
23. ࠓ͸
24. ࠓͷ form ͷ஋Λ؅ཧ͢Δ৔ॴ %0. 3FBDU 3FEVY -PDBMTUPSBHF
    
    DPPLJF
    
    *OEFYFE%# ͳΜ͔ύϑΥʔϚϯεͷϘ τϧωοΫ͕͋ͬͨΒ͜͜ جຊ͜͜
25. twitter Lite ͷߏ੒
26. ࠓͷ form ͷ஋Λ؅ཧ͢Δ৔ॴ %0. 3FBDU 3FEVY -PDBMTUPSBHF
    
    DPPLJF
    
    *OEFYFE%# UXJUUFS
    ͷ
    GPSN
    ͷ৘ใ͸ Ұ୴͜͜ͰCV⒎FS ਺จࣈهड़ͨ͠Β
    SFEVDFSʹߦ͘
27. ͋Δఔ౓ form ͷ৘ใ͸ React ͰͨΊͯɺ਺จࣈೖΕ ͨΒ Redux ʹ flush ͤ͞Δɻ
28. ·ͱΊ • 2017೥ݱࡏɺ Controlled form ͕ओྲྀ • ͨͩ͠ɺControll ͢Δ state ͸Ͳ͜Ͱ΍Δ͔ఆ·ͬͯ ͳ͍ • ஌ݟతʹ͸ Redux ʹ؅ཧ͢ΔͰྑͦ͞͏ɻ • ύϑΥʔϚϯε্ͷ໰୊͕͋ͬͨ࣌ʹReactͰ؅ཧ͕ ྑͦ͞͏ɻ
29. ࢀߟࢿྉ • https://goshakkk.name/controlled-vs- uncontrolled-inputs-react/ • https://goshakkk.name/should-i-put-form- state-into-redux/