Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
[Mix Leap] Reactを実案件で使って思った''成功''と''反省''
Search
k.maeda
January 12, 2018
Programming
0
120
[Mix Leap] Reactを実案件で使って思った''成功''と''反省''
2018年 1月 11日のMixLeapで利用したスライドです。
k.maeda
January 12, 2018
Tweet
Share
Other Decks in Programming
See All in Programming
Folding Cheat Sheet #1
philipschwarz
PRO
0
210
両面どころかインフラもTSでできるよ ~ 全方位TypeScriptによるプロダクト開発 ~
myfinder
9
3.2k
Hanami and htmx
bkuhlmann
0
190
今、知っておきたい! 生成AIエージェントの世界
elith
3
340
本格ローグライク制作にEbitengineを選んでみた
nagainaganawa
0
290
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
160
今の SmartHR にエンジニアで入社するとどうなるの?
daisukeshinoku
5
4.6k
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
3.5k
Elm 0.19.0 Changes
bkuhlmann
0
480
puregoの活用例
aethiopicuschan
0
220
"config" ってなんだ? / What is "config"?
okashoi
0
210
9年開発を牽引して見えてきた、共通化すべきものと個別でつくるもの ~プログラム言語~
shinout
1
640
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
29
6k
How to name files
jennybc
64
92k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
990
Building Effective Engineering Teams - LeadDev
addyosmani
27
1.8k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
How STYLIGHT went responsive
nonsquared
92
4.8k
Designing the Hi-DPI Web
ddemaree
276
33k
Designing with Data
zakiwarfel
95
4.8k
Code Review Best Practice
trishagee
54
15k
Being A Developer After 40
akosma
56
580k
Transcript
ReactΛ࣮Ҋ݅Ͱͬͯࢥͬͨޭͱল Osaka Mix Leap Study #4 - React #mixleap
Who am I ? • Name: Keisuke Maeda • Age:
22 • Programming: ◦ JavaScript (React, Angular) ◦ Python ◦ PHP ◦ Ruby
ࠓͷΞδΣϯμ ࣮ྫհ ར༻͍ͯ͠ΔओͳϥΠϒϥϦ ޭͱࣦഊɺͦͯ͠ল
࣮ྫհ
࣮ྫհ ࣮ྫᶃ ʙ֓ཁʙ ໊ཧαʔϏε αʔΫϧΫϥϒͷϝϯόʔΛཧͰ͖Δ໊αʔϏε ݸਓͷϝʔϧૹ৴ɺॅॴೖྗʹΑΔਤ࿈ಈ͕Ͱ͖Δɻ άϥϑʹΑΓ ϝϯόʔͷ૿ݮ͕ ҰͰΘ͔Δ ॅॴೖྗͰ
ਤͱ࿈ಈ͠ॅॴ͕ ϐϯͰΘ͔Δ ݸਓ·ͨ ͋Δूஂʹର͢Δ ϝʔϧૹ৴ػೳ ߴͳݕࡧػೳ Λࡌ
࣮ྫհ ࣮ྫᶃ ʙߏʙ !"" src # !"" actions # !""
components # # !"" Common # !"" containers # !"" index.jsx # !"" reducers # !"" route.jsx # !"" settings # !"" stylesheets # $"" utils σΟϨΫτϦߏ
࣮ྫհ ࣮ྫᶃ ʙߏʙ !"" src # !"" actions # !""
components # # !"" Common # !"" containers # !"" index.jsx # !"" reducers # !"" route.jsx # !"" settings # !"" stylesheets # $"" utils ← Actions ← Containers ← Reducers Reduxͷߏ෦
࣮ྫհ ࣮ྫᶃ ʙߏʙ !"" src # !"" actions # !""
components # # !"" Common # !"" containers # !"" index.jsx # !"" reducers # !"" route.jsx # !"" settings # !"" stylesheets # $"" utils ← ڞ௨Components ΞϓϦέʔγϣϯͷߏ෦ ← ֤ϖʔδ ← ΞϓϦέʔγϣϯͷϧʔτ ←ϧʔςΟϯά
࣮ྫհ ࣮ྫᶃ ʙߏʙ !"" src # !"" actions # !""
components # # !"" Common # !"" containers # !"" index.jsx # !"" reducers # !"" route.jsx # !"" settings # !"" stylesheets # $"" utils ← ΞϓϦͷઃఆϑΝΠϧ ͦͷଞ ← cssϑΥϧμ ← ൚༻తؔϑΥϧμ
ҰݴͰݴ͏ͱɺγϯϓϧ ࣮ྫհ ͚ͩͲɺࠓݱࡏͩͱݹ͍
࣮ྫհ ࣮ྫᶄ ʙ֓ཁʙ αϩϯൃαΠτ αϩϯ͕ɺཉ͍͠Λ͙͢ʹൃͰ͖ΔαΠτ ͷҰཡ͔Βཉ͍͠ͷΛબΜͰൃͰ͖Δɻ Ұཡ͔Βͷ ൃจͷ֬ೝ AWS CognitoʹΑΔ
Ϣʔβཧ ཧϢʔβʹΑΔ डൃͷ֬ೝ CSVͰͷՃ ൃใͷΞτϓοτ
࣮ྫհ ࣮ྫᶄ ʙߏʙ !"" src # !"" actions # !""
components # # !"" Common # # !"" Routes # !"" config # !"" containers # !"" index.js # !"" models # !"" reducers # !"" styles # $"" utils σΟϨΫτϦߏ
࣮ྫհ ࣮ྫᶄ ʙߏʙ !"" src # !"" actions # !""
components # # !"" Common # # !"" Routes # !"" config # !"" containers # !"" index.js # !"" models # !"" reducers # !"" styles # $"" utils ← Actions ( Redux Actions ) ← Containers ← Reducers Reduxͷߏ෦ ← Model ( Immutable.js )
࣮ྫհ ࣮ྫᶄ ʙߏʙ Redux Actionsར༻ͰͲΕ͚ͩมΘΔʁ ࣮ྫᶃͷAction ࣮ྫᶄͷAction
࣮ྫհ ࣮ྫᶄ ʙߏʙ !"" src # !"" actions # !""
components # # !"" Common # # !"" Routes # !"" config # !"" containers # !"" index.js # !"" models # !"" reducers # !"" styles # $"" utils ← ڞ௨Components ΞϓϦέʔγϣϯͷߏ෦ ← ֤ϖʔδ ← ΞϓϦέʔγϣϯͷϧʔτ ←ϧʔςΟϯά
࣮ྫհ ࣮ྫᶄ ʙߏʙ !"" src # !"" actions # !""
components # # !"" Common # # !"" Routes # !"" config # !"" containers # !"" index.js # !"" models # !"" reducers # !"" styles # $"" utils ← ΞϓϦͷઃఆϑΝΠϧ ͦͷଞ ← cssϑΥϧμ ← ൚༻తؔϑΥϧμ
อकੑɺՄಡੑͷ͋Δߏ ࣮ྫհ ͨͩɺֶशίετ͕ߴ͘ͳΔ
ར༻͍ͯ͠ΔओͳϥΠϒϥϦ
ར༻͍ͯ͠ΔओͳϥΠϒϥϦ Semantic UI React Code Result Semantic UIͷެࣜReactϥΠϒϥϦ https://react.semantic-ui.com
ར༻͍ͯ͠ΔओͳϥΠϒϥϦ Card τϥϯϓΧʔυͷΑ͏ͳɺΧʔυϨΠΞτ Code Result
ར༻͍ͯ͠ΔओͳϥΠϒϥϦ Vertical Menu γϯϓϧͰɺՄѪ͍σβΠϯͷਨϝχϡʔ Code Result
ར༻͍ͯ͠ΔओͳϥΠϒϥϦ <Recharts /> νϟʔτάϥϑΛ࡞Ͱ͖ΔϥΠϒϥϦ • ԁάϥϑ • άϥϑ • ࢄਤ
• Ϩʔμʔ etc… http://recharts.org/
ར༻͍ͯ͠ΔओͳϥΠϒϥϦ <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ʹՃ
ར༻͍ͯ͠ΔओͳϥΠϒϥϦ <Recharts /> ComposedChart PieChart RadialBarChart ͦͷଞ…
ར༻͍ͯ͠ΔओͳϥΠϒϥϦ Reapop Reactͷ௨ϥΠϒϥϦ ๛ͳϓϩύςΟͰࡉ͔ͳΧελϚΠζ͕Մೳ http:/ /louisbarranqueiro.github.io/reapop/
ར༻͍ͯ͠ΔओͳϥΠϒϥϦ Reapop notify({ title: 'Welcome', message: ‘Hello!!’, status: 'success', dismissible:
true, dismissAfter: 3000 }); render() { return ( <div> <NotificationsSystem theme={theme}/> </div> ); } ↓ݺͼग़͢͜ͱͰ௨͕දࣔ͞ΕΔ→ ←Ճ(ද্ࣔมԽͳ͍)
ར༻͍ͯ͠ΔओͳϥΠϒϥϦ Reapop DefaultʹՃ͑ͯɺBootstrapςʔϚ͕༻ҙ͞Ε͍ͯΔɻ
ར༻͍ͯ͠ΔओͳϥΠϒϥϦ Reapop ެࣜDemoαΠτ
ར༻͍ͯ͠ΔओͳϥΠϒϥϦ Reapop ެࣜDemoαΠτ
ར༻͍ͯ͠ΔओͳϥΠϒϥϦ Redux Form React + ReduxͷFormؔ࿈ϥΠϒϥϦ FormͷόϦσʔγϣϯपΓͷ࣮͕Ͱ͖ΔͳͲ
ར༻͍ͯ͠ΔओͳϥΠϒϥϦ Redux FormΛ͍ͬͯͳ͍߹ɺ FormͷཧʹɺೖྗϑΥʔϜຖʹonChangeΛͬͯͷ Stateཧ͕ඞཁͩͬͨ… όϦσʔγϣϯΤϥʔΛදࣔ͢Δ߹ɺ ֤ϑΥʔϜຖʹΤϥʔϝοηʔδΛදࣔͤ͞ΔϑϥάΛ ࡞͠ɺཧ͢Δඞཁ͕͋ͬͨ… ͱʹ͔͘ɺRenderAction͕ංେԽͯ͠͠·͏ɻ ͜Μͳײ͡ʹ
ར༻͍ͯ͠ΔओͳϥΠϒϥϦ Redux FormΛಋೖ͢Δͱ… ᶃ Redux Form͕ಠࣗͷStoreΛ࣋ͭͨΊɺ Actionͷهड़͕ඞཁͳ͘ͳΔɻ ͜Μͳ͜ͱʹͳΒͳ͍
ར༻͍ͯ͠ΔओͳϥΠϒϥϦ Redux FormΛಋೖ͢Δͱ… ᶄ Redux FormఏڙͷComponentʹΑΓɺ ϑΥʔϜͷ࡞ɺόϦσʔγϣϯͳͲָ͕ʹͳΔɻ <Field name="username" type="text"
component="input" label="Username" /> Field Component ೖྗ(inputradioͷWrap)
ར༻͍ͯ͠ΔओͳϥΠϒϥϦ Redux FormΛಋೖ͢Δͱ… ᶄ Redux FormఏڙͷComponentʹΑΓɺ ϑΥʔϜͷ࡞ɺόϦσʔγϣϯͳͲָ͕ʹͳΔɻ export default reduxForm({
form: 'SubmitForm', // Formͷ໊শ(ΞϓϦͰҰҙ) validate, // ͜ͷϑΥʔϜͰར༻͢ΔόϦσʔγϣϯ })(SubmitForm) reduxForm Component FormͷΦϓγϣϯ(໊લɺόϦσʔγϣϯͳͲ)
ར༻͍ͯ͠ΔओͳϥΠϒϥϦ 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
ར༻͍ͯ͠ΔओͳϥΠϒϥϦ 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 />Ͱғ͍ͬͯΔ͜ͱͰɺରԠ߲ͨ͠ʹ ࣗಈతʹΤϥʔϝοηʔδ͕දࣔ͞ΕΔɻ
ར༻͍ͯ͠ΔओͳϥΠϒϥϦ https:/ /allenfang.github.io/react-bootstrap-table/ react-bootstrap-table It's a bootstrap table rebuilt for
React.js ߴͳΧελϚΠζՄೳͳɺBootstrapࣜσʔλςʔϒϧ
ར༻͍ͯ͠ΔओͳϥΠϒϥϦ 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> ); }
ར༻͍ͯ͠ΔओͳϥΠϒϥϦ 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)
ར༻͍ͯ͠ΔओͳϥΠϒϥϦ react-bootstrap-table <TableHeaderColumn dataField=“id” dataSort > Product ID </TableHeaderColumn> ιʔτ
Customize(Ұ෦) <BootstrapTable data={products} pagination > … </BootstrapTable> ϖʔδωʔτ
ޭͱࣦഊɺল
࣮Ҋ݅Ͱಘͨޭ
ޭͱࣦഊɺল ޭ ϥΠϒϥϦɺϕετϓϥΫςΟεͷௐࠪͰӳޠهࣄʹର͢Δ߅ײ͕ͳ͘ͳͬͨɻ ֤ϖʔδɺίϯϙʔωϯτ୯ҐͰͷׂͨ͠࡞ۀ͕Ͱ͖Δɻ ReactҊ݅Ͱ͍·ΘͤΔίϯϙʔωϯτΛ࡞Ͱ͖ͨɻ
࣮Ҋ݅ͷࣦഊͱɺײͨ͡ল
ޭͱࣦഊɺল ࣦഊͱল ͬͱطଘϥΠϒϥϦΛ୳͓͚ͯ͠Α͔ͬͨɻ ReactͷόʔδϣϯΞοϓʹΑΔϥΠϒϥϦͷ༷มߋʹ͍͍ͭͯ͘ͷ͕େม ʑϕετϓϥΫςΟε͕มΘΔͨΊɺຖௐ͕ࠪඞཁ
͝੩ௌɺ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