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

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

Transcript

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

   View Slide

2. ͜Μʹͪ͸
   3
   

   View Slide

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

   View Slide

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

   View Slide

5. View Slide

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

   View Slide

7. JavaScript
   • ϓϩάϥϛϯάݴޠ
   • (جຊ)ϒϥ΢β্Ͱಈ͘
   • ॳΊͯͳΒ͓͜͜͢͢ΊͰ͢ˣ

   http://dotinstall.com/lessons/basic_javascript_v2
   • ଞͷݴޠͳΒ෼͔ΔΑͱ͍͏ํˣ

   https://developer.mozilla.org/ja/docs/Web/JavaScript/A_re-introduction_to_JavaScript
   • ͱ͍͏͔࣮͸օ͞Μ΋͏෼͔ͬͯΔʁ
   8
   

   View Slide

8. ͸͡ΊΑ͏
   • ೚ҙͷϒϥ΢βΛ։͍ͯɺCtrl+Shift+I (⌘+Option+I)
   • ։͍ͨΒʮConsoleʯΛબ୒
   • Node.jsΠϯετʔϧͯ͠Δਓ͸nodeίϚϯυͰ΋
   9
   

   View Slide

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
   

   View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

13. 2. Կ͸ͱ΋͋ΕHTMLೖ໳
    14
    

    View Slide

14. HTML (Hyper Text Markup Language)
    • ϓϩάϥϛϯάΒͳ͍ݴޠ
    • ੈͷ΢ΣϒαΠτ͸͜ΕͰग़དྷ͍ͯΔ
    • CSS͸ࠓ೔͸΍Γ·ͤΜ_ _
    • ॳΊͯͳΒ͜͜ͱ͔Ͳ͏Ͱ͠ΐ͏ˣ

    http://www.tohoho-web.com/wwwbeg.htm
    • ͱ͍͏͔࣮͸օ͞Μ΋͏෼͔ͬͯΔʁ
    15
    

    View Slide

15. HTMLͷจ๏
    <λά ଐੑ=஋>಺༰λά>

    

    

    ͙ʔ͙Δ

    

    

    

    

    

    

    

    λΠτϧ

    

    

    ͜͜ʹ಺༰

    

    
    16
    

    View Slide

16. 3. React͍ͬͯΈΑ͏
    17
    

    View Slide

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

    View Slide

18. JSX?
    19
    

    View Slide

19. ۩ମతʹ͸͜͏͍͏ײ͡ͷ
    render: function() {

    return (

    

    Hello, world! I am a CommentBox.

    

    );

    }
    

    render: function () {

    return (

    React.createElement('div', {className: "commentBox"},

    "Hello, world! I am a CommentBox."

    )

    );

    }
    20
    JSX
    JS
    

    View Slide

20. ͱΓ͋͑ͣίʔυΛݟͯΈΑ͏
    21
    

    View Slide

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

    View Slide

22. /KC3/01hello/index.htmlΛ։͍ͯΈΑ͏
    

    

    

    

    React.js example

    

    

    

    

    

    React.js example

    

    ͜Ε͕ݟ͍͑ͯΔ৔߹ɺ͋ͳͨͷίʔυ͸ਖ਼͘͠ಈ͍͍ͯ·ͤΜ:(

    

    
<br/>var Hello = React.createClass({
<br/>render: function() {
<br/>return <p>Hello, {this.props.message}!</p>;
<br/>}
<br/>});
<br/>React.render(
<br/><Hello message="React" />,
<br/>document.getElementById("container")
<br/>);
<br/>

    

    
    23
    

    View Slide

23. /KC3/01hello/index.htmlΛ։͍ͯΈΑ͏
    

    ͜Ε͕ݟ͍͑ͯΔ৔߹ɺ͋ͳͨͷίʔυ͸ਖ਼͘͠ಈ͍͍ͯ·ͤΜ:(

    

    
<br/>var Hello = React.createClass({
<br/>render: function() {
<br/>return <p>Hello, {this.props.message}!</p>;
<br/>}
<br/>});
<br/>React.render(
<br/><Hello message="React" />,
<br/>document.getElementById("container")
<br/>);
<br/>
    24
    

    View Slide

24. props
    • Componentʹ஋Λ౉͢ํ๏ͷ1ͭ
    • Component಺Ͱpropsͷ஋͸ಡΈࠐΊΔ͚Ͳɺ

    ॻ͖׵͑Δ͜ͱ͸Ͱ͖ͳ͍
    25
    ComponentͷϞδϡʔϧԽ
    

    View Slide

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

    View Slide

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 

    onChange={this.onChangeText} />

    {this.state.text}

    ;

    }

    });

    React.render(

    ,

    document.getElementById("container")

    );
    27
    

    View Slide

