ReactとFluxのこと

http://inside.pixiv.net/entry/2015/04/27/170944

Transcript

1. React Flux
   

   View Slide

2. HFUB
   SFBDUͱqVYʹ͍ͭͯษڧͯ͠Δ
   

   View Slide

3. HFUB
   ࡶʹ·ͱΊͯΈΔ
   

   View Slide

4. View Slide

5. 3FBDU
   w GBDFCPPL͕࡞ͬͨ+BWB4DSJQUͷϏϡʔ༻ϥΠϒϥϦ
   w ϑϨʔϜϫʔΫͰ͸ͳ͍ʢॏཁʣ
   w ΞʔΩςΫνϟΛ੍໿͢Δ΋ͷͰ͸ͳ͍ɺϏϡʔ༻ͷ
   ίϯϙʔωϯτͱͯ͠୯ಠͰར༻͢Δ͜ͱ͕Ͱ͖Δ
   w .PEFMͱ$PMMFDUJPO͸#BDLCPOFɺ7JFX͚ͩ3FBDUɺ
   ͱ͍͏ετʔϦʔ΋͋ΓಘΔ
   w αʔόͰ΋ΫϥΠΞϯτͰ΋ར༻Մೳ
   

   View Slide

6. #FGPSF3FBDU
   

   View Slide

7. TUPSZ
   {
   items: ['foo']
   }
   
   foo
   
   {
   items: ['foo', 'bar']
   }
   
   foo
   bar
   
   w Ϟσϧͷߏ଄ʹैͬͯ%0.Λग़ྗ͢ΔγʔϯΛߟ͑Δ
   

   View Slide

8. K2VFSZ
   $('#item').append('' + _.last(items) + '');
   {
   items: ['foo']
   }
   
   foo
   
   {
   items: ['foo', 'bar']
   }
   
   foo
   bar
   
   

   View Slide

9. {
   items: ['foo']
   }
   
   foo
   
   {
   items: ['foo', 'bar']
   }
   
   foo
   bar
   
   K2VFSZ
   $('#item').append('' + _.last(items) + '');
   HTML͕ೖͬͯདྷΔՄೳੑ͕͋ΔͷͰ

   XSSϦεΫ͕..
   

   View Slide

10. K2VFSZ
    $('#item').append('' + _.escape(_.last(items)) + '');
    {
    items: ['foo']
    }
    
    foo
    
    {
    items: ['foo', 'bar']
    }
    
    foo
    <i>bar</i>
    
    

    View Slide

11. {
    items: ['foo']
    }
    
    foo
    
    {
    items: ['foo', 'bar']
    }
    
    foo
    <i>bar</i>
    
    K2VFSZ
    $('#item').append('' + _.escape(_.last(items)) + '');
    ςϯϓϨʔτ౉͍ͨ͠ͷͰ

    ৚݅Ͱม͑ͯ΋Β͍͍ͬͯͰ͔͢..

    API΋มΘΓ·͢..
    

    View Slide

12. K2VFSZ
    var val = _.last(items);
    if (val.t !== 'tmpl') val.b = _.escape(val.b);
    $('#item').append('' + val.b + '');
    {
    items: [{t: 'text', b:'foo'}]
    }
    
    foo
    
    {
    items: [

    {t: 'text', b: 'foo'},

    {t: 'tmpl', b: 'bar'}

    ]
    }
    
    foo
    bar
    
    

    View Slide

13. K2VFSZ
    var val = _.last(items);
    if (val.t !== 'tmpl') val.b = _.escape(val.b);
    $('#item').append('' + val.b + '');
    {
    items: [{t: 'text', b:'foo'}]
    }
    
    foo
    
    {
    items: [

    {t: 'text', b: 'foo'},

    {t: 'tmpl', b: 'bar'}

    ]
    }
    
    foo
    bar
    
    ಛఆ৚݅ͷ࣌͸inputͰฤूͰ͖ΔΑ͏ʹ

    ͯ͠΋Β͍͍ͨΜͰ͕͍͍͢Ͱ͔͢..
    

    View Slide

14. K2VFSZ
    var val = _.last(items);
    if (val.t !== 'tmpl') {
    val.b = _.escape(val.b);
    } else if (val.t === 'edit') {
    val.b = '';
    }
    $('#item').append('' + val.b + '');
    {
    items: [{t: 'text', b:'foo'}]
    }
    
    foo
    
    {
    items: [

    {t: 'text', b: 'foo'},

    {t: 'edit', b: 'bar'}

    ]
    }
    
    foo
    
    
    

    View Slide

15. K2VFSZ
    var val = _.last(items);
    if (val.t !== 'tmpl') {
    val.b = _.escape(val.b);
    } else if (val.t === 'edit') {
    val.b = '';
    }
    $('#item').append('' + val.b + '');
    {
    items: [{t: 'text', b:'foo'}]
    }
    
    foo
    
    {
    items: [

    {t: 'text', b: 'foo'},

    {t: 'edit', b: 'bar'}

    ]
    }
    
    foo
    
    
    ࠷ऴߦ͡Όͳ్ͯ͘தʹ৽σʔλ͕

    ૠೖ͞ΕΔͱόάΓ·͢..
    

    View Slide

16. K2VFSZ
    var val = _.last(items);
    if (val.t !== 'tmpl') {
    val.b = _.escape(val.b);
    } else if (val.t === 'edit') {
    val.b = '';
    }
    $('#item').append('' + val.b + '');
    {
    items: [{t: 'text', b:'foo'}]
    }
    
    foo
    
    {
    items: [

    {t: 'text', b: 'foo'},

    {t: 'edit', b: 'bar'}

    ]
    }
    
    foo
    
    
    ࠷ऴߦ͡Όͳ్ͯ͘தʹ৽σʔλ͕

    ૠೖ͞ΕΔͱόάΓ·͢..
    ͷ༧ײ
    #7299716
    

    View Slide

