Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

spring_raining

September 13, 2015
Tweet

More Decks by spring_raining

Other Decks in Programming

Transcript

  1. 2015-9-13 KC3 2015 ษڧձ

    OUCC୲౰

    ͸Δ͞Ί (@spring_raining)
    React.jsͰΫϥΠΞϯταΠυͳ
    WebΞϓϦೖ໳

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

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

    View full-size slide

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

    View full-size slide

  7. 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 full-size slide

  8. 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 full-size slide

  9. 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 full-size slide

  10. 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 full-size slide

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

    View full-size slide

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

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

    View full-size slide

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



    ͙ʔ͙Δ








    λΠτϧ



    ͜͜ʹ಺༰



    16

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. ۩ମతʹ͸͜͏͍͏ײ͡ͷ
    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 full-size slide

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

    View full-size slide

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

    View full-size slide

  19. /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 full-size slide

  20. /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 full-size slide

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

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

    View full-size slide

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

    View full-size slide

  23. /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 full-size slide

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

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

    View full-size slide

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

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

    ஔ͍͍ͯ·͢
    29

    View full-size slide

  26. Component
    Component
    Component
    Component

    View full-size slide

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

    View full-size slide

  28. 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 full-size slide

  29. 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 full-size slide

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

    render: function() {

    return 


    {this.props.text}

    ;

    }

    });
    34

    View full-size slide

  31. Todo
    Task
    λεΫ࡞੒
    onSubmitText

    View full-size slide

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

    View full-size slide

  33. 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 full-size slide

  34. 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 full-size slide

  35. 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 full-size slide

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

    View full-size slide

  37. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

  41. /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 full-size slide

  42. ʮ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 full-size slide

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

    View full-size slide

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

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

    View full-size slide

  45. Enjoy Reactive Coding!
    51

    View full-size slide