Pro Yearly is on sale from $80 to $50! »

2017年のformの話

 2017年のformの話

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

D76231a2114896dfcc7b79ac69558b79?s=128

Yosuke Furukawa

July 05, 2017
Tweet

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. 6TF3FBDUGPSFQIFNFSBMTUBUFUIBUEPFTO`UNBUUFSUPUIF BQQHMPCBMMZ

  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/