17. K2VFSZ
    var val = _.last(items);
    if (val.t !== 'tmpl') {
    val.b = _.escape(val.b);
    } else if (val.t === 'edit') {
    val.b = '';
    }
    $('#item').append('' + val.b + '');
    {
    items: [{t: 'text', b:'foo'}]
    }
    
    foo
    
    {
    items: [

    {t: 'text', b: 'foo'},

    {t: 'edit', b: 'bar'}

    ]
    }
    
    foo
    
    
    ్தʹૠೖͱ͔ϋʔυίʔσΟϯάʹͳΓͦ͏..
    ͜ΕҎ্ཁٻ͕૿͑ΔͱରԠͰ͖ͳͦ͏..
    Ҿ͖ܧ͍ͩΒෛ࠴ʹͳΓͦ͏..
    ϑϨʔϜϫʔΫೖΕΕ͹͍͍ͱฉ͍ͨͷͰ
    ͱΓ͋͑ͣBackboneΛೖΕͯΈΔ
    

    View Slide

18. #BDLCPOF
    class RawView extends Backbone.View {
    constructor() {
    this.tagName = 'li';
    super();
    }
    initialize(options) {
    _.bindAll(this, 'render', 'remove');
    this.listenTo(this.model, 'change', this.render);
    this.listenTo(this.model, 'destroy', this.remove);
    }
    render() {
    $(this.el).html(_.template('<%- b %>', this.model.toJSON()));
    return this;
    }
    }
    class InputView extends RawView {
    render() {
    $(this.el).html(_.template('', this.model.toJSON()));
    return this;
    }
    }
    class EscapeView extends RawView {
    render() {
    $(this.el).html(_.template('<%- _.escape(b) %>">', this.model.toJSON()));
    return this;
    }
    }
    {
    items: [{t: 'text', b:'foo'}]
    }
    
    foo
    
    {
    items: [

    {t: 'text', b: 'foo'},

    {t: 'edit', b: 'bar'}

    ]
    }
    
    foo
    
    
    class CollectionView extends Backbone.View {
    constructor() {
    this.el = '#items';
    super();
    }
    initialize(options) {
    _.bindAll(this, 'resetItems', 'appendItem', 'removeItem');
    this.listenTo(this.collection, 'reset', this.resetItems);
    this.listenTo(this.collection, 'add', this.appendItem);
    this.listenTo(this.collection, 'remove', this.removeItem);
    }
    resetItems(collection) {
    collection.each((model) => this.appendItem(model));
    }
    appendItem(model) {
    var view;
    switch (model.get('t')) {
    case 'text': view = new EscapeView({model}); break;
    case 'tmpl': view = new RawView({model}); break;
    case 'edit': view = new InputView({model}); break;
    }
    var view = new ModelView({model});
    $(this.el).append(view.render().el);
    }
    removeItem(model) {
    model.destroy();
    }
    }
    var collection = new Backbone.Collection(items);
    new CollectionView({collection});
    http://goo.gl/aiVQks
    

    View Slide

19. #BDLCPOF
    class RawView extends Backbone.View {
    constructor() {
    this.tagName = 'li';
    super();
    }
    initialize(options) {
    _.bindAll(this, 'render', 'remove');
    this.listenTo(this.model, 'change', this.render);
    this.listenTo(this.model, 'destroy', this.remove);
    }
    render() {
    $(this.el).html(_.template('<%- b %>', this.model.toJSON()));
    return this;
    }
    }
    class InputView extends RawView {
    render() {
    $(this.el).html(_.template('', this.model.toJSON()));
    return this;
    }
    }
    class EscapeView extends RawView {
    render() {
    $(this.el).html(_.template('<%- _.escape(b) %>">', this.model.toJSON()));
    return this;
    }
    }
    {
    items: [{t: 'text', b:'foo'}]
    }
    
    foo
    
    {
    items: [

    {t: 'text', b: 'foo'},

    {t: 'edit', b: 'bar'}

    ]
    }
    
    foo
    
    
    class CollectionView extends Backbone.View {
    constructor() {
    this.el = '#items';
    super();
    }
    initialize(options) {
    _.bindAll(this, 'resetItems', 'appendItem', 'removeItem');
    this.listenTo(this.collection, 'reset', this.resetItems);
    this.listenTo(this.collection, 'add', this.appendItem);
    this.listenTo(this.collection, 'remove', this.removeItem);
    }
    resetItems(collection) {
    collection.each((model) => this.appendItem(model));
    }
    appendItem(model) {
    var view;
    switch (model.get('t')) {
    case 'text': view = new EscapeView({model}); break;
    case 'tmpl': view = new RawView({model}); break;
    case 'edit': view = new InputView({model}); break;
    }
    var view = new ModelView({model});
    $(this.el).append(view.render().el);
    }
    removeItem(model) {
    model.destroy();
    }
    }
    var collection = new Backbone.Collection(items);
    new CollectionView({collection});
    ͳɹ͕ɹ͍
    ͜ͷྫͩͱModel͸୯ಠ͕ͩ

    Model͕ෳ਺ʹͳΔͱ

    ͞Βʹάονϟάνϟʹͳ͍ͬͯ͘
    http://goo.gl/aiVQks
    

    View Slide

