既存プロダクトのViewをReactに置き換える

【ヒカ☆ラボ】最新フロントエンドフレームワークを利用した開発事例！
https://atnd.org/events/83403
用の資料です

Transcript

1. طଘϓϩμΫτͷViewΛ Reactʹஔ͖׵͑Δ Dec 15 2016 @boiyaa
2. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ ϓϩϑΟʔϧ ▸ @boiyaa ▸ 33ࡀ ▸ ϑϧεέοϕΤϯδχΞ
3. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ ࿩͢͜ͱɾ࿩͞ͳ͍͜ͱ ▸ ࿩͢͜ͱ ▸ طଘϓϩμΫτʹReactΛಋೖ͢Δ͜ͱʹͨ͠എܠ ▸ ࣮૷αϯϓϧ ▸ https://github.com/boiyaa/todomvc-backbone-react ▸ ࿩͞ͳ͍͜ͱ ▸ πʔϧͱ͔ES6ͱ͔ͷৄ͍͠಺༰
4. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ ࣮͸ݱࡏ͸ ▸ View͚ͩஔ͖׵͑Δͷ͸΍Ί͍ͯ·͢ʢٕज़తෛ࠴తͳཧ ༝Ͱʣ ▸ ͜ͷεϥΠυͰ͸ɺViewΛReactʹஔ͖׵͑Α͏ͱࢼߦࡨޡ ͍ͯͨ࣌͠ͷ͓࿩Λ͠·͢
5. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ ৽ٕज़Λݕ౼ͨ͠എܠ ▸ 4೥લʹ࡞ΒΕͨۀ຿γεςϜ ▸ ϑϩϯτΤϯυFWʹ͸Backbone.jsΛ࠾༻ ▸ ػೳͷܧ͗଍͠Λ܁Γฦ͍ͯͬͨ݁͠ՌɺDOMૢ࡞ͷॲཧ͕ᷓΕ͔͑ͬͨ Backbone ViewʹͳΔ ▸ ΋͏গ͠εϚʔτʹUIΛ࡞ΕΔํ๏ʹม͑ΔͨΊɺjQueryʹґଘ͠ͳ͍React ͱAngular2͕ީิʹ্͕Δ ▸ Ͱ͖Ε͹طଘࢿ࢈΋׆༻͍ͨ͠ͱ͍͏͜ͱͰɺUI·ΘΓͷΈΛReactʹஔ͖׵ ͑ΔํࣜͱɺAngular2Ͱ1͔Β࡞Γ௚͢ํࣜͷ̎௨Γݕ౼͢Δ͜ͱʹͳͬͨ
6. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ ౰࣌ͷݕূ಺༰ ▸ ̍൪ӈͷ߲໨͸͍͍ͬͨͳΜͩͱ͍͏ײ͡Ͱ͕͢ɺݱߦʹͦ͏͍͏ը໘͕͋Γɺ ਺ສݸͷDOMͷඳը΍ૢ࡞ʹ͕͔͔࣌ؒΔΑ͏ͩͱଞ߲໨͕ັྗతͰ΋࠾༻Ͱ ͖ͳ͍ͱ͍͏͜ͱͰ༻ҙ͞Ε߲ͨ໨Ͱ͢ɻʢWhy?ʣ ▸ ݁ՌɺAngular2͸མબ͠ɺBackboneͷΈͷը໘ͱBackbone + Reactͷը໘Λ࢖ ͍෼͚͍ͯ͘ͱ͍͏͜ͱʹͳΓ·ͨ͠ ֶशίετ ੜ࢈ੑ อकੑ طଘࢿ࢈׆༻ ̍ສߦදૢ࡞ ύϑΥʔϚϯε Backbone ˕ ̋ ˚ ˕ ̋ Backbone + React ̋ ˕ ̋ ̋ ˚ Angular2 ˚ ˕ ̋ × ˚
7. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ Reactʹ͍ͭͯ ▸ MV*Ͱ͍͏ViewͷΈఏڙ͢ΔϑϨʔϜϫʔΫ ▸ React͚ͩͳΒ֮͑Δ͜ͱ͸গͳ͍Ͱ͢ ▸ React ComponentΫϥεΛܧঝ͠ɺHTML, CSS, JSͷͻͱ͔ͨ·ΓΛఆٛͨ͠ίϯ ϙʔωϯτΛ࡞Δͷ͕جຊతͳ࢖͍ํͰ͢ɻ ▸ ίϯϙʔωϯτ͸ɺJSXͱ͍͏จ๏Λ࢖ͬͯHTMLͷΑ͏ʹݺͼग़͠·͢ʢྫɿ <Example hoge=“fuga” />ʣ ▸ ίϯϙʔωϯτʹ౉ͨ͠஋͸propsɺίϯϙʔωϯτ͕࣋ͭ஋͸stateʹೖΓɺͦΕ Βͷ஋͕ߋ৽͞ΕΔͱίϯϙʔωϯτ͕࠶ඳը͞Ε·͢ ▸ Πϕϯτॲཧ͸λάଐੑʹઃఆ͠·͢ʢྫɿ<Example onClick={handleClick} />ʣ
8. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ Backboneʹ͍ͭͯ ▸ RESTful APIͱͷ࿈ܞΛγϯϓϧʹந৅Խɻେ͖̏ͭ͘ͷػೳΛ࣋ͪ·͢ ▸ Model: APIͷ୯਺Ϧιʔεͱಉظ ▸ Collection: Modelͷू߹ͰɺAPIͷෳ਺Ϧιʔεͱಉظ ▸ View: ඥͮ͘Model΍CollectionͷσʔλΛDOMʹ൓ө͠ɺDOMͷϢʔβೖྗ஋ ΛModel΍Collectionʹ൓ө
9. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ ReactԽ Part.1 : ΊͪΌΊͪΌബ͘ReactΛ࢖͏ ▸ Ұ൪؆୯ͳ࢖͍ํͰ͢ɻ ؆୯ʹಋೖͰ͖·͕͢ɺ͜ͷ࢖͍ํͰReact࢖͍͍ͨਓ͍ͳ͍ͱ ࢥ͏ͷͰɺࢀߟఔ౓ʹ঺հ͠·͢ ▸ ࢀߟURL ▸ https://facebook.github.io/react/docs/installation.html#using-a-cdn ▸ https://facebook.github.io/react/docs/react-without-es6.html ▸ https://facebook.github.io/react/docs/react-without-jsx.html ▸ ຊདྷReact͸ɺYarn,npm౳ͷύοέʔδϚωʔδϟɺwebpack,Browserify౳ͷόϯυϥɺ Babel౳ͷίϯύΠϥΛซͤͯ׆༻͢Δ͜ͱΛਪ঑͍ͯ͠·͕͢ɺࠓճ͸ͦΕΒͷπʔϧ Λ࢖Θͣ࢖͏ํ๏Ͱ͢
10. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ Α͋͘ΔBackboneϓϩδΣΫτͷྫ ▸ htmlʹςϯϓϨʔτΛॻ͍ͯɺ <script type="text/template" id="item-template"> <div class="view"> <input class="toggle" type="checkbox" <%= completed ? 'checked' : '' %>> <label><%- title %></label> <button class="destroy"></button> </div> <input class="edit" value="<%- title %>"> </script>
11. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ Α͋͘ΔBackboneϓϩδΣΫτͷྫ ▸ BackboneViewͰɺUnderscoreͱjQueryͰඳը͠·͢Ͷ template: _.template($('#item-template').html()), render: function () { this.$el.html(this.template(this.model.toJSON())); },
12. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ ςϯϓϨʔτΛReactԽ͢Δ ▸ htmlʹCDNͷReactΛ௥ه͠ɺ <script src="https://unpkg.com/react@15/dist/react.js"></ script> <script src="https://unpkg.com/react-dom@15/dist/react- dom.js"></script>
13. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ ςϯϓϨʔτΛReactԽ͢Δ ▸ htmlͷςϯϓϨʔτΛফͯ͠ɺReact ComponentΛ࡞Γ·͢ var Item = React.createClass({ render: function() { return React.createElement('div', null, React.createElement('div', {className: 'view'}, React.createElement('input', { className: ‘toggle', type: ‘checkbox', checked: this.props.completed }, null), React.createElement('label', null, this.props.title), React.createElement('button', {className: 'destroy'}, null) ), React.createElement('input', { className: ‘edit', defaultValue: this.props.title }, null) ); } });
14. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ ςϯϓϨʔτΛReactԽ͢Δ ▸ BackboneViewͷඳը͢Δͱ͜ΖΛॻ͖׵͑·͢ render: function () { ReactDOM.render( React.createElement(Item, this.model.toJSON(), null), this.$el.get(0) ); },
15. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ <script type="text/template" id="item-template"> <div class="view"> <input class="toggle" type="checkbox" <%= completed ? 'checked' : '' %>> <label><%- title %></label> <button class="destroy"></button> </div> <input class="edit" value="<%- title %>"> </script> var Item = React.createClass({ render: function() { return React.createElement('div', null, React.createElement('div', {className: 'view'}, React.createElement('input', { className: ‘toggle', type: ‘checkbox', checked: this.props.completed }, null), React.createElement('label', null, this.props.title), React.createElement('button', {className: 'destroy'}, null) ), React.createElement('input', { className: ‘edit', defaultValue: this.props.title }, null) ); } });
16. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ template: _.template($('#item-template').html()), render: function () { this.$el.html(this.template(this.model.toJSON())); }, render: function () { ReactDOM.render( React.createElement(Item, this.model.toJSON(), null), this.$el.get(0) ); },
17. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ Part.1 ·ͱΊ ▸ ͱͯ΋ݟͮΒͯ͘ݏͰ͢Ͷɻ ▸ ReactͬΆ͞ΛࣺͯΕ͹ɺಋೖࣗମ͸؆୯ʹͰ͖Δͱ͍͏ྫ Ͱͨ͠
18. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ ReactԽ Part.2 : JSXͰBackbone TemplateΛஔ͖׵͑Δ ▸ ύοέʔδϚωʔδϟɺόϯυϥɺίϯύΠϥΛಋೖ͢Δ͜ͱʹͳΓ·͕͢ɺ ReactࣗମͰ֮ ͑Δ͜ͱ͸গͳ͍࢖͍ํͰ͢ɻ πʔϧʹ׳Ε͍ͯͳ͚Ε͹ɺ࿅शʹͪΐ͏Ͳ͍͍͘Β͍ͷม ߋྔͰ͠ΐ͏ɻ ▸ ࢀߟURL ▸ https://nodejs.org/en/download/package-manager/ ▸ https://yarnpkg.com/en/docs/install#alternatives-tab ▸ https://facebook.github.io/react/docs/installation.html#installing-react ▸ https://webpack.js.org/guides/installation/ ▸ https://babeljs.io/docs/setup/#installation ▸ https://facebook.github.io/react/docs/introducing-jsx.html
19. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ ඞཁͳ΋ͷΛΠϯετʔϧ͢Δ ▸ ύοέʔδϚωʔδϟYarnΛΠϯετʔϧ ▸ ύοέʔδϚωʔδϟͱ͍͑͹npmͰ͕͢ɺReactؔ࿈ͷυΩϡϝϯτͰ͸yarnϕʔ εͰॻ͔Ε͍ͯΔ͜ͱ͕ଟ͍ͷͰࠓճ͸ͪ͜ΒΛ࢖͍·͢ɻ ▸ ίϚϯυ͸େମޓ׵͍ͯ͠ΔͷͰɺnpm͕͍͍ํ͸దٓஔ͖׵͑ͯಡΜͰ͍ͩ͘͞ɻ ▸ npmίϚϯυରরදɿ https://yarnpkg.com/en/docs/migrating-from-npm ▸ YarnΛ࢖ͬͯɺReactͱɺόϯυϥʹwebpackɺίϯύΠϥʹbabelΛΠϯετʔϧ yarn add react react-dom yarn add webpack babel-core babel-loader babel-preset-react --dev
20. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ ςϯϓϨʔτΛReactԽ͢Δ ▸ React ComponentΛ࡞ͬͯΈ·͢ ▸ ҰݟHTMLʹݟ͑Δ͜ͷจ๏͕JSXͰ͢ɻ className, defaultValue౳গ͠HTMLͱ ҧ͏ଐੑ͕͋Γ·͢Ͷɻ var Item = React.createClass({ render: function() { return ( <div> <div className="view"> <input className="toggle" type="checkbox" checked={this.props.checked} /> <label>{this.props.title}</label> <button className="destroy"></button> </div> <input className="edit" defaultValue={this.props.title} /> </div> ); } });
21. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ ςϯϓϨʔτΛReactԽ͢Δ ▸ BackboneViewͷඳը͢Δͱ͜ΖΛॻ͖׵͑ͯΈ·͢ render: function () { ReactDOM.render( <Item title={this.model.get('title')} checked={this.model.get('completed')} />, this.$el.get(0) ); },
22. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ <script type="text/template" id="item-template"> <div class="view"> <input class="toggle" type="checkbox" <%= completed ? 'checked' : '' %>> <label><%- title %></label> <button class="destroy"></button> </div> <input class="edit" value="<%- title %>"> </script> var Item = React.createClass({ render: function() { return ( <div> <div className="view"> <input className="toggle" type="checkbox" checked={this.props.checked} /> <label>{this.props.title}</label> <button className="destroy"></button> </div> <input className="edit" defaultValue={this.props.title} /> </div> ); } });
23. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ template: _.template($('#item-template').html()), render: function () { this.$el.html(this.template(this.model.toJSON())); }, render: function () { ReactDOM.render( <Item title={this.model.get('title')} checked={this.model.get('completed')} />, this.$el.get(0) ); },
24. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ ςϯϓϨʔτΛReactԽ͢Δ ▸ ςϯϓϨʔτ෦෼͸ࣅͨΑ͏ʹهड़Ͱ͖ΔΑ͏ʹͳΓɺඳ ը෦෼͕௚ײతͳදݱʹͳΓ·ͨ͠Ͷ ▸ ͨͩ͠ɺ͔͜͜ΒϏϧυ͢Δ࡞ۀ͕ඞཁͰ͢
25. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ ςϯϓϨʔτΛReactԽ͢Δ ▸ webpack.config.jsΛ࡞ΓɺϏϧυઃఆΛॻ͖·͢ module.exports = { entry: { 'components/Item.js': './js/components/Item.js', 'views/todo-view.js': './js/views/todo-view.js' }, output: { path: `${__dirname}/dist`, filename: '[name]' }, module: { loaders: [ { test: /\.js$/, loader: 'babel', query: { presets: ['react'] }
26. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ ςϯϓϨʔτΛReactԽ͢Δ ▸ package.jsonʹϏϧυεΫϦϓτΛ௥ه͠·͢ "scripts": { "build": "webpack" },
27. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ ςϯϓϨʔτΛReactԽ͢Δ ▸ Ϗϧυ͠·͠ΐ͏ ▸ ͜ΕͰdistʹϏϧυͨ͠jsϑΝΠϧ͕ੜ੒͞ΕΔͷͰɺ͜ΕΛhtmlʹಡΈ ࠐ·ͤ·͢ yarn run build <script src="node_modules/react/dist/react.js"></script> <script src="node_modules/react-dom/dist/react-dom.js"></ script> <script src="dist/components/Item.js"></script> <script src="dist/views/todo-view.js"></script>
28. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ ςϯϓϨʔτΛReactԽ͢Δ ▸ ϑΝΠϧ͕෼཭Ͱ͖ΔͨΊɺϖʔδؒͰͷςϯϓϨʔτͷڞ༗͕༰қʹ ▸ ͨͩɺςϯϓϨʔτϑΝΠϧ੾Γग़͚ͩ͠Ͱ͋Ε͹ɺUnderscore TemplateͰ΋JSTίϯύΠϥΛ࢖͑͹࣮ݱͰ͖·͢ɻ ▸ ͦΕ͚ͩͩͱ͍ͨͨ͠ϝϦοτʹͳΓ·ͤΜͶ ▸ JSXͷ͞Βʹ͍͍ͱ͜Ζ͸ɺJSX಺ͰReact ComponentΛݺͼग़͢͜ͱ ͕Ͱ͖ΔͷͰɺΑΓݟ΍͘͢ίϯϙʔωϯτͷೖΕࢠΛදݱͰ͖Δͱ ͜ΖͰ͢
29. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ Underscore Templateͷ৔߹ ▸ ਌ཁૉʹࢠཁૉΛ௥Ճ͢ΔͳΒɺView͔ΒViewΛݺͼग़ͯ͠ɺ DOMʹૠೖ͢ΔॲཧΛॻ͘͜ͱʹͳΓ·͢ ▸ html <script type="text/template" id="parent"> <div class="parent"></div> </script> <script type="text/template" id="child"> <div class="child"><%- text %></div> </script>
30. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ Underscore Templateͷ৔߹ ▸ js var ChildView = Backbone.View.extend({ template: _.template($('#child').html()), render: function () { this.$el.html(this.template(this.model.toJSON())); } }); var ParentView = Backbone.View.extend({ template: _.template($('#parent').html()), render: function () { this.$el.html(this.template()); var parent = this.$el.find('.parent'); this.collection.each(function (model) { var child = new ChildView({model: model}); parent.append(child.$el); }); } });
31. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ Reactͷ৔߹ ▸ ίϯϙʔωϯτ͔ΒίϯϙʔωϯτΛݺͼग़ͤ·͢ var Parent = React.createClass({ render: function() { var children = []; this.props.collection.each(function (model) { children.push(<Child model={model}>); }); return <div className="parent">{children}</div>; } }); var Child = React.createClass({ render: function() { return <div className="child">{this.props.text}</div>; } });
32. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ Reactͷ৔߹ ▸ ͳͷͰView͸1ͭʹͳΓ·͢ var ParentView = Backbone.View.extend({ render: function () { ReactDOM.render( <Item collection={this.collection} />, this.$el.get(0) ); } });
33. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ Part.2 ·ͱΊ ▸ ͜ͷΑ͏ʹγϯϓϧʹهड़Ͱ͖ɺؾܰʹڞ௨UI෦඼Λ෼཭ͯ͠͠·͑·͢ɻ
 Child͕ඳըͷΈͰ͍͍৔߹͸ɺ͜ͷख๏ͰऔΓೖΕΔͷ͸͋Γͩͱࢥ͍·͢ɻ ▸ ͔͠͠ͳ͕Βɺ
 Childʹੜ੒࣌΍Ϣʔβೖྗ࣌ͷΠϕϯτॲཧΛ࣋ͨͤͯɺͦΕ΋ڞ௨Խ͍ͨ͠ ͱ͍͏৔߹ɺ
 React ComponentͰͦ͏͍ͬͨࣄ͸ॻ͚·͕͢ɺ΋ͷʹΑͬͯBackbone View ʹॻ͍ͯ͋ͬͨΓReact Componentʹॻ͍ͯ͋ͬͨΓ͢ΔͱɺՄಡੑ΍อकੑ ΛԼ͛ͯ͠·͏ͷͰɺ
 ݁ہChildͷBackbone ViewΛ࡞ͬͯParentView͔Βݺͼग़͢͜ͱʹͳΓ·͢ɻ
34. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ ReactԽ Part.3 : Backbone ViewΛReact Componentʹஔ͖׵͑Δ ▸ React ComponentͷػೳͰBackbone ViewͰ΍͍ͬͯΔ͜ͱΛҠ২͠·͢ɻ ▸ มߋྔ΋݁ߏ͋ΓɺES2015+Λಋೖ͠JSͷॻ͖ํ͕݁ߏมΘΓ·͕͢ɺ
 Backboneʹ͸ͳ͍ViewͷՄಡੑɾอकੑ޲্ͷͨΊͷ༷ʑͳϝϦοτΛڗ डͰ͖·͢ɻ ▸ ࢀߟURL ▸ https://facebook.github.io/react/docs/components-and-props.html ▸ https://facebook.github.io/react/docs/handling-events.html
35. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ Α͋͘ΔBackbone View var View = Backbone.View.extend({ tagName: 'li', // ユーザ入力イベントとハンドラの紐付け events: { 'click .toggle': 'toggleCompleted' }, // モデル変更イベントとハンドラの紐付け initialize: function () { this.listenTo(this.model, 'change', this.render); }, render: function () { this.$el.html(this.template(this.model.toJSON())); }, toggleCompleted: function () { this.model.toggle(); } });
36. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ React ComponentԽ // 依存ライブラリの参照はHTMLではなくjsに書く import Item, {Component} from 'react'; // classが使える class Todo extends Component { // 描画後イベント componentDidMount() { // モデル変更イベントとハンドラの紐付け this.props.model.on('change', this.handleChangeModel); } handleChangeModel() { // 描画実行 this.forceUpdate(); } handleClickToggle() { this.props.model.toggle(); } 〜つづく〜
37. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ React ComponentԽ 〜つづき〜 render() { const title = this.props.model.get('title'); const completed = this.props.model.get('completed'); // ユーザ入力イベントとハンドラの紐付け return ( <li> <div className="view"> <input className="toggle" type="checkbox" checked={completed} onClick={this.handleClickToggle} /> <label>{title}</label> </div> </li> ); } }
38. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ React ComponentԽ ▸ Backbone͸ɺϚʔΫΞοϓͱJSΛ෼཭͠·͕͢ɺReact͸ɺ݁߹͠·͢ɻ
 HTMLίʔσΟϯά͔͠Ͱ͖ͳ͍ਓͱɺϓϩάϥϚͷ෼ۀͰ΍͍ͬͯΔνʔϜͩͱෆ޲͖ʁ ▸ খ͘͞࡞ΒΕͨίϯϙʔωϯτ͸ɺ
 ΠϕϯτͷྲྀΕ͕ಡΈ΍͘͢ɺίʔυ͕෼ࢄ͍ͯ͠ͳ͍ͷͰɺ
 ࠶ར༻࣌ʹؾʹ͔͚Δ෦෼΋ݮΓ·͢ɻ ▸ ·ͨ಺෦Ͱఆٛ͞Εͨϝιου΍CSSΫϥε͸Ӆṭ͞Εɺ
 ֎͔Βࢀর͢Δ͜ͱ͕Ͱ͖ͳ͍ͷͰɺ໊લͷڝ߹ͰࠔΔ͜ͱ͕ͳ͘ͳΔ౳ɺ ϝϦοτ͕͋Γ·͢ɻ
39. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ React ComponentԽ ▸ htmlʹࢀরΛ௥ه͢Δࡍ͸ɺ
 webpackʹΑͬͯɺimportઌͷϑΝΠϧΛશͯΤϯτϦʔϑΝ Πϧʹ݁߹͞Ε͍ͯΔͷͰɺಡΈࠐΉͷ͸1ͭͰΑ͘ͳΓ·͢ <script src="dist/views/app-view.js"></script>
40. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ Part.3 ·ͱΊ ▸ Backbone ViewͰ͸΍Γʹ͍͘ίϯϙʔωϯτࢦ޲Λ༰қ ʹͰ͖·ͨ͠ ▸ UIͷΈίϯϙʔωϯτͷೖΕࢠ͚ͩͰͳ͘ɺ
 ςϯϓϨʔτ͚ͩͷReactԽͷ՝୊ͱͳΔɺػೳͷ͋Δίϯ ϙʔωϯτͷڞ༗΋ɺ
 Backbone View͝ͱReact Componentʹஔ͖׵͑Δ͜ͱͰ ࣮ݱͰ͖·ͨ͠
41. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ ReactԽ Part.4 : ComponentΛ໾ׂͰ෼ׂ͠ɺ࠶ར༻ੑΛߴΊΔ ▸ Part3Ͱ͸ɺϩδοΫͷ͋ΔComponent಺෦Ͱ͸ঢ়ଶૢ࡞Λߦ͍ͬͯΔ ͨΊɺ
 ಺෦༻ͷঢ়ଶϓϩύςΟstateΛ࢖༻͍ͯ͠·͢ɻ ▸ ͔͠͠ͳ͕ΒɺComponent͸εςʔτϨεʹ࡞ΒΕ͍ͯΔํ͕ɺ
 Մಡੑɾ࠶ར༻ੑɾςελϏϦςΟ͕޲্͠·͢
42. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ Componentͷ໾ׂ ▸ ReactΛ࢖༻͢ΔFWͷFlux Utils΍ReduxͰ͸ɺ
 ComponentΛ2ͭ໾ׂͰ෼ׂ͢Δ͜ͱΛਪ঑͍ͯ͠·͢ɻ ▸ 1ͭ͸ɺ౉͞ΕΔpropsʹԠͯ͡UIΛඳը͢ΔεςʔτϨείϯϙʔωϯτ 
 ΋͏1ͭ͸ɺσʔλͱViewΛૢ࡞͢Δίϯϙʔωϯτ 
 લऀ͸Views·ͨ͸Presentational Componentsɺ 
 ޙऀ͸Containers·ͨ͸Container Componentsͱݺ͹Ε·͢ ▸ ࢀߟURL ▸ https://facebook.github.io/flux/docs/flux-utils.html#best-practices ▸ http://redux.js.org/docs/basics/UsageWithReact.html#presentational-and- container-components
43. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ Part3ͷComponentΛViewͱContainerʹ෼ׂ͢Δ ▸ View ▸ propsΛඳը͢Δ͚ͩ ͳͷͰFunctional Componentʹ͠·͢ ▸ https:// facebook.github.io/ react/docs/ components-and- props.html#functional- and-class-components const Item = (props) => { // 状態は外から渡される const {title, checkedToggle} = props; const handleClickToggle = () => { // 外から渡されたハンドラにそのまま返す props.onClickToggle(); } return ( <li> <div className="view"> <input className="toggle" type="checkbox" checked={checkedToggle} onClick={handleClickToggle} /> <label>{title}</label> </div> </li> ); }
44. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ Part3ͷComponentΛViewͱContainerʹ෼ׂ͢Δ ▸ Container class ItemContainer extends Component { componentDidMount() { this.props.model.on('change', this.handleChangeModel); } handleChangeModel() { this.forceUpdate(); } handleClickToggle() { this.state.model.toggle(); } render() { const title = this.props.model.get('title'); const completed = this.props.model.get('completed'); // Itemの状態はこちらで管理する return ( <Item title={title} checkedToggle={completed} onClickToggle={handleClickToggle} /> ); } }
45. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ Part.4 ·ͱΊ ▸ σʔλͷ΍ΓͱΓͱɺUIͷදݱ͕ผΕͨ͜ͱͰɺ
 ͞ΒʹUIͷ࠶ར༻ੑ͕޲্ͨ͠ͱࢥ͍·͢ɻ ▸ ྫ͑͹ɺDate PickerͷΑ͏ͳϢʔβೖྗUI͸ɺ
 ೖྗʹΑͬͯͲ͏ॲཧ͢Δ͔ɺ࢖͏৔ॴͰܾΊ͍ͨ΋ͷͳͷ Ͱɺ͜ͷϓϥΫςΟε͕༗ޮʹಇ͖·͢ɻ
46. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ ReactԽ Part.5 : σʔλϑϩʔʹFluxΛऔΓೖΕΔ ▸ Flux͸Facebook͕ఏএ͢Δ୯ํ޲σʔλϑϩʔΞʔΩςΫνϟ ▸ Model-ViewͰ͸Model͕σʔλͱσʔλʹର͢ΔཁٻΛ͍࣋ͬͯ·͕͢ɺ
 FluxͰ͸ɺσʔλ(Store)ͱσʔλʹର͢Δཁٻ(Action)Λ෼཭͠·͢ ▸ React͸ɺ͜ͷ࿮૊ΈͷதͰViewʹ࢖ΘΕΔ͜ͱΛਪ঑͍ͯ͠·͢
47. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ BackboneʹFluxͷ֓೦ΛऔΓೖΕΔʹ͸ ▸ ࿮ͷൣғΛ୲͍ͬͯΔCollection΍ModelΛ෼ׂ
48. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ Part.5 ·ͱΊ ▸ ݱঢ়View΍ModelʹϩδοΫ͕ࢄΒ͔͍ͬͯΔ͕ɺ
 ActionΛऔΓೖΕͨ͜ͱͰɺߋ৽ͱऔಘΛ෼཭͢Δ͜ͱ͕Ͱ͖ɺ
 ϩδοΫͷ੔ཧͱංେԽΛ཈͑ΒΕͦ͏Ͱͨ͠ ▸ ͔͠͠ɺDispatcherͱ͔ɺViewͱModelΛDispatcherͰඥ෇͚Δ ෦෼ͱ͔ɺಠ࣮ࣗ૷͢Δͱ͜Ζ͕৭ʑ͋ͬͯɺ݁ہBackbone Ϣʔβʹͱͬͯ΋ֶशίετ͕͔͔ͬͯ͠·͏ײ͡Ͱ͢ ▸ Ͱ΋ɺFLUX΍ɺCQRS + Event Sourcingύλʔϯͱ͍ͬͨҰํ޲ ͷσʔλϑϩʔ͸τϨϯυͳͷͰੋඇ͓͓͖͍͑ͯͨ͞Ͱ͢Ͷɻ
49. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ ࣮͸͜ͷࠒʹ͸ ▸ ͳΜ͔ٕज़తෛ࠴ଟա͗ͯɺReactʹஔ͖׵͑ʹ͍͘৔ॴ͕ ͋Γ͗͢Δͱ͍͏ݱ࣮ʹ௚໘͍ͯ͠·ͨ͠ɻ ▸ ݁ہϓϩδΣΫτ͸ෛ࠴ฦࡁͱ৽ن։ൃʹ෼཭͠·ͨ͠ɻ
50. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ ReactԽ Part.6 : Backbone΍ΊΔ ▸ ৽ن։ൃϓϩδΣΫτ͕࢝·ΓɺτϨϯυͷReduxͱɺ Facebook͕ϝϯςφϯε͢ΔFlux UtilsͰൺֱ͢Δ͜ͱʹͳΓ ·ͨ͠ɻ ▸ ͜ͷ2ͭͷେ͖ͳҧ͍͸ɺReduxʹ͸1ͭͷΦϒδΣΫτʹΞϓ ϦέʔγϣϯશମͷεςʔτΛ·ͱΊΔݪଇ͕͋Δɺͱ͍͏ͱ ͜ΖͰ͢ɻ ▸ ElmͷӨڹΛड͚ͨRedux͸ɺؔ਺ܕϓϩάϥϛϯάͷ׆༻ʹ Αͬͯอकੑͷߴ͍ίʔυΛॻ͚ΔͷͰ͍͍ͱࢥ͍·ͨ͠ɻ
51. طଘϓϩμΫτͷViewΛReactʹஔ͖׵͑Δ Part.6 ·ͱΊ ▸ ͔ͳΓࡉ͔͍ίʔσΟϯάνΣοΫઃఆͰ͋Δeslint-config- airbnbΛซ༻͢Δͱ͍͍ͱࢥ͍·͢ɻ ▸ Facebook੡JS੩తܕνΣοΧʔͷFlow΋ซͤͯಋೖ͠ɺ
 JSʹڧ͍ܕ෇͚ͱnullඇڐ༰Λ͚ͭΔͱΑΓ҆৺Ͱ͠ΐ͏ɻ
52. THAT'S IT. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