2017年のformの話

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

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