20. #BDLCPOF
    class RawView extends Backbone.View {
    constructor() {
    this.tagName = 'li';
    super();
    }
    initialize(options) {
    _.bindAll(this, 'render', 'remove');
    this.listenTo(this.model, 'change', this.render);
    this.listenTo(this.model, 'destroy', this.remove);
    }
    render() {
    $(this.el).html(_.template('<%- b %>', this.model.toJSON()));
    return this;
    }
    }
    class InputView extends RawView {
    render() {
    $(this.el).html(_.template('', this.model.toJSON()));
    return this;
    }
    }
    class EscapeView extends RawView {
    render() {
    $(this.el).html(_.template('<%- _.escape(b) %>">', this.model.toJSON()));
    return this;
    }
    }
    {
    items: [{t: 'text', b:'foo'}]
    }
    
    foo
    
    {
    items: [

    {t: 'text', b: 'foo'},

    {t: 'edit', b: 'bar'}

    ]
    }
    
    foo
    
    
    class CollectionView extends Backbone.View {
    constructor() {
    this.el = '#items';
    super();
    }
    initialize(options) {
    _.bindAll(this, 'resetItems', 'appendItem', 'removeItem');
    this.listenTo(this.collection, 'reset', this.resetItems);
    this.listenTo(this.collection, 'add', this.appendItem);
    this.listenTo(this.collection, 'remove', this.removeItem);
    }
    resetItems(collection) {
    collection.each((model) => this.appendItem(model));
    }
    appendItem(model) {
    var view;
    switch (model.get('t')) {
    case 'text': view = new EscapeView({model}); break;
    case 'tmpl': view = new RawView({model}); break;
    case 'edit': view = new InputView({model}); break;
    }
    var view = new ModelView({model});
    $(this.el).append(view.render().el);
    }
    removeItem(model) {
    model.destroy();
    }
    }
    var collection = new Backbone.Collection(items);
    new CollectionView({collection});
    ͳɹ͕ɹ͍
    ͜ͷྫͩͱModel͸୯ಠ͕ͩɺ

    Model͕ෳ਺ʹͳͬͨ࣌͸

    ͞Βʹάονϟάνϟʹͳ͍ͬͯ͘
    

    View Slide

21. #BDLCPOF
    class RawView extends Backbone.View {
    constructor() {
    this.tagName = 'li';
    super();
    }
    initialize(options) {
    _.bindAll(this, 'render', 'remove');
    this.listenTo(this.model, 'change', this.render);
    this.listenTo(this.model, 'destroy', this.remove);
    }
    render() {
    $(this.el).html(_.template('<%- b %>', this.model.toJSON()));
    return this;
    }
    }
    class InputView extends RawView {
    render() {
    $(this.el).html(_.template('', this.model.toJSON()));
    return this;
    }
    }
    class EscapeView extends RawView {
    render() {
    $(this.el).html(_.template('<%- _.escape(b) %>">', this.model.toJSON()));
    return this;
    }
    }
    {
    items: [{t: 'text', b:'foo'}]
    }
    
    foo
    
    {
    items: [

    {t: 'text', b: 'foo'},

    {t: 'edit', b: 'bar'}

    ]
    }
    
    foo
    
    
    class CollectionView extends Backbone.View {
    constructor() {
    this.el = '#items';
    super();
    }
    initialize(options) {
    _.bindAll(this, 'resetItems', 'appendItem', 'removeItem');
    this.listenTo(this.collection, 'reset', this.resetItems);
    this.listenTo(this.collection, 'add', this.appendItem);
    this.listenTo(this.collection, 'remove', this.removeItem);
    }
    resetItems(collection) {
    collection.each((model) => this.appendItem(model));
    }
    appendItem(model) {
    var view;
    switch (model.get('t')) {
    case 'text': view = new EscapeView({model}); break;
    case 'tmpl': view = new RawView({model}); break;
    case 'edit': view = new InputView({model}); break;
    }
    var view = new ModelView({model});
    $(this.el).append(view.render().el);
    }
    removeItem(model) {
    model.destroy();
    }
    }
    var collection = new Backbone.Collection(items);
    new CollectionView({collection});
    ͳɹ͕ɹ͍
    ͜ͷྫͩͱModel͸୯ಠ͕ͩɺ

    Model͕ෳ਺ʹͳͬͨ࣌͸

    ͞Βʹάονϟάνϟʹͳ͍ͬͯ͘
    #7299716
    

    View Slide

22. FWJM
    w ͳʹ͕ѱ͍ͷ͔
    

    View Slide

23. FWJM
    w ϨϯμϦϯάίετΛؾʹͯ͠ભҠΛॻ͔ͳ͍ͱ͍͚ͳ
    ͍ͷ͕ѱ͍
    w BQQFOEͱ͔͊͞
    

    View Slide

24. FWJM
    w ຖճ৽͘͠%0.࡞্ͬͯॻ͖͢Ε͹ίʔυͱ%0.ͷঢ়
    ଶʹဃ཭͕ແ͘ͳΔ
    w Ͱ΋ͦ͏͢ΔͱJOQVU΁ͷೖྗςΩετͳͲɺҰ࣌తͳ
    ঢ়ଶ͕ഁغ͞Εͯ͠·͏
    w ഑ྻ͕ͭͱ͔ͳΒ͍͍͚ͲUVNCMSͷμογϡϘʔυ
    Έͨ͘ݸͱ͔ʹͳΔͱϨϯμϦϯάίετͰ஍ٿ
    ͕Ϡό͍
    

    View Slide

25. FWJM
    w ϦΞϧλΠϜόΠϯσΟϯάʹ͠ΖԿʹ͠Ζɺશ෦Λ·
    Δͬͱॻ͖׵͑ΔҎ֎ͷख๏ΛͱΔͳΒɺσʔλͷભҠ
    ʹ෇ਵ͢ΔॲཧΛॻ͔͟ΔΛಘͳ͍
    w ࠷ॳͷϨϯμϦϯά͔Βεςοϓ͕ਐΊ͹ਐΉ΄Ͳɺίʔ
    υͱ%0.ͷဃ཭͕ਐߦ͍ͯ͘͠
    

    View Slide

26. FWJM
    w ਓ͸Կ͔ͷ٘ਜ਼ͳ͠ʹԿ΋ಘΔࣄͳͲͰ͖ͳ͍
    w KT͸ѱຐͱͷܖ໿ͩͬͨ
    

    View Slide

27. FWJM
    w ਓ͸Կ͔ͷ٘ਜ਼ͳ͠ʹԿ΋ಘΔࣄͳͲͰ͖ͳ͍
    w KT͸ѱຐͱͷܖ໿ͩͬͨ
    

    View Slide

28. FWJM
    w ਓ͸Կ͔ͷ٘ਜ਼ͳ͠ʹԿ΋ಘΔࣄͳͲͰ͖ͳ͍
    w KT͸ѱຐͱͷܖ໿ͩͬͨ
    

    View Slide

