React.jsでプロダクション環境を見据える

React.jsͰϓϩμΫγϣϯ؀ڥΛݟਾ͑Δ — Author: Junya Nakazato 1

ࣗݾ঺հ • גࣜձࣾγʔΤʔΞυόϯε • ϑϩϯτΤϯυ/όοΫΤϯυ։ൃ • ஥ཬ ३໼ • ؍ଌର৅
• Rails, React.js, Material UI, Docker, Chef, ServerSpec, Amazon ECS, CircleCI 2.0, Neovim 2

{ "name": "Junya Nakazato", "job": "Front-End and Back-End Web Developer",
"live": "Okinawa, Japan", "frontend": [ "JavaScript", "React", "Material-UI", "Grommet" ], "backend": [ "Node", "Ruby", "Java", "PHP", "Rails", "Spring Framework", "FuelPHP" ], "infrastructure": [ "AWS", "ECS", "CloudFront", "Docker", "Chef" ], "ops": [ "CircleCI", "NewRelic", "Datadog", "Sentry" ], "tools": [ "Mac", "Neovim", "zsh", "Vimperator", "XCode" ], "game": [ "League of Legends", "GUILTY GEAR XX ΛCORE" ], } 3

ۀ຿಺༰ • SEM Web޿ࠂʹؔ͢ΔγεςϜߏங • ΞϝʔόαʔϏεͷ؂ࢹγεςϜߏங • ؂ࢹର৅ɾΦϖϨʔλͷ෼ੳϨϙʔτ • ۀ຿γεςϜͷσʔληϯλʔҠઃ
• εϚϗ޲͚SPAαΠτ࣮૷Ὅ New 4

എܠ ࠓ࣌ͷJSք۾஌Βͳ͍͚ͲɺReact.jsͷ͓࢓ࣄ͕ৼΒΕ·ͨ͠ɻ ! ਺िؒɺ৸ෆ଍ʹͳΓͳ͕Βษڧͨ͠" ͠ΜͲ͔͚ͬͨͲɺ͍Ζ͍ΖಘΔ΋ͷ͸͋ͬͨ 5

