[Mix Leap] Reactを実案件で使って思った''成功''と''反省''

2018年 1月 11日のMixLeapで利用したスライドです。

Transcript

1. ReactΛ࣮Ҋ݅Ͱ࢖ͬͯࢥͬͨ੒ޭͱ൓ল Osaka Mix Leap Study #4 - React #mixleap
2. Who am I ? • Name: Keisuke Maeda • Age: 22 • Programming: ◦ JavaScript (React, Angular) ◦ Python ◦ PHP ◦ Ruby
3. ࠓ೔ͷΞδΣϯμ ࣮ྫ঺հ ར༻͍ͯ͠ΔओͳϥΠϒϥϦ ੒ޭͱࣦഊɺͦͯ͠൓ল
4. ࣮ྫ঺հ
5. ࣮ྫ঺հ ࣮ྫᶃ ʙ֓ཁʙ ໊฽؅ཧαʔϏε αʔΫϧ΍ΫϥϒͷϝϯόʔΛ؅ཧͰ͖Δ໊฽αʔϏε ݸਓ΁ͷϝʔϧૹ৴΍ɺॅॴೖྗʹΑΔ஍ਤ࿈ಈ͕Ͱ͖Δɻ άϥϑʹΑΓ ϝϯόʔͷ૿ݮ͕ Ұ໨ͰΘ͔Δ ॅॴೖྗͰ ஍ਤͱ࿈ಈ͠ॅॴ͕ ϐϯͰΘ͔Δ ݸਓ·ͨ͸ ͋Δूஂʹର͢Δ ϝʔϧૹ৴ػೳ ߴ౓ͳݕࡧػೳ Λ౥ࡌ
6. ࣮ྫ঺հ ࣮ྫᶃ ʙߏ੒ʙ !"" src # !"" actions # !"" components # # !"" Common # !"" containers # !"" index.jsx # !"" reducers # !"" route.jsx # !"" settings # !"" stylesheets # $"" utils σΟϨΫτϦߏ੒
7. ࣮ྫ঺հ ࣮ྫᶃ ʙߏ੒ʙ !"" src # !"" actions # !"" components # # !"" Common # !"" containers # !"" index.jsx # !"" reducers # !"" route.jsx # !"" settings # !"" stylesheets # $"" utils ← Actions ← Containers ← Reducers Reduxͷߏ੒෦඼
8. ࣮ྫ঺հ ࣮ྫᶃ ʙߏ੒ʙ !"" src # !"" actions # !"" components # # !"" Common # !"" containers # !"" index.jsx # !"" reducers # !"" route.jsx # !"" settings # !"" stylesheets # $"" utils ← ڞ௨Components ΞϓϦέʔγϣϯͷߏ੒෦඼ ← ֤ϖʔδ ← ΞϓϦέʔγϣϯͷϧʔτ ←ϧʔςΟϯά
9. ࣮ྫ঺հ ࣮ྫᶃ ʙߏ੒ʙ !"" src # !"" actions # !"" components # # !"" Common # !"" containers # !"" index.jsx # !"" reducers # !"" route.jsx # !"" settings # !"" stylesheets # $"" utils ← ΞϓϦͷઃఆϑΝΠϧ ͦͷଞ ← cssϑΥϧμ ← ൚༻తؔ਺ϑΥϧμ
10. ҰݴͰݴ͏ͱɺγϯϓϧ ࣮ྫ঺հ ͚ͩͲɺࠓݱࡏͩͱݹ͍
11. ࣮ྫ঺հ ࣮ྫᶄ ʙ֓ཁʙ αϩϯ঎඼ൃ஫αΠτ αϩϯ͕ɺཉ͍͠঎඼Λ͙͢ʹൃ஫Ͱ͖ΔαΠτ ঎඼ͷҰཡ͔Βཉ͍͠΋ͷΛબΜͰൃ஫Ͱ͖Δɻ ঎඼Ұཡ͔Βͷ ঎඼ൃ஫΍஫จͷ֬ೝ AWS CognitoʹΑΔ Ϣʔβ؅ཧ ؅ཧϢʔβʹΑΔ डൃ஫ͷ֬ೝ CSVͰͷ঎඼௥Ճ΍ ൃ஫৘ใͷΞ΢τϓοτ
12. ࣮ྫ঺հ ࣮ྫᶄ ʙߏ੒ʙ !"" src # !"" actions # !"" components # # !"" Common # # !"" Routes # !"" config # !"" containers # !"" index.js # !"" models # !"" reducers # !"" styles # $"" utils σΟϨΫτϦߏ੒
13. ࣮ྫ঺հ ࣮ྫᶄ ʙߏ੒ʙ !"" src # !"" actions # !"" components # # !"" Common # # !"" Routes # !"" config # !"" containers # !"" index.js # !"" models # !"" reducers # !"" styles # $"" utils ← Actions ( Redux Actions ) ← Containers ← Reducers Reduxͷߏ੒෦඼ ← Model ( Immutable.js )
14. ࣮ྫ঺հ ࣮ྫᶄ ʙߏ੒ʙ Redux Actionsར༻ͰͲΕ͚ͩมΘΔʁ ࣮ྫᶃͷAction ࣮ྫᶄͷAction
15. ࣮ྫ঺հ ࣮ྫᶄ ʙߏ੒ʙ !"" src # !"" actions # !"" components # # !"" Common # # !"" Routes # !"" config # !"" containers # !"" index.js # !"" models # !"" reducers # !"" styles # $"" utils ← ڞ௨Components ΞϓϦέʔγϣϯͷߏ੒෦඼ ← ֤ϖʔδ ← ΞϓϦέʔγϣϯͷϧʔτ ←ϧʔςΟϯά
16. ࣮ྫ঺հ ࣮ྫᶄ ʙߏ੒ʙ !"" src # !"" actions # !"" components # # !"" Common # # !"" Routes # !"" config # !"" containers # !"" index.js # !"" models # !"" reducers # !"" styles # $"" utils ← ΞϓϦͷઃఆϑΝΠϧ ͦͷଞ ← cssϑΥϧμ ← ൚༻తؔ਺ϑΥϧμ
17. อकੑɺՄಡੑͷ͋Δߏ੒ ࣮ྫ঺հ ͨͩɺֶशίετ͕ߴ͘ͳΔ
18. ར༻͍ͯ͠ΔओͳϥΠϒϥϦ
19. ར༻͍ͯ͠ΔओͳϥΠϒϥϦ Semantic UI React Code Result Semantic UIͷެࣜReactϥΠϒϥϦ https://react.semantic-ui.com
20. ར༻͍ͯ͠ΔओͳϥΠϒϥϦ Card τϥϯϓΧʔυͷΑ͏ͳɺΧʔυϨΠΞ΢τ Code Result
21. ར༻͍ͯ͠ΔओͳϥΠϒϥϦ Vertical Menu γϯϓϧͰɺՄѪ͍σβΠϯͷਨ௚ϝχϡʔ Code Result
22. ར༻͍ͯ͠ΔओͳϥΠϒϥϦ <Recharts /> νϟʔτ΍άϥϑΛ࡞੒Ͱ͖ΔϥΠϒϥϦ • ԁάϥϑ • ๮άϥϑ • ࢄ෍ਤ • Ϩʔμʔ etc… http://recharts.org/
23. ར༻͍ͯ͠ΔओͳϥΠϒϥϦ <Recharts /> const data = [ {name: 'Data A', value: 4000}, {name: 'Data B', value: 3000}, {name: 'Data C', value: 2000}, {name: 'Data D', value: 2780}, {name: 'Data E', value: 1890}, {name: 'Data F', value: 2390}, {name: ‘Data G', value: 3490}, ] ද͍ࣔͤͨ͞σʔλ render () { return ( <LineChart width={400} height={400} data={data}> <Line type="monotone" dataKey=“value” /> </LineChart> ) } Renderʹ௥Ճ
24. ར༻͍ͯ͠ΔओͳϥΠϒϥϦ <Recharts /> ComposedChart PieChart RadialBarChart ͦͷଞ…
25. ར༻͍ͯ͠ΔओͳϥΠϒϥϦ Reapop Reactͷ௨஌ϥΠϒϥϦ ๛෋ͳϓϩύςΟͰࡉ͔ͳΧελϚΠζ͕Մೳ http:/ /louisbarranqueiro.github.io/reapop/
26. ར༻͍ͯ͠ΔओͳϥΠϒϥϦ Reapop notify({ title: 'Welcome', message: ‘Hello!!’, status: 'success', dismissible: true, dismissAfter: 3000 }); render() { return ( <div> <NotificationsSystem theme={theme}/> </div> ); } ↓ݺͼग़͢͜ͱͰ௨஌͕දࣔ͞ΕΔ→ ←௥Ճ(ද্ࣔมԽ͸ͳ͍)
27. ར༻͍ͯ͠ΔओͳϥΠϒϥϦ Reapop DefaultʹՃ͑ͯɺBootstrapςʔϚ͕༻ҙ͞Ε͍ͯΔɻ
28. ར༻͍ͯ͠ΔओͳϥΠϒϥϦ Reapop ެࣜDemoαΠτ
29. ར༻͍ͯ͠ΔओͳϥΠϒϥϦ Reapop ެࣜDemoαΠτ
30. ར༻͍ͯ͠ΔओͳϥΠϒϥϦ Redux Form React + ReduxͷFormؔ࿈ϥΠϒϥϦ FormͷόϦσʔγϣϯपΓͷ࣮૷͕Ͱ͖ΔͳͲ
31. ར༻͍ͯ͠ΔओͳϥΠϒϥϦ Redux FormΛ࢖͍ͬͯͳ͍৔߹ɺ Formͷ؅ཧʹ͸ɺೖྗϑΥʔϜຖʹonChangeΛ࢖ͬͯͷ State؅ཧ͕ඞཁͩͬͨ… όϦσʔγϣϯΤϥʔΛදࣔ͢Δ৔߹΋ɺ ֤ϑΥʔϜຖʹΤϥʔϝοηʔδΛදࣔͤ͞ΔϑϥάΛ ࡞੒͠ɺ؅ཧ͢Δඞཁ͕͋ͬͨ… ͱʹ͔͘ɺRender΍Action͕ංେԽͯ͠͠·͏ɻ ͜Μͳײ͡ʹ
32. ར༻͍ͯ͠ΔओͳϥΠϒϥϦ Redux FormΛಋೖ͢Δͱ… ᶃ Redux Form͕ಠࣗͷStoreΛ࣋ͭͨΊɺ Actionͷهड़͕ඞཁͳ͘ͳΔɻ ͜Μͳ͜ͱʹͳΒͳ͍
33. ར༻͍ͯ͠ΔओͳϥΠϒϥϦ Redux FormΛಋೖ͢Δͱ… ᶄ Redux FormఏڙͷComponentʹΑΓɺ ϑΥʔϜͷ࡞੒ɺόϦσʔγϣϯͳͲָ͕ʹͳΔɻ <Field name="username" type="text" component="input" label="Username" /> Field Component ೖྗ(input΍radioͷWrap)
34. ར༻͍ͯ͠ΔओͳϥΠϒϥϦ Redux FormΛಋೖ͢Δͱ… ᶄ Redux FormఏڙͷComponentʹΑΓɺ ϑΥʔϜͷ࡞੒ɺόϦσʔγϣϯͳͲָ͕ʹͳΔɻ export default reduxForm({ form: 'SubmitForm', // Formͷ໊শ(ΞϓϦ಺ͰҰҙ) validate, // ͜ͷϑΥʔϜͰར༻͢ΔόϦσʔγϣϯ })(SubmitForm) reduxForm Component FormͷΦϓγϣϯ(໊લɺόϦσʔγϣϯͳͲ)
35. ར༻͍ͯ͠ΔओͳϥΠϒϥϦ Redux FormΛಋೖ͢Δͱ… Validation <form onSubmit={handleSubmit}> <Field name="username" type="text" component=“input" label="Username" /> <div> <button type="submit"> Submit </button> </div> </form> const validate = values => { const errors = {} if (!values.username) { errors.username = 'Required' } else if (values.username.length > 15) { errors.username = 'Must be 15 characters or less' } return errors } export default reduxForm({ form: 'SubmitForm', // Formͷ໊শ(ΞϓϦ಺ͰҰҙ) validate, // ͜ͷϑΥʔϜͰར༻͢ΔόϦσʔγϣϯ })(SubmitForm) Submit࣌ʹvalidate͕ݺ͹ΕΔ • valuesʹ͸Formͷ஋͕དྷΔ Form
36. ར༻͍ͯ͠ΔओͳϥΠϒϥϦ Redux FormΛಋೖ͢Δͱ… Validation const validate = values => { const errors = {} if (!values.username) { errors.username = 'Required' } else if (values.username.length > 15) { errors.username = 'Must be 15 characters or less' } return errors } Result <Field />Ͱғ͍ͬͯΔ͜ͱͰɺରԠ߲ͨ͠໨ʹ ࣗಈతʹΤϥʔϝοηʔδ͕දࣔ͞ΕΔɻ
37. ར༻͍ͯ͠ΔओͳϥΠϒϥϦ https:/ /allenfang.github.io/react-bootstrap-table/ react-bootstrap-table It's a bootstrap table rebuilt for React.js ߴ౓ͳΧελϚΠζ΋ՄೳͳɺBootstrapࣜσʔλςʔϒϧ
38. ར༻͍ͯ͠ΔओͳϥΠϒϥϦ react-bootstrap-table render() { return ( <BootstrapTable data={ products }> <TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn> <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn> <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn> </BootstrapTable> ); }
39. ར༻͍ͯ͠ΔओͳϥΠϒϥϦ react-bootstrap-table products = [ { id: 1, name: “Item name 0”, price: 2100 },… ]; <BootstrapTable data={ products }> <TableHeaderColumn dataField=‘id’ isKey > Product ID </TableHeaderColumn> <TableHeaderColumn dataField=‘name' > Product Name </TableHeaderColumn> <TableHeaderColumn dataField=‘price' > Product Price </TableHeaderColumn> </BootstrapTable> <TableHeaderColumn />ͷதʹɺ ɹɹɹɹͦͷྻͰද͍ࣔͨ͠ϓϩύςΟΛࢦఆ(dataField)
40. ར༻͍ͯ͠ΔओͳϥΠϒϥϦ react-bootstrap-table <TableHeaderColumn dataField=“id” dataSort > Product ID </TableHeaderColumn> ιʔτ Customize(Ұ෦) <BootstrapTable data={products} pagination > … </BootstrapTable> ϖʔδωʔτ
41. ੒ޭͱࣦഊɺ൓ল
42. ࣮Ҋ݅Ͱಘͨ੒ޭ
43. ੒ޭͱࣦഊɺ൓ল ੒ޭ ϥΠϒϥϦɺϕετϓϥΫςΟεͷௐࠪͰӳޠهࣄʹର͢Δ఍߅ײ͕ͳ͘ͳͬͨɻ ֤ϖʔδɺίϯϙʔωϯτ୯ҐͰͷ෼ׂͨ͠࡞ۀ͕Ͱ͖Δɻ ReactҊ݅Ͱ࢖͍·ΘͤΔίϯϙʔωϯτΛ࡞੒Ͱ͖ͨɻ
44. ࣮Ҋ݅ͷࣦഊͱɺײͨ͡൓ল
45. ੒ޭͱࣦഊɺ൓ল ࣦഊͱ൓ল ΋ͬͱطଘϥΠϒϥϦΛ୳͓͚ͯ͠͹Α͔ͬͨɻ ReactͷόʔδϣϯΞοϓʹΑΔϥΠϒϥϦͷ࢓༷มߋʹ͍͍ͭͯ͘ͷ͕େม ೔ʑϕετϓϥΫςΟε͕มΘΔͨΊɺຖ೔ௐ͕ࠪඞཁ
46. ͝੩ௌɺ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