29. 3FBDUͷར఺
    w ʮຖճ৽͘͠%0.࡞্ͬͯॻ͖͢Ε͹ίʔυͱ%0.ͷ
    ঢ়ଶʹဃ཭͕ແ͘ͳΔʯ
    w ࡶʹݴ͏ͱɺ͜ΕˢΛݱ࣮తͳ࣮૷ʹམͱ͠ࠐΜͩͷ
    ͕3FBDU
    w ͜ΕΛ࣮ݱ͢ΔͨΊʹ7JSUVBM%0.ͱ͍͏࢓૊ΈΛ࢖ͬ
    ͯͨ
    

    View Slide

30. 7JSUVBM%0.
    w ͜Ε·ͰϑϩϯτͰسආ͞Ε͖ͯͨ෋߽తϓϩάϥϛϯάύϥμΠϜ΁ͷ
    ݱ࣮తͳղͷҰ͕ͭ3FBDU
    w σʔλߏ଄ʹରԠ͢Δ׬੒඼ͷ%0.Λߏங͢Δϝιου͕͋Γɺͦͷ
    %0.ͱݱࡏͷ%0.ͷEJGGΛऔͬͯࠩ෼ߋ৽͢Δ
    {
    items: ['foo', 'bar']
    }
    
    foo
    bar
    
    {
    items: ['foo', 'baz']
    }
    
    foo
    baz
    
    EJGG
    
    foo
    baz
    
    

    View Slide

31. 7JSUVBM%0.
    w EJGGΛऔΔͨΊʹੜ੒͞ΕΔ%0.ͷ͜ͱΛ7JSUVBM%0.ͱ͍͏ɺࣗ෼Ͱॻ
    ͘ͷ͸͜͏͍͏σʔλͳΒ͜͏ͳΔͱ͍͏ϝιουͷΈ
    w ભҠʹؔ͢ΔॲཧΛॻ͘ඞཁ͕ແ͍ɺৗʹʮ͜͏ͳͬͯ΄͍͠ʯͱ͍͏
    %0.Λు͖ग़͠ଓ͚ɺݱࡏͷ%0.͸ͦͷ%0.ʹ޲͔ͬͯࣗಈͰભҠ͢Δ
    {
    items: ['foo', 'bar']
    }
    
    foo
    bar
    
    {
    items: ['foo', 'baz']
    }
    EJGG
    
    foo
    baz
    
    7JSUVBM%0.
    
    foo
    baz
    
    

    View Slide

32. 7JSUVBM%0.
    w BUUSJCVUF͕มΘΕ͹มΘΔͷ͸BUUSJCVUF͚ͩɺCPEZ͕มΘΕ͹มΘΔ
    ͷ͸CPEZ͚ͩ
    w 7JFXͰ࣮૷͠ͳ͚Ε͹͍͚ͳ͍ͷ͸ʮJUFNTΛΠςϨʔτͯ͠MJTUΛ࡞Δ
    ςϯϓϨʔτʯ͚ͩʹͳΔ
    {
    items: ['foo', 'bar']
    }
    
    foo
    bar
    
    {
    items: ['foo', 'baz']
    }
    EJGG
    
    foo
    baz
    
    
    foo
    baz
    
    7JSUVBM%0.
    

    View Slide

33. 3FBDUͷར఺
    w ίϯϙʔωϯτϕʔεͰ%0.Λ૊ΈཱͯΔ͜ͱ͕Ͱ͖Δ
    w ࡶʹݴ͏ͱػೳΛ಺แͨ͠ಠࣗλά͕࡞ΕΔ
    w 8FC$PNQPOFOUT͕໨ࢦ͍ͯͨ͠ੈքΛ࣮૷ϨϕϧͰ࣮
    ݱͰ͖Δ
    

    View Slide

34. 3FBDUͷར఺
    w KTY࢖͏ͱΑΓ࣮ײͰ͖Δ σΟʔφϯτΧࣾͷ͡Όͳ͍΄͏
    
    w KTY͸ίϯύΠϧͨ͠ΒKTʹͳΔ΍ͭͰ͢ɺ$PGGFFΈ͍ͨͳ΋Μ
    ͩͱࢥ͍ͬͯͩ͘͞
    var Hello = React.createClass({
    render() {
    return React.DOM.div(null, `Hello ${this.props.name}`);
    }
    })
    var Hello = React.createClass({
    render() {
    return Hello {this.props.name};
    }
    })
    

    View Slide

35. 3FBDU
    w ྫ͑͹ɺ഑ྻ͕౉͞ΕͨΒMJTUΛউखʹ࡞Δλάͱ͔
    
    
    foo
    bar
    
    

    View Slide

36. 3FBDU
    w ྫ͑͹ɺݕࡧ݁ՌΛΠςϨʔτͨ͠Β֤ཁૉΛϨϯμϦϯ
    άͯ͠ग़ͯ͘͠ΕΔͱ͔
    w ͏·͘੾Γ෼͚Ε͹ɺ੹຿Λద੾ʹ෼ࢄ͢Δ͜ͱ͕Ͱ͖Δ
    
    {this.state.results.map(item => {
    return ;
    })}
    
    

    View Slide

37. 3FBDU
    w ྫ͑͹ɺޙ͔Β͜͜ΛJODSFNFOUͨ͘͠
    ͳͬͨͱ͢Δ
    
    {this.state.results.map(item => {
    return ;
    })}
    
    #49974740
    

    View Slide

38. 3FBDU
    w ͜͏͢Δ͚ͩͰউखʹࠩ෼ߋ৽ͯ͘͠ΕΔΠϝʔδ
    Ͱ͢ ࣮ࡍʹ͸TFUUFSΛ௨͢
    
    w ߋ৽͞ΕΔͷ͸தͷ਺ࣈͷΈɺ%0.͸มߋ͞Εͳ͍
    results[1].fav_count += 1
    ---
    
    {this.state.results.map(item => {
    return ;
    })}
    
    #49974740
    

    View Slide

39. View Slide

40. qVY
    w qVY͕Ͳ͏͍͏ΞʔΩςΫνϟ͔ɺͷલʹ
    

    View Slide