ಘͨ΋ͷ • ES2016ͷจ๏Λ֮͑ͨ • eslint͔ͬͯAirbnb JS Style Guildeʹ৐ͬऔͬͨॻ͖ํ • [email protected]Λ֮͑ͨ(v1.0.0alpha͸͠ΒΜʣ
• ౰ͨΓোΓͷͳ͍webpackͷ࢖͍ํ 6

࿩͍ͨ͜͠ͱ ࠓճ͸ओʹwebpackʹϑΥʔΧεͯ͠࿩͠·͢ React.jsͷίʔυ΋ग़ͯ͘ΔΑ र͖ͬͯͨαϯϓϧίʔυ͔Βɺ ϓϩμΫγϣϯར༻ʹ޲͚ͯ৭ʑ΍ͬͨͷͰ·ͱΊ·͢ɻ 7

webpackͬͯʁ ҰݴͰݴ͏ͱɺjsͷͨΊͷϏϧυπʔϧ • ֤छϥΠϒϥϦ΍ࣗ෼Ͱॻ͍ͨjsΛϏϧυʢ݁߹ʣͰ͖Δ • ը૾΍CSS(Sass, LESS, Stylus)΋ѻ͑Δ • ྨࣅͷϏϧυπʔϧ:
Grunt, GulpͳͲ • Rails5.1ͰwebpackೖΔ͔΋ 8

ຊ൪؀ڥʹ޲͚ͯ΍Γ͔ͨͬͨ͜ͱ • ։ൃ/ຊ൪؀ڥผʹϏϧυ͍ͨ͠ • Uglify/Minify͍ͨ͠ • jsϑΝΠϧʹϋογϡ஋͚ͭͯϦϦʔε؅ཧ͍ͨ͠ • ಈతURLΛGoogle AnalyticsͰ௥͍͍ͨ
10

webpack.config.jsͷॻ͘ྲྀΕ • αϯϓϧίϐϖ • औΓࠐΉϑΝΠϧΛࢦఆ • ग़ྗઌࢦఆ • ֦ுࢠผʹϩʔμʔΛઃఆ •
ϓϥάΠϯཉ͚͠Ε͹ಋೖ 11

։ൃ/ຊ൪؀ڥ ผͰϏϧυ͍ͨ͠ if (NODE_ENV==='prod')Ͱύϥϝʔλ੾Γ෼͚ͯ΋͍͍͚Ͳ… webpack-mergeΛಋೖͯ͠ɺconfigϑΝΠϧΛ෼཭͠Α͏ʂ webpack.configΛobjectͱͯ͠ϚʔδͰ͖·͢ɻ npm i -D webpack-merge
13

࢖͍ํ webpackୟ͘લʹɺpackage.jsonܦ༝ͰNODE_ENVΛ౉͢ // package.json scripts: { build: "NODE_ENV=production webpack --progress
--colors", start: "webpack-dev-server --history-api-fallback --hot --inline --progress --colors", }, 14

NODE_ENVผʹconfigੜ੒ͯ͠Ϛʔδ // webpack.config.babel.js import merge from 'webpack-merge'; // NODE_ENVͰ෼ذ const
config = process.env.NODE_ENV === 'production' ? require('./webpack.config.prod.babel.js') : require('./webpack.config.dev.babel.js'); const common = { context: __dirname, entry: './src/index.jsx', output: { filename: 'bundle.js' }, }; // ڞ௨ΦϒδΣΫτͱ֤configΛmerge module.exports = merge(common, config); 15

Uglify/Minify͍ͨ͠ ඪ४Ͱόϯυϧ͞Ε͍ͯΔϓϥάΠϯ UglifyJsPluginɺLoaderOptionsPluginΛ׆༻͠Α͏ɻ ※ͦΕͳΓʹ஗͍ͷͰɺຊ൪ϏϧυͷΈద༻Λਪ঑ 16

࢖͍ํ // webpack.conﬁg.babel.js import webpack from 'webpack'; module.exports = {
plugins: [ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false }, comments: false, }), new webpack.LoaderOptionsPlugin({ minimize: true }), // webpack2.X͔Β༗ޮ new webpack.optimize.AggressiveMergingPlugin(), ], }; 17

ϑΝΠϧ໊ʹϋογϡ஋Λ͚͍ͭͨ bundle.jsͱ͍͏ݻఆͷ໊લͩͱ… CDNʹ͋͛ͨࡍɺੈ୅؅ཧͰ͖ͳ͍ʂ manifest-pluginΛೖΕͯɺࣗಈੜ੒͞ΕͨϑΝΠϧ໊ʹ͠Α͏ʂ npm i -D webpack-manifest-plugin chunk-manifest- webpack-plugin
18

