Reactがなぜ素晴らしいのか

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

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. 
    3݅
    
    

    Foo
    
    
    Bar
    
    
    Buzz
    
    
    
    ݱࡏͷDOM ࣮ࡍͷߋ৽
    VirtualDOM BrowserDOM
    ৽͍͠DOM
    
    4݅
    
    

    Foo
    
    
    Bar
    
    
    Buzz
    
    
    One
    
    
    
    (ͨͩͷJS Object)
    
    4݅
    
    

    Foo
    
    
    Bar
    
    
    Buzz
    
    
    One
    
    
    
    

    View Slide

19. 
    3݅
    
    

    Foo
    
    
    Bar
    
    
    Buzz
    
    
    
    ݱࡏͷDOM ࣮ࡍͷߋ৽
    VirtualDOM BrowserDOM
    ৽͍͠DOM
    
    4݅
    
    

    Foo
    
    
    Bar
    
    
    Buzz
    
    
    One
    
    
    
    (ͨͩͷJS Object)
    
    4݅
    
    

    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