41. qVY
    w ʮqVYΛΠϯετʔϧ͢Ε͹Ϩʔϧʹ৐ΕΔʯ
    w ʮqVY͸׬શʹ৽͍֓͠೦ɺ࠷ߴʯ
    w ͜Ε͸ӕ
    

    View Slide

42. qVY
    w qVY͸ΞʔΩςΫνϟͷ໊લ
    w ͨͩͷPCTFSWFSύλʔϯ
    w 3FBDUͱqVY͸ૄ݁߹ɺ3FBDU
    Λޮ཰తʹ׆༻͢ΔΞʔΩς
    Ϋνϟͱͯࣔ͠͞Ε͚ͨͩ
    w qVYͷ࠷΋༏Ε͍ͯΔ఺͸ɺ
    ӈਤͷΑ͏ͳύλʔϯʹqVY
    ͱ͍͏໊લΛ͚ͭͨॴ
    

    View Slide

43. GBGSPUTLJFT
    w ਓؒ͸ݹདྷ͔Βحոͳݱ৅ʹ໊લΛ෇
    ͚Δ͜ͱͰࣄ৅ΛઢҾ͖͠ɺίϛϡχ
    έʔγϣϯίετΛݮΒͨ͠Γɺ໰୊
    ͷ੾Γ෼͚ΛߦͬͨΓ͖ͯͨ͠
    w ϑΝϑϩπΩʔζʮͦͷ৔ʹ͋Δ͸
    ͣͷͳ͍΋ͷ ڕͱ͔
    ͕߱ͬͯ͘Δʯ
    ݱ৅ͷ͜ͱ
    w ໊લΛ͚͓͚ͭͯ͹ɺ͍͖ͳΓۭ͔Β
    େྔͷڕ͕߱Γ஫͍Ͱ΋ʮ͋͊ɺ͋Ε
    Ͷʯͱݴ͑ΔɺਆʹفͬͯੜᩴΛ๋͛
    Δ΂͖͔Ͳ͏͔൑ఆͰ͖Δɺӈԟࠨԟ
    ͤͣʹࡁΉɺจݙΛ୧Δ͜ͱ΋༰қ
    

    View Slide

44. qVY
    w qVYͱ͍͏໊લ͕͋Δ͚ͩͰɺઃܭ͕ͲΕ͚ͩqVY͔ɺ࣮
    ૷͸ͲΕ͚ͩqVY͔Β֎Ε͍ͯΔ͔ɺςετ͸Ͳ͏ॻ͔Ε
    ͍ͯΔ΂͖͔ɺͱ͔Λ؆қʹೝࣝͰ͖ΔΑ͏ʹͳΔ
    w ϑΝδʔͳਓؒͷ೴Ͱ΋ͪΌΜͱ࿮ΛೝࣝͰ͖Δɺจ຺
    ͷᴥᴪ͕ੜ·Εʹ͍͘
    w υΩϡϝϯτ΍աڈͷ࣭໰ʹ౰ͨΓқ͍
    w ϨϏϡʔ͠΍͍͢ɺΞʔΩςΫνϟʹैΘͳ͍1VMM
    3FRVFTUΛॠࡴͰ͖Δ
    

    View Slide

45. ZBIPPqVYJCMFʹ13ग़ͨ͠
    w Θͨ͠ʮ͜ͷϝιουɺଞͩͱฦΓ஋͋Δͷʹ7JFX಺Ͱ
    ࢖͚ͬͨ࣌ͩฦΓ஋͕ແ͍ͷ͓͔͘͠ͳ͍ʁʯ
    w :ࣾʮ7JFXͰͦΕฦ͢ͱqVY͡Όͳ͘ͳΔ͔Βʯ
    w ॠࡴ͞Εͨ
    

    View Slide

46. qVYqPX
    "DUJPO
    %JTQBUDIFS
    4UPSF
    7JFX
    "DUJPO QBZMPBE
    "1* 0CKFDU \LFZ WBM^
    
    0CKFDU \LFZ WBM^
    
    4UPSFE0CKFDU <>
    
    

    View Slide

47. qVYqPX
    "DUJPO
    %JTQBUDIFS
    4UPSF
    7JFX
    "DUJPO QBZMPBE
    "1* 0CKFDU \LFZ WBM^
    
    0CKFDU \LFZ WBM^
    
    4UPSFE0CKFDU <>
    
    #18558660
    

    View Slide

48. qVY
    w σʔλͷϑϩʔ͸ৗʹઈରඞͣҰํ޲
    w ྫ͑͹ɺ"DUJPOҎ֎͕)551ϦΫΤετΛൃߦͯࣗ͠਎
    Λߋ৽͢Δͷ͸μϝ Тဂ
    ʢGBWͱ͔Ͱ΋ʣ
    w Ͳ͏͍ͬͨϑϩʔͰσʔλ͕͖߱ͬͯͯɺͲ͏͍ͬͨ݁Ռ
    ͕ग़͔ͨɺ໰୊΍ೝࣝͷ੾Γ෼͚͕ͱͯ΋ָ
    w ͜ͷߏ଄ͷ͍͍ͱ͜Ζ͸PCTFSWFSύλʔϯͳײ͡ͳͷͰద
    ٓάά͍ͬͯͩ͘͞ɺ͜ͷεϥΠυͰ͸ओʹ"DUJPOͱ͔qVY
    Ͱ࢖ΘΕΔ༻ޠΛઆ໌͠·͢
    

    View Slide

49. qVY
    w "DUJPO͕ελʔτɺ7JFX͕ΰʔϧ
    w "DUJPOʹΑΔ4UPSFͷߋ৽Λݕ஌͠ɺ7JFXࣗ਎ͷΞο
    ϓσʔτ͕ߦΘΕΔ
    

    View Slide

