React.js でクライアントサイドなWebアプリ入門

React.js でクライアントサイドなWebアプリ入門

2015 KC3 (Kansai Computer Club Conference) で発表したスライドです。
author: @spring_raining

42ba906dc35ef460ffcb1b7c3307ef45?s=128

spring_raining

September 13, 2015
Tweet

Transcript

  1. 2015-9-13 KC3 2015 ษڧձ OUCC୲౰ ͸Δ͞Ί (@spring_raining) React.jsͰΫϥΠΞϯταΠυͳ WebΞϓϦೖ໳

  2. ͜Μʹͪ͸ 3

  3. Θͨ͠͸ͩΕ • ͸Δ͞Ί @spring_raining • େࡕେֶ 3೥ੜ(2ճ໨) • εϖʔε͕༨ͬͨͷͰҎԼ͓͢͢ΊͷΞχϝͰ͢ 4

  4. https://github.com/facebook/react/wiki/Sites-Using-React

  5. None
  6. 1. Կ͸ͱ΋͋ΕJavaScriptೖ໳ 7

  7. JavaScript • ϓϩάϥϛϯάݴޠ • (جຊ)ϒϥ΢β্Ͱಈ͘ • ॳΊͯͳΒ͓͜͜͢͢ΊͰ͢ˣ
 http://dotinstall.com/lessons/basic_javascript_v2 • ଞͷݴޠͳΒ෼͔ΔΑͱ͍͏ํˣ


    https://developer.mozilla.org/ja/docs/Web/JavaScript/A_re-introduction_to_JavaScript • ͱ͍͏͔࣮͸օ͞Μ΋͏෼͔ͬͯΔʁ 8
  8. ͸͡ΊΑ͏ • ೚ҙͷϒϥ΢βΛ։͍ͯɺCtrl+Shift+I (⌘+Option+I) • ։͍ͨΒʮConsoleʯΛબ୒ • Node.jsΠϯετʔϧͯ͠Δਓ͸nodeίϚϯυͰ΋ 9

  9. JavaScript จ๏ͱ͔ // ͜͜͸ίϝϯτͰ͢
 /* ͜Ε΋ίϝϯτͰ͢ */
 
 var x

    = 123;
 var y = "JavaScript";
 console.log(x + y);
 
 console.log(123 + 456);
 
 var array = ["aaa", 'bbb', 123];
 console.log(array[0]);
 
 var object = {
 alfa: "apple",
 bravo: 123456,
 charlie: ["yuno", "miyako"]
 };
 
 console.log(object.charlie[1]); 10
  10. JavaScript ؔ਺ function multi(x, y) {
 var answer = x

    * y;
 return answer;
 }
 console.log(multi(2, 3));
 console.log(answer); // Τϥʔ
 
 var gj = function() { return 2013; };
 
 var kobo = {
 MDS: 2014,
 GJ: gj,
 YRYR: function(season) {
 if (season === 1) { return 2011; }
 if (season === 2) { return 2012; }
 if (season === 3) { return 2015; }
 }
 };
 
 console.log(kobo.YRYR(3)); 11
  11. JavaScript ৚݅ࣜ/ϧʔϓ var x = "Umaru";
 var y = 2;


    
 if (1 + 1 <= y) {
 x = "Ebina";
 } else if (y !== "2") {
 x = "Kirie";
 } else {
 x = "Sylphynford";
 }
 
 var abbr = ["U", "M", "R"];
 for (var i = 0; i < abbr.length; i++) {
 console.log(abbr[i]);
 }
 var n = 0;
 while (n < 3) {
 console.log(abbr[n]);
 n += 1;
 } 12
  12. forΑΓ΋͓͢͢ΊͰ͢ [4, 6, 2, 5]
 .filter(function(e) {
 return e >

    3;
 }, this) // [4, 6, 5] 
 .map(function(e) {
 return e * 10;
 }, this) // [40, 60, 50] 
 .forEach(function(e, i) {
 var print = i + ":" + e;
 console.log(print);
 }, this); 13
  13. 2. Կ͸ͱ΋͋ΕHTMLೖ໳ 14

  14. HTML (Hyper Text Markup Language) • ϓϩάϥϛϯάΒͳ͍ݴޠ • ੈͷ΢ΣϒαΠτ͸͜ΕͰग़དྷ͍ͯΔ •

    CSS͸ࠓ೔͸΍Γ·ͤΜ_ _ • ॳΊͯͳΒ͜͜ͱ͔Ͳ͏Ͱ͠ΐ͏ˣ
 http://www.tohoho-web.com/wwwbeg.htm • ͱ͍͏͔࣮͸օ͞Μ΋͏෼͔ͬͯΔʁ 15
  15. HTMLͷจ๏ <λά ଐੑ=஋>಺༰</λά>
 
 <div>
 <a href="http://google.com">͙ʔ͙Δ</a>
 </div>
 
 


    <!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="UTF-8">
 <title>λΠτϧ</title>
 </head>
 <body>
 ͜͜ʹ಺༰
 </body>
 </html> 16
  16. 3. React͍ͬͯΈΑ͏ 17

  17. Reactͱ͸ • Facebook͕։ൃ͍ͯ͠ΔɺHTML(DOM)ͷ؅ཧΛߦ͏ JavaScriptϥΠϒϥϦ • ʢMVCͰ͍͏ͱ͜ΖͷVʣ • ۩ମతʹ͸ɺComponentͱ͍͏ݟͨ໨Λ؅ཧ͢ΔΦ ϒδΣΫτΛෳ਺࡞ͬͯ૊Έ߹Θ͍ͤͯ͘ •

    JavaScriptʹHTMLΛ͚ͬͭͨ͘Έ͍ͨͳJSXͱ͍͏จ ๏͕࢖͑Δ 18
  18. JSX? 19

  19. ۩ମతʹ͸͜͏͍͏ײ͡ͷ render: function() {
 return (
 <div className="commentBox">
 Hello, world!

    I am a CommentBox.
 </div>
 );
 } 
 render: function () {
 return (
 React.createElement('div', {className: "commentBox"},
 "Hello, world! I am a CommentBox."
 )
 );
 } 20 JSX JS
  20. ͱΓ͋͑ͣίʔυΛݟͯΈΑ͏ 21

  21. αϯϓϧίʔυΛ༻ҙ͠·ͨ͠ 22

  22. /KC3/01hello/index.htmlΛ։͍ͯΈΑ͏ <!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="UTF-8">
 <title>React.js example</title>


    <link rel="stylesheet" href="../shared/css/base.css" />
 <script src="../../build/react.js"></script>
 <script src="../../build/JSXTransformer.js"></script>
 </head>
 <body>
 <h1>React.js example</h1>
 <div id="container">
 ͜Ε͕ݟ͍͑ͯΔ৔߹ɺ͋ͳͨͷίʔυ͸ਖ਼͘͠ಈ͍͍ͯ·ͤΜ:(
 </div>
 <script type="text/jsx">
 var Hello = React.createClass({
 render: function() {
 return <p>Hello, {this.props.message}!</p>;
 }
 });
 React.render(
 <Hello message="React" />,
 document.getElementById("container")
 );
 </script>
 </body>
 </html> 23
  23. /KC3/01hello/index.htmlΛ։͍ͯΈΑ͏ <div id="container">
 ͜Ε͕ݟ͍͑ͯΔ৔߹ɺ͋ͳͨͷίʔυ͸ਖ਼͘͠ಈ͍͍ͯ·ͤΜ:(
 </div>
 <script type="text/jsx">
 var Hello =

    React.createClass({
 render: function() {
 return <p>Hello, {this.props.message}!</p>;
 }
 });
 React.render(
 <Hello message="React" />,
 document.getElementById("container")
 );
 </script> 24
  24. props • Componentʹ஋Λ౉͢ํ๏ͷ1ͭ • Component಺Ͱpropsͷ஋͸ಡΈࠐΊΔ͚Ͳɺ
 ॻ͖׵͑Δ͜ͱ͸Ͱ͖ͳ͍ 25 ComponentͷϞδϡʔϧԽ

  25. ͍·͍ͪศར͕͞఻ΘΒͳ͍… 26

  26. /KC3/02text/index.html var Text = React.createClass({
 getInitialState: function() {
 return {

    text: "" };
 },
 onChangeText: function(e) {
 this.setState({ text: e.target.value });
 },
 render: function() {
 return <div>
 <input type="text" value={this.state.text}
 onChange={this.onChangeText} />
 <p>{this.state.text}</p>
 </div>;
 }
 });
 React.render(
 <Text />,
 document.getElementById("container")
 ); 27
  27. state • Component͕࣋ͭॻ͖׵͑Մೳͳ஋ • state͕ॻ͖׵ΘΔͱɺstateΛར༻͍ͯ͠ΔDOM΋
 ࣗಈతʹॻ͖׵ΘΔ 28 “React”ive!!

  28. ૣ଎Ͱ͕͢ • ToDoΞϓϦΛ࡞ͬͯΈ·͠ΐ͏ • ΍Δ͜ͱ(ToDo)Λ௥Ճ͍͖ͯ͠
 ऴΘͬͨ΋ͷ͸νΣοΫ • ࡞ྫΛ /KC3/03todo ʹ


    ஔ͍͍ͯ·͢ 29
  29. Component Component Component Component

  30. ToDoΞϓϦͷํ਑ • ToDoΞϓϦຊମʹͳΔTodo Componentͱɺ΍Δ͜ͱ ͷ1߲໨Λද͢Task ComponentΛ࡞͍ͬͯ͘ɻ • Todo Component͸͖ͬ͞࡞ͬͨText ComponentΛ΋ͱ

    ʹ࡞੒͠·͢ɻ 31
  31. Todo Component var Todo = React.createClass({
 getInitialState: function() {
 return

    {text: “", tasks: []};
 },
 - - - - - - -
 render: function() {
 var tasks = []
 this.state.tasks.map(function(e, i) {
 tasks.push(
 <Task key={i} id={i} text={e.text}
 complete={e.complete} />);
 }, this);
 return <div>
 <form onSubmit={this.onSubmitText}>
 <input type="text" value={this.state.text}
 onChange={this.onChangeText} />
 <button type="submit">௥Ճ</button>
 </form>
 <h3>ToDo</h3>
 <ul>{tasks}</ul>
 </div>; } 32
  32. Todo Component onSubmitText: function(e) {
 e.preventDefault();
 if (this.state.text !== "")

    {
 var newTasks = this.state.tasks.concat({
 text: this.state.text,
 complete: false
 });
 this.setState({
 text: "",
 tasks: newTasks
 });
 }
 }, 33
  33. Task Component var Task = React.createClass({
 render: function() {
 return

    <li>
 <input type="checkbox" checked={this.props.complete} />
 {this.props.text}
 </li>;
 }
 }); 34
  34. None
  35. Todo Task λεΫ࡞੒ onSubmitText

  36. Todo Task λεΫ࡞੒ onSubmitText νΣοΫϘοΫε ΫϦοΫ

  37. Task Component var Task = React.createClass({
 onChangeCheckbox: function() {
 this.props.onChange(this.props.id);


    },
 render: function() {
 return <li>
 <input type="checkbox" onChange={this.onChangeCheckbox} checked={this.props.complete} />
 {this.props.text}
 </li>;
 }
 }); 38
  38. Todo Component onChange: function(key) {
 var target = this.state.tasks[key];
 var

    newTasks = this.state.tasks.filter(function(e, i) {
 return i !== key;
 }).concat({
 text: target.text,
 complete: !target.complete
 });
 this.setState({tasks: newTasks});
 }, - - - - - - tasks.push(
 <Task key={i} id={i} text={e.text}
 complete={e.complete} onChange={this.onChange}/>); 39
  39. Todo Component render: function() {
 var tasks = [];
 var

    done = [];
 this.state.tasks.map(function(e, i) {
 if (e.complete) {
 done.push(
 <Task key={i} id={i} text={e.text}
 complete={true} onChange={this.onChange}/>);
 } else {
 tasks.push(
 <Task key={i} id={i} text={e.text}
 complete={false} onChange={this.onChange}/>);
 }
 }, this);
 return <div>
 :
 <h3>ToDo</h3>
 <ul>{tasks}</ul>
 <h3>Complete</h3>
 <ul>{done}</ul>
 </div>; 40
  40. None
  41. 4. JSλεΫϥϯφʔͷ͍Δ೔ৗ 42

  42. index.html͚ͩͩͱ… • ·͋͜͏ͳΔͱࢥ͍·͢ 43 function Rule(pos) {
 this.pos = pos;


    }
 return Rule;
 })();
 
 var Stylesheet = (function(parent) {
 function Stylesheet(pos, styles) {
 parent.call(this, pos);
 this.styles = styles;
 }
 Stylesheet.prototype.toString = function() {
 return "StyleSheet\n"
 + this.styles.map(function(e) {
 return prettify(e);
 }).join("\n");
 };
 return Stylesheet;
 })(Rule);
 
 var RuleList = (function(parent) {
 function RuleList(pos, rules) {
 parent.call(this, pos);
 this.rules = rules;
 }
 RuleList.prototype.toString = function() {
 return "RuleList\n"
 + this.rules.map(function(e) {
 return prettify(e);
 }).join("\n");
 };
 return RuleList;
 })(Rule);
 
 var AtRule = (function(parent) {
 function AtRule(pos, atKeywordToken, componentValues, tail) parent.call(this, pos);
 this.atKeywordToken = atKeywordToken;
 this.componentValues = componentValues;
 this.tail = tail;
 }
 AtRule.prototype.toString = function() {
 return "AtRule\n"
 + prettify(this.atKeywordToken) + "\n"
 + this.componentValues.map(function(e) {
 return prettify(e);
 }).join("\n") + "\n"
 + prettify(this.tail);
 };
 return AtRule;
 })(Rule);
 
 var QualifiedRule = (function(parent) {
 function QualifiedRule(pos, componentValues, braceBlock) {
 parent.call(this, pos);
 this.componentValues = componentValues;
 this.braceBlock = braceBlock;
 }
 QualifiedRule.prototype.toString = function() {
 return "QualifiedRule\n"
 + this.componentValues.map(function(e) {
 return prettify(e);
 }).join("\n") + "\n"
 + prettify(this.braceBlock);
 };
 return QualifiedRule;
 })(Rule);
 
 var DeclarationList = (function(parent) {
 function DeclarationList(pos, declarations) {
 parent.call(this, pos);
 this.declarations = declarations;
 }
 DeclarationList.prototype.toString = function() {
 return "DeclarationList\n"
 + this.declarations.map(function(e) {
 return prettify(e);
 }).join("\n");
 };
 return DeclarationList;

  43. ϑΝΠϧΛ෼ׂ͠Α͏ 44

  44. Ͳ͏΍ͬͯʁ • JSϑΝΠϧΛෳ਺࡞ͬͯ<script/>ͰಡΈࠐΉ • <script/><script/><script/> … • ผϑΝΠϧͷม਺Λ૬ޓʹࢀর͍ͨ͠ͱ͖ʹ͸ʁ • ͕Μ͹Δ

    • Reactiveͱ͸… 45
  45. Browserify࢖͓͏ • require()͕࢖͑ΔΑ͏ʹͳΓ·͢ • Node.jsΛΠϯετʔϧͯ͠
 $ npm install -g browserify

    • (͜ͷ͋ͨΓͷ෼໺͸܈༤ׂڌͳͷͰɺ֤छϥΠϒϥϦ ͷࢥ૝ɺকདྷੑʹ͍ͭͯΑ͘ௐ΂ͯɺ͓޷͖ͳ΋ͷΛ ࢖͍·͠ΐ͏) • ݕࡧΩʔϫʔυ: RequireJS, webpack, ES6, Babel.js 46
  46. /KC3/04comp/ /KC3/04comp/task.jsx var React = require("react");
 var Task = React.createClass({

    : module.exports = Task; /KC3/04comp/task.jsx var Task = require("./task.jsx");
 var Todo = React.createClass({
 :
 React.render(
 <Todo />,
 document.getElementById("container")
 ); 47
  47. ʮBrowserifyʯ࢖ͬͯΈͨɻ • $ npm init
 ద౰ʹEnterԡͯ͠Δͱɺʮpackage.jsonʯͱ͍͏ϑΝΠϧ͕ ࡞੒͞Ε·͢ • $ npm

    install react browserify reactify
 ʮreactʯʮbrowserifyʯʮreactifyʯΛΠϯετʔϧ • $ browserify -t reactify
 todo.jsx > bundle.js • bundle.js͕࡞ΒΕΔʂ 48
  48. ͞ΒͳΔߴΈ΁ • GulpΛ࢖͍·͠ΐ͏ • JSλεΫϥϯφʔͷҰछ • $ npm install -g

    gulp • (͜ͷลΓͷ෼໺͸܈༤ׂڌͳͷͰ(ry 49
  49. GulpͷྲྀΕ • gulpfile.jsͷgulp.task()ͰλεΫΛఆٛ • $ gulp [command]ͰλεΫ࣮ߦʂ • αϯϓϧίʔυͰ͸defaultλεΫͱwatchλεΫΛ
 ༻ҙ͍ͯ͠·͢

    • browserifyͨ͠Γɺminifyͨ͠Γɺwatchͤͨ͞Γ 50
  50. Enjoy Reactive Coding! 51