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

ReactとFluxのこと

geta6
April 26, 2015

 ReactとFluxのこと

geta6

April 26, 2015
Tweet

More Decks by geta6

Other Decks in Programming

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