50. qVYqPX
    "DUJPO
    %JTQBUDIFS
    4UPSF
    7JFX
    "1* VQEBUF
    VQEBUF
    USJHHFS
    σʔλΛ഑ૹ

    <&WFOU&NJUUFS>
    ΞΫηεɾJOQVUͳͲͷ

    ೖྗΛड͚ͯσʔλΛߏங
    σʔλΛஷΊΔ
    <#BDLCPOF$PMMFDUJPO>
    σʔλΛදݱ
    <3FBDU>
    45"35
    (0"-
    )551"DDFTT
    "DUJPO QBZMPBE
    0CKFDU \LFZ WBM^
    
    0CKFDU \LFZ WBM^
    
    4UPSFE0CKFDU <>
    
    

    View Slide

51. qVY
    w 7JFX͸"DUJPOΛൃߦ͠ɺϑϩʔΛτϦΨʔͰ͖Δ
    

    View Slide

52. qVYqPX
    "DUJPO
    %JTQBUDIFS
    4UPSF
    7JFX
    BDUJPO "1*
    3&45"35
    <ϢʔβʔΠϕϯτ>
    ϘλϯͷΫϦοΫ΍

    ϖʔδͷΦʔτϦϩʔυ
    "DUJPO QBZMPBE
    0CKFDU \LFZ WBM^
    
    0CKFDU \LFZ WBM^
    
    4UPSFE0CKFDU <>
    
    ͖ͬ͞ͷਤ΁໭Δ
    

    View Slide

53. qVY
    w ͜ͷΞʔΩςΫνϟͷ໊લ͕qVYɺGBDFCPPLqVY͸Ϧ
    ϑΝϨϯε࣮૷ɺ%JTQBUDIFSͷίʔυ͕ͪΐΖͬͱॻ͍
    ͯ͋Δ͚ͩ
    w qVYJCMFͱ͔BSEBͱ͔SFqVYͱ͔ɺqVYΞʔΩςΫ
    νϟͷ࣮૷͸୔ࢁ͋Δ
    w ݱࡏ͸ա౉ظͰελϯμʔυ͕ଘࡏ͠ͳ͍ɺΈΜͳԶ͕
    ߟ͑ͨ࠷ڧͷqVY࣮૷Λ࡞͍ͬͯΔઓࠃཚੈ
    

    View Slide

54. qVY
    w ϥΠϒϥϦ͸ؤுͬͯબఆ͢Δ͔ࣗ࡞͢Δʢࢲ͸αʔόαΠυαϙʔ
    τ͕ॆ࣮͍ͯ͠ΔͷͰqVYJCMFΛ࢖ͬͯΔʣ
    w αʔόαΠυ͕OPEFͱ͔KTධՁΤϯδϯΛੵΜͰΔݴޠͰ͋Ε͹ɺ࠷
    ॳͷϑϩʔΛճͯ͠7JFXΛߏஙͨ͠ঢ়ଶͰϢʔβʹฦͤΔ
    w "DUJPO͸৚݅෼ذͰαʔόͳΒ%#ϦΫΤετɺΫϥΠΞϯτݺͼ
    ग़͠ͳΒ)551ϦΫΤετ͢Δͱ͔ॻ͍͓͚ͯ͹͍͍
    w όοΫΤϯυʹ"1*Λ࣋ͭܗࣜͳΒTVQFSBHFOUͱ͔Ͱ)551ϝιο
    υΛαʔόʔͱΫϥΠΞϯτͰڞ௨Խ͓͚ͯ͠͹͍͍
    

    View Slide

55. qVY
    w ͔͜͜Βޙ͸ͭͷίϯϙʔωϯτΛݸʑʹઆ໌͠·͢
    

    View Slide

56. "DUJPO
    "
    

    View Slide

57. "DUJPO
    "DUJPO QBZMPBE
    
    )551
    +40/ \LFZ WBM^
    
    "DUJPO
    %JTQBUDIFS
    "1* VQEBUF
    0CKFDU \LFZ WBM^
    
    %JTQBUDIFS
    τϦΨʔ͞ΕͨΠϕϯτʹԠͯ͡)551͠
    ͨΓͯ͠σʔλΛߏஙɺߏஙͨ͠σʔλ
    Λ%JTQBUDIFS΁౉͢
    "1*͔Β
    σʔλΛऔΔ
    σʔλΛ

    ഑ૹ͢Δ
    0CKFDU \LFZ WBM^
    
    "
    

    View Slide

58. "DUJPO
    "DUJPO QBZMPBE
    
    )551
    +40/ \LFZ WBM^
    
    "DUJPO
    %JTQBUDIFS
    "1* VQEBUF
    0CKFDU \LFZ WBM^
    
    %JTQBUDIFS
    λΠϜϥΠϯͷ࣮૷ͩͱॳճΞΫηε΍ϖʔ
    δΛ࠷Լ෦·ͰεΫϩʔϧͨ࣌͠ʹɺ"1*
    ʹNBY@JEͱ͔͚ͭͯ࣍ͷΞΠςϜΛ໰͍
    ߹Θͤͯ%JTQBUDIFS΁౉͢ײ͡
    "1*͔Β
    σʔλΛऔΔ
    σʔλΛ

    ഑ૹ͢Δ
    0CKFDU \LFZ WBM^
    
    "
    

    View Slide

59. %JTQBUDIFS
    %
    

    View Slide

60. "DUJPO
    %JTQBUDIFS
    4UPSF
    VQEBUF
    VQEBUF
    σʔλΛ

    ഑ૹ͢Δ
    σʔλΛ

    ஷΊΔ
    %JTQBUDIFS
    4UPSF
    0CKFDU \LFZ WBM^
    
    0CKFDU \LFZ WBM^
    
    "DUJPO͔Β໋ྩͱσʔλ͕དྷΔͷͰ໋ྩʹ
    ߹Θͤͨ഑ૹઌ΁σʔλΛ഑৴͢Δɺ࣮૷
    ͸ͨͩͷ&WFOU&NJUUFSͰΑ͍
    0CKFDU \LFZ WBM^
    
    0CKFDU \LFZ WBM^
    
    %
    

    View Slide

