Upgrade to Pro — share decks privately, control downloads, hide ads and more …

2017年のformの話

 2017年のformの話

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

Yosuke Furukawa
PRO

July 05, 2017
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

  1. 2017೥ͷformʹ͍ͭͯ
    #teppeis_sushi @ ΍͑͢ͷϛϟϯϚʔϨετϥϯ

    View Slide

  2. formͯ͠·͔͢ʁ





    View Slide

  3. 2017೥ݱࡏɺ form ͷ஋Λ
    Ͳ͏΍ͬͯѻ͏͔͸ܾ·ͬͯ
    ͳ͍ʢԶௐ΂ʣ

    View Slide

  4. ࠓͷ form ͷ஋Λ؅ཧ͢Δ৔ॴ
    %0. 3FBDU 3FEVY
    +BWB4DSJQUͷϝϞϦ

    View Slide

  5. ࠓͷ form ͷ஋Λ؅ཧ͢Δ৔ॴ
    %0. 3FBDU 3FEVY
    +BWB4DSJQUͷϝϞϦ
    6ODPOUSPMMFE
    'PSN
    $POUSPMMFE
    'PSN

    View Slide

  6. Uncontrolled vs Controlled
    • DOMͷ஋Λ௚઀࢖͏ (Uncontrolled)
    • DOM͔Βऔ͖ͬͯͨ஋ΛJSͷϝϞϦʹೖΕ
    ͯɺεφοϓγϣοτͱͯ͠࢖͏ (Controlled)

    View Slide

  7. 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} />



    );
    }
    }

    View Slide

  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 (


    Name:



    );
    }
    }

    View Slide

  9. Uncontrolled vs Controlled
    • Controlled ͳํ͸ ͜͜Ͱ͸ React ͷ state ͱ
    ͯ͠؅ཧ͢Δ
    • Uncontrolled ͳํ͸DOMʹ͚ͩ؅ཧͤ͞Δ

    View Slide

  10. Uncontrolled vs Controlled
    • Facebook ͕ਪ঑ͯ͠Δͷ͸ Controlled Ұ୒
    • React ͷ v-dom ߋ৽ͷλΠϛϯάͱ΋߹Θͤͯ
    React ͕࠷దԽͨ͠ํ๏ͰDOMʹ൓өͤ͞Δ͜ͱ
    ͕Ͱ͖Δ
    • ͪΐͬͱڽͬͨformΛ࡞Ε͹େମControlledͰ࣮
    ૷͢Δඞཁ͕ग़ͯ͘Δɻ

    View Slide

  11. Uncontrolled vs Controlled
    • jQuery UI Έ͍ͨͳϥΠϒϥϦ͸େମ
    Uncontrolled ͳํ๏Ͱ΍ͬͯΔ͜ͱ͕ଟ͍ʢؾ
    ͕͢Δʣ
    • طଘͷࢿ࢈͕jQueryʹ͋ͬͯͦΕ͕
    Uncontrolled ͳํ๏Ͱ࣮ݱ͞ΕͯΔͳΒ࢖͏ͷ
    ΋ྑ͍͕ɺجຊ͸ Controlled Ͱྑ͍ؾ͕͢Δɻɹ

    View Slide

  12. Uncontrolled vs Controlled
    • https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/

    View Slide

  13. ࠓͷ form ͷ஋Λ؅ཧ͢Δ৔ॴ
    %0. 3FBDU 3FEVY
    +BWB4DSJQUͷϝϞϦ
    6ODPOUSPMMFE
    'PSN ΋͏๨Εͯ΋ྑ͍͔΋

    $POUSPMMFE
    'PSN ͓ͬͪ͜͢͢Ί

    View Slide

  14. Ͱ΋ 2017 ೥ݱࡏ͸ state ͕
    ෳ਺͋Δ

    View Slide

  15. ࠓͷ form ͷ஋Λ؅ཧ͢Δ৔ॴ
    %0. 3FBDU 3FEVY
    -PDBMTUPSBHF
    DPPLJF
    *OEFYFE%#

    View Slide

  16. Ͳ͜ʹ஋Λอଘ͢Δͷ͕ਖ਼͠
    ͍ͷ͔ʁ

    View Slide

  17. View Slide

  18. 6TF3FBDUGPSFQIFNFSBMTUBUFUIBUEPFTO`UNBUUFSUPUIF
    BQQHMPCBMMZ

    View Slide

  19. ࠓͷ form ͷ஋Λ؅ཧ͢Δ৔ॴ
    %0. 3FBDU 3FEVY
    -PDBMTUPSBHF
    DPPLJF
    *OEFYFE%#
    &QIFNFSBM &UFSOBM 'PSFWFS

    View Slide

  20. ࠓͷ form ͷ஋Λ؅ཧ͢Δ৔ॴ
    %0. 3FBDU 3FEVY
    -PDBMTUPSBHF
    DPPLJF
    *OEFYFE%#
    Ұ࣌తͳGPSNͷ஋
    ͳΒ͜͜ʹ
    HMPCBMͳTUBUFͳΒ
    ͜͜ʹ

    View Slide

  21. Ͱ΋΍ͬͯΈΔͱ

    View Slide

  22. React ͷ state ͱ Redux ͷ
    state Ͱ form ͔ͩΒͱ͍ͬͯ
    ෼͚Δͷ໘౗

    View Slide

  23. ࠓ͸

    View Slide

  24. ࠓͷ form ͷ஋Λ؅ཧ͢Δ৔ॴ
    %0. 3FBDU 3FEVY
    -PDBMTUPSBHF
    DPPLJF
    *OEFYFE%#
    ͳΜ͔ύϑΥʔϚϯεͷϘ
    τϧωοΫ͕͋ͬͨΒ͜͜
    جຊ͜͜

    View Slide

  25. twitter Lite ͷߏ੒

    View Slide

  26. ࠓͷ form ͷ஋Λ؅ཧ͢Δ৔ॴ
    %0. 3FBDU 3FEVY
    -PDBMTUPSBHF
    DPPLJF
    *OEFYFE%#
    UXJUUFSͷGPSNͷ৘ใ͸
    Ұ୴͜͜ͰCV⒎FS
    ਺จࣈهड़ͨ͠Β
    SFEVDFSʹߦ͘

    View Slide

  27. ͋Δఔ౓ form ͷ৘ใ͸
    React ͰͨΊͯɺ਺จࣈೖΕ
    ͨΒ Redux ʹ flush ͤ͞Δɻ

    View Slide

  28. ·ͱΊ
    • 2017೥ݱࡏɺ Controlled form ͕ओྲྀ
    • ͨͩ͠ɺControll ͢Δ state ͸Ͳ͜Ͱ΍Δ͔ఆ·ͬͯ
    ͳ͍
    • ஌ݟతʹ͸ Redux ʹ؅ཧ͢ΔͰྑͦ͞͏ɻ
    • ύϑΥʔϚϯε্ͷ໰୊͕͋ͬͨ࣌ʹReactͰ؅ཧ͕
    ྑͦ͞͏ɻ

    View Slide

  29. ࢀߟࢿྉ
    • https://goshakkk.name/controlled-vs-
    uncontrolled-inputs-react/
    • https://goshakkk.name/should-i-put-form-
    state-into-redux/

    View Slide