27. state
    • Component͕࣋ͭॻ͖׵͑Մೳͳ஋
    • state͕ॻ͖׵ΘΔͱɺstateΛར༻͍ͯ͠ΔDOM΋

    ࣗಈతʹॻ͖׵ΘΔ
    28
    “React”ive!!
    

    View Slide

28. ૣ଎Ͱ͕͢
    • ToDoΞϓϦΛ࡞ͬͯΈ·͠ΐ͏
    • ΍Δ͜ͱ(ToDo)Λ௥Ճ͍͖ͯ͠

    ऴΘͬͨ΋ͷ͸νΣοΫ
    • ࡞ྫΛ /KC3/03todo ʹ

    ஔ͍͍ͯ·͢
    29
    

    View Slide

29. Component
    Component
    Component
    Component
    

    View Slide

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

    View Slide

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(

    complete={e.complete} />);

    }, this);

    return 

    

    onChange={this.onChangeText} />

    ௥Ճ

    

    ToDo

    {tasks}

    ;
    }
    32
    

    View Slide

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
    

    View Slide

33. Task Component
    var Task = React.createClass({

    render: function() {

    return 

    

    {this.props.text}

    ;

    }

    });
    34
    

    View Slide

34. View Slide

35. Todo
    Task
    λεΫ࡞੒
    onSubmitText
    

    View Slide

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

    View Slide

37. Task Component
    var Task = React.createClass({

    onChangeCheckbox: function() {

    this.props.onChange(this.props.id);

    },

    render: function() {

    return 

    checked={this.props.complete} />

    {this.props.text}

    ;

    }

    });
    38
    

    View Slide

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(

    complete={e.complete} onChange={this.onChange}/>);
    39
    

    View Slide

39. Todo Component
    render: function() {

    var tasks = [];

    var done = [];

    this.state.tasks.map(function(e, i) {

    if (e.complete) {

    done.push(

    complete={true} onChange={this.onChange}/>);

    } else {

    tasks.push(

    complete={false} onChange={this.onChange}/>);

    }

    }, this);

    return 

    :

    ToDo

    {tasks}

    Complete

    {done}

    ;
    40
    

    View Slide

40. View Slide

41. 4. JSλεΫϥϯφʔͷ͍Δ೔ৗ
    42
    

    View Slide

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;

    

    View Slide

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

    View Slide

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

    View Slide

45. Browserify࢖͓͏
    • require()͕࢖͑ΔΑ͏ʹͳΓ·͢
    • Node.jsΛΠϯετʔϧͯ͠

    $ npm install -g browserify
    • (͜ͷ͋ͨΓͷ෼໺͸܈༤ׂڌͳͷͰɺ֤छϥΠϒϥϦ
    ͷࢥ૝ɺকདྷੑʹ͍ͭͯΑ͘ௐ΂ͯɺ͓޷͖ͳ΋ͷΛ
    ࢖͍·͠ΐ͏)
    • ݕࡧΩʔϫʔυ: RequireJS, webpack, ES6, Babel.js
    46
    

    View Slide

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(

    ,

    document.getElementById("container")

    );
    47
    

    View Slide

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
    

    View Slide

48. ͞ΒͳΔߴΈ΁
    • GulpΛ࢖͍·͠ΐ͏
    • JSλεΫϥϯφʔͷҰछ
    • $ npm install -g gulp
    • (͜ͷลΓͷ෼໺͸܈༤ׂڌͳͷͰ(ry
    49
    

    View Slide

49. GulpͷྲྀΕ
    • gulpfile.jsͷgulp.task()ͰλεΫΛఆٛ
    • $ gulp [command]ͰλεΫ࣮ߦʂ
    • αϯϓϧίʔυͰ͸defaultλεΫͱwatchλεΫΛ

    ༻ҙ͍ͯ͠·͢
    • browserifyͨ͠Γɺminifyͨ͠Γɺwatchͤͨ͞Γ
    50
    

    View Slide

50. Enjoy Reactive Coding!
    51
    

    View Slide