61. "DUJPO
    %JTQBUDIFS
    4UPSF
    VQEBUF
    VQEBUF
    %JTQBUDIFS
    4UPSF 4UPSF
    0CKFDU \LFZ WBM^
    
    0CKFDU \LFZ WBM^
    0CKFDU \LFZ WBM^
    
    %JTQBUDIFS
    4UPSF
    σʔλΛ

    ഑ૹ͢Δ
    σʔλΛ

    ஷΊΔ
    ෳ਺ͷ4UPSF΁σʔλΛ഑ૹ͢ΔՄೳੑ͕͋Δɺ
    %JTQBUDIFSͷଘࡏʹΑΓ"DUJPO͸഑ૹઌΛؾ
    ʹ͠ͳͯ͘Α͘ͳΔ
    0CKFDU \LFZ WBM^
    
    0CKFDU \LFZ WBM^
    
    %
    

    View Slide

62. "DUJPO
    %JTQBUDIFS
    4UPSF
    VQEBUF
    VQEBUF
    %JTQBUDIFS
    4UPSF 4UPSF
    0CKFDU \LFZ WBM^
    
    0CKFDU \LFZ WBM^
    0CKFDU \LFZ WBM^
    
    %JTQBUDIFS
    4UPSF
    σʔλΛ

    ഑ૹ͢Δ
    σʔλΛ

    ஷΊΔ
    0CKFDU \LFZ WBM^
    
    0CKFDU \LFZ WBM^
    
    %
    λΠϜϥΠϯͷ࣮૷ͩͱɺड৴ͨ͠σʔλΛϗʔϜ
    ͷλΠϜϥΠϯ FH
    ͱϢʔβ͝ͱͷλΠϜϥΠ
    ϯ FHHFUB
    ΁ͦΕͧΕ഑ૹ͓ͯ͘͠ײ͡
    

    View Slide

63. 4UPSF
    4
    

    View Slide

64. %JTQBUDIFS
    4UPSF
    7JFX
    VQEBUF
    USJHHFS
    σʔλΛ

    ஷΊΔ
    σʔλΛ

    දݱ͢Δ
    0CKFDU \LFZ WBM^
    
    4UPSFE0CKFDU <>
    
    4UPSF
    0CKFDU \LFZ WBM^
    
    7JFX
    4UPSFE0CKFDU <>
    
    %JTQBUDIFS͔Β౉͞ΕͨσʔλΛ໋ྩʹ߹
    Θͤͯૢ࡞͢Δ
    ಺෦ͷ࣮૷͸ੜͷ0CKFDU͔ɺͨͩͷ
    #BDLCPOF$PMMFDUJPOͰΑ͍ JEͰϢχʔΫ
    ʹͨ͠ΓDPNQBSBUPS͚ͭͨΓͰ͖ΔͷͰ
    
    4
    

    View Slide

65. %JTQBUDIFS
    4UPSF
    7JFX
    VQEBUF
    USJHHFS
    σʔλΛ

    ஷΊΔ
    σʔλΛ

    දݱ͢Δ
    0CKFDU \LFZ WBM^
    
    4UPSFE0CKFDU <>
    
    4UPSF
    0CKFDU \LFZ WBM^
    
    7JFX
    4UPSFE0CKFDU <>
    
    4UPSF͸ෳ਺ͷ7JFX΁

    σʔλΛ഑ૹ͢ΔՄೳੑ͕͋Δ
    7JFX
    4UPSFE0CKFDU <>
    
    4
    

    View Slide

66. %JTQBUDIFS
    4UPSF
    7JFX
    VQEBUF
    USJHHFS
    σʔλΛ

    ஷΊΔ
    σʔλΛ

    දݱ͢Δ
    0CKFDU \LFZ WBM^
    
    4UPSFE0CKFDU <>
    
    4UPSF
    0CKFDU \LFZ WBM^
    
    7JFX
    4UPSFE0CKFDU <>
    
    %JTQBUDI͞Εͨ࣌఺Ͱ͸

    σʔλΛ഑ૹ͠ͳ͍ࣄ΋͋Δ ϚϨ
    
    7JFX
    4UPSFE0CKFDU <>
    
    4
    

    View Slide

67. %JTQBUDIFS
    4UPSF
    7JFX
    VQEBUF
    USJHHFS
    σʔλΛ

    ஷΊΔ
    σʔλΛ

    දݱ͢Δ
    0CKFDU \LFZ WBM^
    
    4UPSFE0CKFDU <>
    
    4UPSF
    0CKFDU \LFZ WBM^
    
    7JFX
    4UPSFE0CKFDU <>
    
    4UPSF͸JOQVUͱPVUQVUͷΠϯλʔϑΣʔεΛ͍࣋ͬͯ
    Δɺྫ͑͹JOQVUͰ#BDLCPOF$PMMFDUJPO΁BEEͯ͠ɺ
    PVUQVUͰUP+40/
    ͯ͠σʔλΛు͖ग़͢ײ͡
    $PMMFDUJPOͷΠϯελϯε͸Ӆณ͞ΕͯΔͱ͍͍
    4
    #BDLCPOF$PMMFDUJPO
    

    View Slide

68. %JTQBUDIFS
    4UPSF
    7JFX
    VQEBUF
    USJHHFS
    σʔλΛ

    ஷΊΔ
    σʔλΛ

    දݱ͢Δ
    0CKFDU \LFZ WBM^
    
    4UPSFE0CKFDU <>
    
    4UPSF
    0CKFDU \LFZ WBM^
    
    7JFX
    4UPSFE0CKFDU <>
    
    λΠϜϥΠϯͷ࣮૷ͩͱɺड৴ͨ͠σʔλΛϗʔϜͷλΠ
    ϜϥΠϯ FH
    ͱϢʔβ͝ͱͷλΠϜϥΠϯ FHHFUB
    
    Λผͷ4UPSF͕࣋ͬͯͨΓɺ4UPSFͷ಺෦ͰΠϯελϯεΛ
    ผʑʹ؅ཧͯ͠JOQVUͰৼΓ෼͚ͨΓ
    4
    #BDLCPOF$PMMFDUJPO
    

    View Slide

69. 7
    7JFX
    

    View Slide

