2017年のformの話

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. Ͳ͜ʹ஋Λอଘ͢Δͷ͕ਖ਼͠ ͍ͷ͔ʁ

17. None

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/