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

Reactがなぜ素晴らしいのか

 Reactがなぜ素晴らしいのか

詳しくはこちらへ → https://www.facebook.com/groups/toretatech/

Yuichiro MASUI

March 18, 2015
Tweet

More Decks by Yuichiro MASUI

Other Decks in Programming

Transcript

  1. React.js͕

    ͳͥૉ੖Β͍͠ͷ͔
    Yuichiro MASUI
    Toreta, Inc CTO

    View Slide

  2. DOMૢ࡞͸ͳͥ೉͍͠ͷ͔

    class=“hidden”>foo

    ͜ͷλά͸ݟ͑ͯΔʁ
    ௥Ճ
    Ͳ͜Ͱॲཧ͢Δ͔

    ෼͔Βͳ͍

    foo

    ͍ͭͲ͜Ͱॻ͖׵͑Δͷ͔

    ෼͔Βͳ͍

    View Slide

  3. DOMૢ࡞͸ͳͥ೉͍͠ͷ͔

    class=“hidden”>foo

    ͜ͷλά͸ݟ͑ͯΔʁ
    ௥Ճ
    Ͳ͜Ͱॲཧ͢Δ͔

    ෼͔Βͳ͍

    foo

    ͍ͭͲ͜Ͱॻ͖׵͑Δͷ͔

    ෼͔Βͳ͍
    DOM͸Ͳ͔͜ΒͰ΋มߋՄೳ
    DOM͕ঢ়ଶΛ͍࣋ͬͯΔ
    DOMͱίʔυ͕཭Ε͗͢

    View Slide

  4. ΋ͬͱ؆୯ʹ΍Ζ͏
    DOMΛॻ͖׵͑ͳ͍ͰৗʹHTMLશମΛੜ੒
    EventListenerΛ΍ΊͯonXxxϓϩύςΟΛ࢖͏
    HTMLͱJavascriptΛҰͭʹ·ͱΊΔ

    View Slide

  5. ΫϥΠΞϯτϩδοΫ
    αʔόαΠυੜ੒
    ϒϥ΢β
    ϩδοΫ (ίϯτϩʔϥ)
    ϦΫΤετ
    αʔό
    ΫϥΠΞϯτ
    HTMLੜ੒෦ (render)
    HTMLੜ੒෦ (ςϯϓϨʔτ)
    ը໘Λදࣔ͢ΔͨΊͷঢ়ଶ (setState)
    ը໘Λදࣔ͢ΔͨΊͷঢ়ଶ (ςϯϓϨʔτม਺)

    View Slide

  6. ΫϥΠΞϯτϩδοΫ
    ϒϥ΢β
    αʔό
    ΫϥΠΞϯτ
    Πϕϯτ (onSubmit)
    React.js
    αʔόϩδοΫ
    HTMLੜ੒෦ (render)
    ը໘Λදࣔ͢ΔͨΊͷঢ়ଶ (setState)

    View Slide

  7. Example: Todo list
    http://codepen.io/masuidrive

    View Slide

  8. P.1 - ഑ྻͷΞΠςϜΛදࣔ

    View Slide

  9. /** @jsx React.DOM */
    App = React.createClass({
    getInitialState: function() {
    return {
    items: [
    { text: "Foo" },
    { text: "Bar" },
    { text: "Buzz" }
    ]
    };
    },
    render: function() {
    return

    {this.state.items.map(function(item) {
    return {item.text};
    })}

    ;
    }
    });
    React.render(, document.body);
    P.1 - ഑ྻͷΞΠςϜΛදࣔ

    View Slide

  10. P.2 - ΞΠςϜΛ௥Ճ

    View Slide

  11. /** @jsx React.DOM */
    App = React.createClass({
    getInitialState: function() {
    return {
    newText: "",
    items: [
    { text: "Foo" },
    { text: "Bar" },
    { text: "Buzz" }
    ]
    };
    },
    addItem: function(event) {
    event.preventDefault();
    this.setState({
    items: [{text : this.state.newText}].concat(this.state.items),
    newText: ""
    })
    },
    updateNewText: function(event) {
    this.setState({
    newText : event.target.value
    });
    },
    render: function() {
    return


    ௥Ճ

    ɹ

    {this.state.items.map(function(item) {
    return {item.text};
    })}

    ;
    }
    });
    React.render(, document.body);
    P.2 - ΞΠςϜΛ௥Ճ

    View Slide

  12. addItem: function(event) {
    event.preventDefault();
    this.setState({
    items: [{text : this.state.newText}].concat(this.state.items),
    newText: ""
    })
    },
    updateNewText: function(event) {
    this.setState({
    newText : event.target.value
    });
    },
    render: function() {
    return


    ௥Ճ

    ɹ

    {this.state.items.map(function(item) {
    ← 1จࣈೖྗͷͨͼʹݺ͹ΕΔ
    P.2 - ΞΠςϜΛ௥Ճ

    View Slide

  13. P.3 - ݅਺දࣔ
    ݅਺ →

    View Slide

  14. P.3 - ݅਺දࣔ
    /** @jsx React.DOM */
    App = React.createClass({
    getInitialState: function() {
    return {
    newText: "",
    items: [
    { text: "Foo" },
    { text: "Bar" },
    { text: "Buzz" }
    ]
    };
    },
    addItem: function() {
    event.preventDefault();
    this.setState({
    items: [{text : this.state.newText}].concat(this.state.items),
    newText: ""
    })
    },
    updateNewText: function(ev) {
    this.setState({
    newText : ev.target.value
    });
    },
    render: function() {
    return


    ௥Ճ

    {this.state.items.length}݅

    {this.state.items.map(function(item) {
    return {item.text};
    })}

    ;
    }
    });
    React.render(, document.body);

    View Slide

  15. P.3 - ݅਺දࣔ
    });
    },
    render: function() {
    return


    ௥Ճ

    {this.state.items.length}݅

    {this.state.items.map(function(item) {
    return {item.text};
    })}

    ;
    }
    });
    React.render(, document.body);

    View Slide

  16. HTMLΛৗʹ࠶ߏங͢Δ͜ͱͰ
    ঢ়ଶม਺
    ϩδοΫ
    ม਺Λߋ৽
    Ϗϡʔ
    ม਺͔Βੜ੒

    View Slide

  17. Ͱ΋…
    • HTMLશମॻ͖׵͑Δͱ஗͘ͳ͍ʁ
    • CSSΞχϝʔγϣϯ࢖͑ͳ͍ΑͶʁ
    • ࣮͸೔ຊޠೖྗͰ͖ͳ͍ΑͶ

    View Slide





  18. Foo


    Bar


    Buzz



    ݱࡏͷDOM ࣮ࡍͷߋ৽
    VirtualDOM BrowserDOM
    ৽͍͠DOM




    Foo


    Bar


    Buzz


    One



    (ͨͩͷJS Object)




    Foo


    Bar


    Buzz


    One



    View Slide





  19. Foo


    Bar


    Buzz



    ݱࡏͷDOM ࣮ࡍͷߋ৽
    VirtualDOM BrowserDOM
    ৽͍͠DOM




    Foo


    Bar


    Buzz


    One



    (ͨͩͷJS Object)




    Foo


    Bar


    Buzz


    One



    View Slide

  20. ΋ͬͱٕज़తʹ͸
    • key
    • component
    • property
    • dangerouslySetInnerHTML
    • ৄ͘͠͸άά͍ͬͯͩ͘͞

    View Slide

  21. ͞Βʹ
    • ComponentͰ࠶ར༻Մೳͳ෦඼Խ
    • αʔόαΠυϨϯμϦϯά
    • ΋ͬͱେ͖ͳΞϓϦͰ͸Flux
    • iOS/AndroidΞϓϦ͸ReactNative

    View Slide

  22. ໰୊఺
    • ίʔυΛॻ͘ਓ͕HTML΋ॻ͘
    • طଘͷJS෦඼͕࢖͑ͳ͍(͜ͱ΋ͳ͍)
    • ಛʹTwitter Widgetͱ͔֎෦JS͸ۤख

    View Slide

  23. Flux
    • ߟ͑ํͷ໊લ (MVCͱ͔ͱҰॹ)
    • ReactͰ͸Data͑͞มߋ͢Ε͹ը໘ʹ൓ө͞ΕΔ
    • Ϣʔβ͔ΒͷActionΛݩʹDispatcher͕Storeͷ
    มߋΛݺͼग़͢

    View Slide

  24. Dispatcher
    Action
    Store
    React
    User action

    View Slide

  25. Dispatcher
    Action
    Store
    React
    User action
    render: function() {
    return
    todos
    id="new-todo"
    placeholder="What needs to be done?"
    onSave={this._onSave}
    />
    ;
    },
    _onSave: function(text) {
    if(text.trim()) {
    TodoActions.create(text)
    }
    }
    components/Header.js

    View Slide

  26. Dispatcher
    Action
    Store
    React
    User action
    actions/TodoActions.js
    TodoActions = {
    create: function(text) {
    AppDispatcher.dispatch({
    actionType: TodoConst.TODO_CREATE,
    text: text
    });
    }
    }

    View Slide

  27. Dispatcher
    Action
    Store
    React
    User action
    stores/TodoStore.js
    AppDispatcher.register(function(action) {
    switch(action.actionType) {
    case TodoConst.TODO_CREATE:
    create(action.text);
    TodoStore.emit(“change”);
    }
    });
    function create() {
    var id = Math.random();
    _todos[id] = {
    id: id
    complete: false
    text: text
    };
    }

    View Slide

  28. Dispatcher
    Action
    Store
    React
    User action
    components/TodoApp.js
    var TodoApp = React.createClass({
    getInitialState: function() {
    return({
    todos: TodoStore.getAll()
    });
    },
    componentDidMount: function() {
    TodoStore.addListener(this._onChange);
    },
    _onChange: function() {
    this.setState({todos: TodoStore.getAll()});
    },
    render: function() {
    return ...
    }
    });

    View Slide

  29. ·ͱΊ
    • αʔόαΠυͷ༷ͳγϯϓϧͳྲྀΕͰAjaxΛ
    • ը໘Λॻ͖׵͑Δͱ͖͸ৗʹશ෦ॻ͖׵͑
    • طଘͷJS UIϥΠϒϥϦͱಉډ͸೉͍͠

    View Slide