70. "DUJPO
    4UPSF
    7JFX
    "DUJPO QBZMPBE
    
    4UPSFE0CKFDU <>
    
    7
    4UPSF
    7JFX
    4UPSFE0CKFDU <>
    
    4UPSF͔Β౉͞ΕͨσʔλΛදݱ͢Δ

    ࣮૷͸3FBDU͕͓͢͢Ί͞Ε͍ͯΔ
    

    View Slide

71. "DUJPO
    4UPSF
    7JFX
    "DUJPO QBZMPBE
    
    4UPSFE0CKFDU <>
    
    7
    4UPSF
    7JFX
    4UPSFE0CKFDU <>
    
    4UPSF͕ߋ৽͞ΕΔͱɺσʔλ͕7JFXʹ΍ͬͯ͘Δ
    3FBDU͸ͦͷσʔλʹै͍%0.Λࠩ෼ߋ৽͢Δ
    

    View Slide

72. "DUJPO
    4UPSF
    7JFX
    "DUJPO QBZMPBE
    
    4UPSFE0CKFDU <>
    
    7
    4UPSF
    7JFX
    4UPSFE0CKFDU <>
    
    4UPSFΛ࣋ͨͳ͍৔߹΋͋Δ
    

    View Slide

73. "DUJPO
    4UPSF
    7JFX
    "DUJPO QBZMPBE
    
    4UPSFE0CKFDU <>
    
    7
    4UPSF
    7JFX
    4UPSFE0CKFDU <>
    
    7JFX͸4UPSFΛॻ͖׵͑ͯ͸͍͚ͳ͍
    7JFX͸ΠϕϯτΛ؂ࢹ͢Δ͚ͩɺ

    σʔλϑϩʔ͸ৗʹ4UPSF͔Β7JFX΁
    ❌
    

    View Slide

74. "DUJPO
    4UPSF
    7JFX
    "DUJPO QBZMPBE
    
    4UPSFE0CKFDU <>
    
    7
    4UPSF
    7JFX
    4UPSFE0CKFDU <>
    
    ෳ਺ͷ4UPSF͔Β

    σʔλΛड͚औΔՄೳੑ͕͋Δ
    4UPSF
    4UPSFE0CKFDU <>
    
    

    View Slide

75. "DUJPO
    4UPSF
    7JFX
    "DUJPO QBZMPBE
    
    4UPSFE0CKFDU <>
    
    7
    7JFX͸ൃੜͨ͠ΠϕϯτʹԠͯ͡

    "DUJPOΛൃߦ͢Δ͜ͱ͕Ͱ͖Δ
    JOQVUDIBOHFE OFYUQBHF
    7JFX
    "DUJPO QBZMPBE
    
    "DUJPO
    

    View Slide

76. "DUJPO
    4UPSF
    7JFX
    "DUJPO QBZMPBE
    
    4UPSFE0CKFDU <>
    
    7
    "DUJPOΛൃߦ͠ͳ͍৔߹΋͋Δ
    7JFX
    "DUJPO QBZMPBE
    
    "DUJPO
    

    View Slide

77. "DUJPO
    4UPSF
    7JFX
    "DUJPO QBZMPBE
    
    4UPSFE0CKFDU <>
    
    7
    ෳ਺ͷ"DUJPOΛऔΓѻ͏৔߹΋͋Δ
    7JFX
    "DUJPO QBZMPBE
    
    "DUJPO
    "DUJPO QBZMPBE
    
    "DUJPO
    

    View Slide

78. "DUJPO
    4UPSF
    7JFX
    "DUJPO QBZMPBE
    
    4UPSFE0CKFDU <>
    
    7
    7JFX͸4UPSF͔Β౉͞ΕͨσʔλΛ

    ࣗ਎Ͱߋ৽ͯ͠͸͍͚ͳ͍
    7JFX
    "DUJPO QBZMPBE
    
    "DUJPO
    ❌
    

    View Slide

79. "DUJPO
    4UPSF
    7JFX
    "DUJPO QBZMPBE
    
    4UPSFE0CKFDU <>
    
    7
    4UPSFͷ৘ใΛߋ৽͢Δ৔߹͸"DUJPOΛൃߦ͠

    %JTQBUDIFSܦ༝Ͱ4UPSFΛߋ৽͠มߋ௨஌ΛडऔΔ
    7JFX
    "DUJPO QBZMPBE
    
    
    4UPSF
    

    View Slide

80. ࢖ͬͯΈͯ
    w ઃܭͷ͜ͱΛ͍͢͝ߟ͑Δɺͱʹ͔͘ߟ͑Δ
    w σʔλߏ଄ͷࣄ͚ͩߟ͑ͯΔɺͲ͏΍ͬͯೖख͢Δ͔ɺ
    Ͳ͏΍ͬͯฤू͢Δ͔ɺͲ͏͍͏ॱ൪Ͱมߋ͢Δ͔
    w %0.ͷࣄ͸ຆͲߟ͑ͳ͍ɺਖ਼͍͠σʔλ͸ਖ਼͍͠%0.
    ʹͳΔӡ໋ʹ͋ΔͷͰ΄ͬͱ͍͍͍ͯ
    w ख਺͸ΊͬͪΌݮΔ
    w Ͱ΋िؒલͷࣗ෼ͷίʔυ͕ಡΊΔ
    

    View Slide

81. ࢖ͬͯΈͯ
    w 3FBDU͕ݡ͍ɺಛʹ8"3/ϝοηʔδ
    w ͪΐͬͱҳ୤͢Δͱ͙͢ܯࠂग़ͯ͘͠ΕΔ
    w ʮ͜͜ɺ͜ͷϓϩύςΟ଍Γͳ͍ΑͶʁʯ
    w ʮαʔόͱΫϥΠΞϯτͰظ଴ͯ͠Δ%0.ҧ͘Ͷʁʯ
    

    View Slide

82. ࢖ͬͯΈͯ
    w υΩϡϝϯτ͕ॆ࣮ͯ͠ΔɺεϥΠυ΋هࣄ΋ଟ͍
    w શ෦ॻ͍ͯ͋ΔɺಡΊ͹Θ͔Δ
    

    View Slide

83. Ҏ্
    

    View Slide