entryͷΩʔΛݩʹϑΝΠϧ໊͕ੜ੒͞ΕΔ module.exports = { entry: { bundle: './src/index.jsx' }, output:
{ - filename: 'bundle.js', + filename: '[name].[chunkhash].js', }, plugins: [ + new ManifestPlugin(), + new ChunkManifestPlugin({ + filename: 'chunk-manifest.json', + manifestVariable: 'webpackManifest', + })] 19

html-webpack-pluginͱ૊Έ߹ΘͤΕ͹…  <!DOCTYPE html> <html> <head> <meta http-equiv="content-type"
content="text/html; charset=utf-8"> <title>title</title> </head> <body> <div id="root"></div> <script type="text/javascript" src="/bundle.b00a9f3a29b791781cc5.js"></script> </body> </html> 20

ಈతURLΛGoogle AnalyticsͰ௥͏ react-router࢖ͬͯͨΒɺGA͕औΕͳ͍͜ͱʹؾͮ͘ɻ react-gaೖΕΑ͏ɻ npm i -S react-ga 21

react-router͔ͬͯɺRouterίϯϙʔωϯτʹಥͬࠐΊ͹OK // src/index.jsx import React from 'react'; import ReactDOM from
'react-dom'; import ReactGA from 'react-ga'; import { Router, Route, IndexRoute, browserHistory } from 'react-router'; import App from '../containers/App'; window.React = React; ReactGA.initialize('UA-123456-7'); const logPageView = () => { ReactGA.set({ page: window.location.pathname }); ReactGA.pageview(window.location.pathname); }; ReactDOM.render(( <Router history={browserHistory} onUpdate={logPageView}> <Route path="/"> <IndexRoute component={App} /> <Route path="/:userName" component={App} /> </Route> </Router> ), document.getElementById('root')); 22

௕͍ͷͰ͍Ζ͍Ζলུ import ReactGA from 'react-ga'; window.React = React; ReactGA.initialize('UA-123456-7'); const
logPageView = () => { ReactGA.set({ page: window.location.pathname }); ReactGA.pageview(window.location.pathname); }; ReactDOM.render(( <Router history={browserHistory} onUpdate={logPageView} /> )) 23

ײ૝ɾ·ͱΊ • ࣾ಺ʹwebpackۃΊͨ΋ͷ͕͍ͳͯۤ͘࿑ͨ͠! • package.json, webpack.config.js, .baelrc, .eslintrcɺશͯΛۃΊͳ͘ ͯ΋React.js͸ॻ͚Δ͚Ͳխʹ࢖͍͔ͨͬͨΒؤுΔ͔͠ͳ͍ •
ґଘؔ܎͕ղܾ͢Δ·Ͱ৺ΛอͯɺؤுΕ • webpack2.2͕ެ։͞ΕͨΑɻՋͳ࣌ʹϦϦʔεϊʔτ౳͸ νΣοΫ͠Α͏" 24

React.jsでプロダクション環境を見据える

React.jsでプロダクション環境を見据える

Junya Nakazato

More Decks by Junya Nakazato

Other Decks in Technology

Featured

Transcript

React.jsͰϓϩμΫγϣϯ؀ڥΛݟਾ͑Δ — Author: Junya Nakazato 1

ࣗݾ঺հ • גࣜձࣾγʔΤʔΞυόϯε • ϑϩϯτΤϯυ/όοΫΤϯυ։ൃ • ஥ཬ ३໼ • ؍ଌର৅

{ "name": "Junya Nakazato", "job": "Front-End and Back-End Web Developer",

ۀ຿಺༰ • SEM Web޿ࠂʹؔ͢ΔγεςϜߏங • ΞϝʔόαʔϏεͷ؂ࢹγεςϜߏங • ؂ࢹର৅ɾΦϖϨʔλͷ෼ੳϨϙʔτ • ۀ຿γεςϜͷσʔληϯλʔҠઃ

എܠ ࠓ࣌ͷJSք۾஌Βͳ͍͚ͲɺReact.jsͷ͓࢓ࣄ͕ৼΒΕ·ͨ͠ɻ ! ਺िؒɺ৸ෆ଍ʹͳΓͳ͕Βษڧͨ͠" ͠ΜͲ͔͚ͬͨͲɺ͍Ζ͍ΖಘΔ΋ͷ͸͋ͬͨ 5

ಘͨ΋ͷ • ES2016ͷจ๏Λ֮͑ͨ • eslint͔ͬͯAirbnb JS Style Guildeʹ৐ͬऔͬͨॻ͖ํ • [email protected]Λ֮͑ͨ(v1.0.0alpha͸͠ΒΜʣ

࿩͍ͨ͜͠ͱ ࠓճ͸ओʹwebpackʹϑΥʔΧεͯ͠࿩͠·͢ React.jsͷίʔυ΋ग़ͯ͘ΔΑ र͖ͬͯͨαϯϓϧίʔυ͔Βɺ ϓϩμΫγϣϯར༻ʹ޲͚ͯ৭ʑ΍ͬͨͷͰ·ͱΊ·͢ɻ 7

webpackͬͯʁ ҰݴͰݴ͏ͱɺjsͷͨΊͷϏϧυπʔϧ • ֤छϥΠϒϥϦ΍ࣗ෼Ͱॻ͍ͨjsΛϏϧυʢ݁߹ʣͰ͖Δ • ը૾΍CSS(Sass, LESS, Stylus)΋ѻ͑Δ • ྨࣅͷϏϧυπʔϧ:

9

ຊ൪؀ڥʹ޲͚ͯ΍Γ͔ͨͬͨ͜ͱ • ։ൃ/ຊ൪؀ڥผʹϏϧυ͍ͨ͠ • Uglify/Minify͍ͨ͠ • jsϑΝΠϧʹϋογϡ஋͚ͭͯϦϦʔε؅ཧ͍ͨ͠ • ಈతURLΛGoogle AnalyticsͰ௥͍͍ͨ

webpack.config.jsͷॻ͘ྲྀΕ • αϯϓϧίϐϖ • औΓࠐΉϑΝΠϧΛࢦఆ • ग़ྗઌࢦఆ • ֦ுࢠผʹϩʔμʔΛઃఆ •

12

։ൃ/ຊ൪؀ڥ ผͰϏϧυ͍ͨ͠ if (NODE_ENV==='prod')Ͱύϥϝʔλ੾Γ෼͚ͯ΋͍͍͚Ͳ… webpack-mergeΛಋೖͯ͠ɺconfigϑΝΠϧΛ෼཭͠Α͏ʂ webpack.configΛobjectͱͯ͠ϚʔδͰ͖·͢ɻ npm i -D webpack-merge

࢖͍ํ webpackୟ͘લʹɺpackage.jsonܦ༝ͰNODE_ENVΛ౉͢ // package.json scripts: { build: "NODE_ENV=production webpack --progress

NODE_ENVผʹconfigੜ੒ͯ͠Ϛʔδ // webpack.conﬁg.babel.js import merge from 'webpack-merge'; // NODE_ENVͰ෼ذ const

Uglify/Minify͍ͨ͠ ඪ४Ͱόϯυϧ͞Ε͍ͯΔϓϥάΠϯ UglifyJsPluginɺLoaderOptionsPluginΛ׆༻͠Α͏ɻ ※ͦΕͳΓʹ஗͍ͷͰɺຊ൪ϏϧυͷΈద༻Λਪ঑ 16

࢖͍ํ // webpack.conﬁg.babel.js import webpack from 'webpack'; module.exports = {

ϑΝΠϧ໊ʹϋογϡ஋Λ͚͍ͭͨ bundle.jsͱ͍͏ݻఆͷ໊લͩͱ… CDNʹ͋͛ͨࡍɺੈ୅؅ཧͰ͖ͳ͍ʂ manifest-pluginΛೖΕͯɺࣗಈੜ੒͞ΕͨϑΝΠϧ໊ʹ͠Α͏ʂ npm i -D webpack-manifest-plugin chunk-manifest- webpack-plugin

entryͷΩʔΛݩʹϑΝΠϧ໊͕ੜ੒͞ΕΔ module.exports = { entry: { bundle: './src/index.jsx' }, output:

html-webpack-pluginͱ૊Έ߹ΘͤΕ͹…  <!DOCTYPE html> <html> <head> <meta http-equiv="content-type"

ಈతURLΛGoogle AnalyticsͰ௥͏ react-router࢖ͬͯͨΒɺGA͕औΕͳ͍͜ͱʹؾͮ͘ɻ react-gaೖΕΑ͏ɻ npm i -S react-ga 21

react-router͔ͬͯɺRouterίϯϙʔωϯτʹಥͬࠐΊ͹OK // src/index.jsx import React from 'react'; import ReactDOM from

௕͍ͷͰ͍Ζ͍Ζলུ import ReactGA from 'react-ga'; window.React = React; ReactGA.initialize('UA-123456-7'); const

ײ૝ɾ·ͱΊ • ࣾ಺ʹwebpackۃΊͨ΋ͷ͕͍ͳͯۤ͘࿑ͨ͠! • package.json, webpack.config.js, .baelrc, .eslintrcɺશͯΛۃΊͳ͘ ͯ΋React.js͸ॻ͚Δ͚Ͳխʹ࢖͍͔ͨͬͨΒؤுΔ͔͠ͳ͍ •