$30 off During Our Annual Pro Sale. View Details »

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

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

  3. HFUB ࡶʹ·ͱΊͯΈΔ

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

    ͱ͍͏ετʔϦʔ΋͋ΓಘΔ w αʔόͰ΋ΫϥΠΞϯτͰ΋ར༻Մೳ
  6. #FGPSF3FBDU

  7. TUPSZ { items: ['foo'] } <ul id='items'> <li>foo</li> </ul> {

    items: ['foo', 'bar'] } <ul id='items'> <li>foo</li> <li>bar</li> </ul> w Ϟσϧͷߏ଄ʹैͬͯ%0.Λग़ྗ͢ΔγʔϯΛߟ͑Δ
  8. K2VFSZ $('#item').append('<li>' + _.last(items) + '</li>'); { items: ['foo'] }

    <ul id='items'> <li>foo</li> </ul> { items: ['foo', 'bar'] } <ul id='items'> <li>foo</li> <li>bar</li> </ul>
  9. { items: ['foo'] } <ul id='items'> <li>foo</li> </ul> { items:

    ['foo', 'bar'] } <ul id='items'> <li>foo</li> <li>bar</li> </ul> K2VFSZ $('#item').append('<li>' + _.last(items) + '</li>'); HTML͕ೖͬͯདྷΔՄೳੑ͕͋ΔͷͰ
 XSSϦεΫ͕..
  10. K2VFSZ $('#item').append('<li>' + _.escape(_.last(items)) + '</li>'); { items: ['foo'] }

    <ul id='items'> <li>foo</li> </ul> { items: ['foo', '<i>bar</i>'] } <ul id='items'> <li>foo</li> <li>&lt;i&gt;bar&lt;/i&gt;</li> </ul>
  11. { items: ['foo'] } <ul id='items'> <li>foo</li> </ul> { items:

    ['foo', '<i>bar</i>'] } <ul id='items'> <li>foo</li> <li>&lt;i&gt;bar&lt;/i&gt;</li> </ul> K2VFSZ $('#item').append('<li>' + _.escape(_.last(items)) + '</li>'); ςϯϓϨʔτ౉͍ͨ͠ͷͰ
 ৚݅Ͱม͑ͯ΋Β͍͍ͬͯͰ͔͢..
 API΋มΘΓ·͢..
  12. K2VFSZ var val = _.last(items); if (val.t !== 'tmpl') val.b

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

    = _.escape(val.b); $('#item').append('<li>' + val.b + '</li>'); { items: [{t: 'text', b:'foo'}] } <ul id='items'> <li>foo</li> </ul> { items: [
 {t: 'text', b: 'foo'},
 {t: 'tmpl', b: '<i>bar</i>'}
 ] } <ul id='items'> <li>foo</li> <li><i>bar</i></li> </ul> ಛఆ৚݅ͷ࣌͸inputͰฤूͰ͖ΔΑ͏ʹ
 ͯ͠΋Β͍͍ͨΜͰ͕͍͍͢Ͱ͔͢..
  14. K2VFSZ var val = _.last(items); if (val.t !== 'tmpl') {

    val.b = _.escape(val.b); } else if (val.t === 'edit') { val.b = '<input value=' + val.b + '>'; } $('#item').append('<li>' + val.b + '</li>'); { items: [{t: 'text', b:'foo'}] } <ul id='items'> <li>foo</li> </ul> { items: [
 {t: 'text', b: 'foo'},
 {t: 'edit', b: '<i>bar</i>'}
 ] } <ul id='items'> <li>foo</li> <li><input value='<i>bar</i>'></li> </ul>
  15. K2VFSZ var val = _.last(items); if (val.t !== 'tmpl') {

    val.b = _.escape(val.b); } else if (val.t === 'edit') { val.b = '<input value=' + val.b + '>'; } $('#item').append('<li>' + val.b + '</li>'); { items: [{t: 'text', b:'foo'}] } <ul id='items'> <li>foo</li> </ul> { items: [
 {t: 'text', b: 'foo'},
 {t: 'edit', b: '<i>bar</i>'}
 ] } <ul id='items'> <li>foo</li> <li><input value='<i>bar</i>'></li> </ul> ࠷ऴߦ͡Όͳ్ͯ͘தʹ৽σʔλ͕
 ૠೖ͞ΕΔͱόάΓ·͢..
  16. K2VFSZ var val = _.last(items); if (val.t !== 'tmpl') {

    val.b = _.escape(val.b); } else if (val.t === 'edit') { val.b = '<input value=' + val.b + '>'; } $('#item').append('<li>' + val.b + '</li>'); { items: [{t: 'text', b:'foo'}] } <ul id='items'> <li>foo</li> </ul> { items: [
 {t: 'text', b: 'foo'},
 {t: 'edit', b: '<i>bar</i>'}
 ] } <ul id='items'> <li>foo</li> <li><input value='<i>bar</i>'></li> </ul> ࠷ऴߦ͡Όͳ్ͯ͘தʹ৽σʔλ͕
 ૠೖ͞ΕΔͱόάΓ·͢.. ͷ༧ײ #7299716
  17. K2VFSZ var val = _.last(items); if (val.t !== 'tmpl') {

    val.b = _.escape(val.b); } else if (val.t === 'edit') { val.b = '<input value=' + val.b + '>'; } $('#item').append('<li>' + val.b + '</li>'); { items: [{t: 'text', b:'foo'}] } <ul id='items'> <li>foo</li> </ul> { items: [
 {t: 'text', b: 'foo'},
 {t: 'edit', b: '<i>bar</i>'}
 ] } <ul id='items'> <li>foo</li> <li><input value='<i>bar</i>'></li> </ul> ్தʹૠೖͱ͔ϋʔυίʔσΟϯάʹͳΓͦ͏.. ͜ΕҎ্ཁٻ͕૿͑ΔͱରԠͰ͖ͳͦ͏.. Ҿ͖ܧ͍ͩΒෛ࠴ʹͳΓͦ͏.. ϑϨʔϜϫʔΫೖΕΕ͹͍͍ͱฉ͍ͨͷͰ ͱΓ͋͑ͣBackboneΛೖΕͯΈΔ
  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('<span><%- b %></span>', this.model.toJSON())); return this; } } class InputView extends RawView { render() { $(this.el).html(_.template('<input val="<%- b %>">', this.model.toJSON())); return this; } } class EscapeView extends RawView { render() { $(this.el).html(_.template('<span><%- _.escape(b) %></span>">', this.model.toJSON())); return this; } } { items: [{t: 'text', b:'foo'}] } <ul id='items'> <li>foo</li> </ul> { items: [
 {t: 'text', b: 'foo'},
 {t: 'edit', b: '<i>bar</i>'}
 ] } <ul id='items'> <li><span>foo</span></li> <li><input value='<i>bar</i>'></li> </ul> 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
  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('<span><%- b %></span>', this.model.toJSON())); return this; } } class InputView extends RawView { render() { $(this.el).html(_.template('<input val="<%- b %>">', this.model.toJSON())); return this; } } class EscapeView extends RawView { render() { $(this.el).html(_.template('<span><%- _.escape(b) %></span>">', this.model.toJSON())); return this; } } { items: [{t: 'text', b:'foo'}] } <ul id='items'> <li>foo</li> </ul> { items: [
 {t: 'text', b: 'foo'},
 {t: 'edit', b: '<i>bar</i>'}
 ] } <ul id='items'> <li>foo</li> <li><input value='<i>bar</i>'></li> </ul> 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
  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('<span><%- b %></span>', this.model.toJSON())); return this; } } class InputView extends RawView { render() { $(this.el).html(_.template('<input val="<%- b %>">', this.model.toJSON())); return this; } } class EscapeView extends RawView { render() { $(this.el).html(_.template('<span><%- _.escape(b) %></span>">', this.model.toJSON())); return this; } } { items: [{t: 'text', b:'foo'}] } <ul id='items'> <li>foo</li> </ul> { items: [
 {t: 'text', b: 'foo'},
 {t: 'edit', b: '<i>bar</i>'}
 ] } <ul id='items'> <li>foo</li> <li><input value='<i>bar</i>'></li> </ul> 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͕ෳ਺ʹͳͬͨ࣌͸
 ͞Βʹάονϟάνϟʹͳ͍ͬͯ͘
  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('<span><%- b %></span>', this.model.toJSON())); return this; } } class InputView extends RawView { render() { $(this.el).html(_.template('<input val="<%- b %>">', this.model.toJSON())); return this; } } class EscapeView extends RawView { render() { $(this.el).html(_.template('<span><%- _.escape(b) %></span>">', this.model.toJSON())); return this; } } { items: [{t: 'text', b:'foo'}] } <ul id='items'> <li>foo</li> </ul> { items: [
 {t: 'text', b: 'foo'},
 {t: 'edit', b: '<i>bar</i>'}
 ] } <ul id='items'> <li>foo</li> <li><input value='<i>bar</i>'></li> </ul> 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
  22. FWJM w ͳʹ͕ѱ͍ͷ͔

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

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

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

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

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

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

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

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

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

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

    'bar'] } <ul id='items'> <li>foo</li> <li>bar</li> </ul> { items: ['foo', 'baz'] } EJGG <ul id='items'> <li>foo</li> <li>baz</li> </ul> <ul id='items'> <li>foo</li> <li>baz</li> </ul> 7JSUVBM%0.
  33. 3FBDUͷར఺ w ίϯϙʔωϯτϕʔεͰ%0.Λ૊ΈཱͯΔ͜ͱ͕Ͱ͖Δ w ࡶʹݴ͏ͱػೳΛ಺แͨ͠ಠࣗλά͕࡞ΕΔ w 8FC$PNQPOFOUT͕໨ࢦ͍ͯͨ͠ੈքΛ࣮૷ϨϕϧͰ࣮ ݱͰ͖Δ

  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 <div>Hello {this.props.name}</div>; } })
  35. 3FBDU w ྫ͑͹ɺ഑ྻ͕౉͞ΕͨΒMJTUΛউखʹ࡞Δλάͱ͔ <Iterate items={['foo', 'bar']} /> <ul> <li>foo</li> <li>bar</li>

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

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

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

    1 --- <section className='results'> {this.state.results.map(item => { return <Result item={item} />; })} </section> #49974740
  39. None
  40. qVY w qVY͕Ͳ͏͍͏ΞʔΩςΫνϟ͔ɺͷલʹ

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

  42. qVY w qVY͸ΞʔΩςΫνϟͷ໊લ w ͨͩͷPCTFSWFSύλʔϯ w 3FBDUͱqVY͸ૄ݁߹ɺ3FBDU Λޮ཰తʹ׆༻͢ΔΞʔΩς Ϋνϟͱͯࣔ͠͞Ε͚ͨͩ w

    qVYͷ࠷΋༏Ε͍ͯΔ఺͸ɺ ӈਤͷΑ͏ͳύλʔϯʹqVY ͱ͍͏໊લΛ͚ͭͨॴ
  43. GBGSPUTLJFT w ਓؒ͸ݹདྷ͔Βحոͳݱ৅ʹ໊લΛ෇ ͚Δ͜ͱͰࣄ৅ΛઢҾ͖͠ɺίϛϡχ έʔγϣϯίετΛݮΒͨ͠Γɺ໰୊ ͷ੾Γ෼͚ΛߦͬͨΓ͖ͯͨ͠ w ϑΝϑϩπΩʔζʮͦͷ৔ʹ͋Δ͸ ͣͷͳ͍΋ͷ ڕͱ͔

    ͕߱ͬͯ͘Δʯ ݱ৅ͷ͜ͱ w ໊લΛ͚͓͚ͭͯ͹ɺ͍͖ͳΓۭ͔Β େྔͷڕ͕߱Γ஫͍Ͱ΋ʮ͋͊ɺ͋Ε Ͷʯͱݴ͑ΔɺਆʹفͬͯੜᩴΛ๋͛ Δ΂͖͔Ͳ͏͔൑ఆͰ͖Δɺӈԟࠨԟ ͤͣʹࡁΉɺจݙΛ୧Δ͜ͱ΋༰қ
  44. qVY w qVYͱ͍͏໊લ͕͋Δ͚ͩͰɺઃܭ͕ͲΕ͚ͩqVY͔ɺ࣮ ૷͸ͲΕ͚ͩqVY͔Β֎Ε͍ͯΔ͔ɺςετ͸Ͳ͏ॻ͔Ε ͍ͯΔ΂͖͔ɺͱ͔Λ؆қʹೝࣝͰ͖ΔΑ͏ʹͳΔ w ϑΝδʔͳਓؒͷ೴Ͱ΋ͪΌΜͱ࿮ΛೝࣝͰ͖Δɺจ຺ ͷᴥᴪ͕ੜ·Εʹ͍͘ w υΩϡϝϯτ΍աڈͷ࣭໰ʹ౰ͨΓқ͍

    w ϨϏϡʔ͠΍͍͢ɺΞʔΩςΫνϟʹैΘͳ͍1VMM 3FRVFTUΛॠࡴͰ͖Δ
  45. ZBIPPqVYJCMFʹ13ग़ͨ͠ w Θͨ͠ʮ͜ͷϝιουɺଞͩͱฦΓ஋͋Δͷʹ7JFX಺Ͱ ࢖͚ͬͨ࣌ͩฦΓ஋͕ແ͍ͷ͓͔͘͠ͳ͍ʁʯ w :ࣾʮ7JFXͰͦΕฦ͢ͱqVY͡Όͳ͘ͳΔ͔Βʯ w ॠࡴ͞Εͨ

  46. qVYqPX "DUJPO %JTQBUDIFS 4UPSF 7JFX "DUJPO QBZMPBE "1* 0CKFDU \LFZ

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

    WBM^ 0CKFDU \LFZ WBM^ 4UPSFE0CKFDU <> #18558660
  48. qVY w σʔλͷϑϩʔ͸ৗʹઈରඞͣҰํ޲ w ྫ͑͹ɺ"DUJPOҎ֎͕)551ϦΫΤετΛൃߦͯࣗ͠਎ Λߋ৽͢Δͷ͸μϝ Тဂ ʢGBWͱ͔Ͱ΋ʣ w Ͳ͏͍ͬͨϑϩʔͰσʔλ͕͖߱ͬͯͯɺͲ͏͍ͬͨ݁Ռ

    ͕ग़͔ͨɺ໰୊΍ೝࣝͷ੾Γ෼͚͕ͱͯ΋ָ w ͜ͷߏ଄ͷ͍͍ͱ͜Ζ͸PCTFSWFSύλʔϯͳײ͡ͳͷͰద ٓάά͍ͬͯͩ͘͞ɺ͜ͷεϥΠυͰ͸ओʹ"DUJPOͱ͔qVY Ͱ࢖ΘΕΔ༻ޠΛઆ໌͠·͢
  49. qVY w "DUJPO͕ελʔτɺ7JFX͕ΰʔϧ w "DUJPOʹΑΔ4UPSFͷߋ৽Λݕ஌͠ɺ7JFXࣗ਎ͷΞο ϓσʔτ͕ߦΘΕΔ

  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 <>
  51. qVY w 7JFX͸"DUJPOΛൃߦ͠ɺϑϩʔΛτϦΨʔͰ͖Δ

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


    ϖʔδͷΦʔτϦϩʔυ "DUJPO QBZMPBE 0CKFDU \LFZ WBM^ 0CKFDU \LFZ WBM^ 4UPSFE0CKFDU <> ͖ͬ͞ͷਤ΁໭Δ
  53. qVY w ͜ͷΞʔΩςΫνϟͷ໊લ͕qVYɺGBDFCPPLqVY͸Ϧ ϑΝϨϯε࣮૷ɺ%JTQBUDIFSͷίʔυ͕ͪΐΖͬͱॻ͍ ͯ͋Δ͚ͩ w qVYJCMFͱ͔BSEBͱ͔SFqVYͱ͔ɺqVYΞʔΩςΫ νϟͷ࣮૷͸୔ࢁ͋Δ w ݱࡏ͸ա౉ظͰελϯμʔυ͕ଘࡏ͠ͳ͍ɺΈΜͳԶ͕

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

    w όοΫΤϯυʹ"1*Λ࣋ͭܗࣜͳΒTVQFSBHFOUͱ͔Ͱ)551ϝιο υΛαʔόʔͱΫϥΠΞϯτͰڞ௨Խ͓͚ͯ͠͹͍͍
  55. qVY w ͔͜͜Βޙ͸ͭͷίϯϙʔωϯτΛݸʑʹઆ໌͠·͢

  56. "DUJPO "

  57. "DUJPO "DUJPO QBZMPBE )551 +40/ \LFZ WBM^ "DUJPO %JTQBUDIFS "1*

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

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

  60. "DUJPO %JTQBUDIFS 4UPSF VQEBUF VQEBUF σʔλΛ
 ഑ૹ͢Δ σʔλΛ
 ஷΊΔ %JTQBUDIFS

    4UPSF 0CKFDU \LFZ WBM^ 0CKFDU \LFZ WBM^ "DUJPO͔Β໋ྩͱσʔλ͕དྷΔͷͰ໋ྩʹ ߹Θͤͨ഑ૹઌ΁σʔλΛ഑৴͢Δɺ࣮૷ ͸ͨͩͷ&WFOU&NJUUFSͰΑ͍ 0CKFDU \LFZ WBM^ 0CKFDU \LFZ WBM^ %
  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^ %
  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 ΁ͦΕͧΕ഑ૹ͓ͯ͘͠ײ͡
  63. 4UPSF 4

  64. %JTQBUDIFS 4UPSF 7JFX VQEBUF USJHHFS σʔλΛ
 ஷΊΔ σʔλΛ
 දݱ͢Δ 0CKFDU

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

    \LFZ WBM^ 4UPSFE0CKFDU <> 4UPSF 0CKFDU \LFZ WBM^ 7JFX 4UPSFE0CKFDU <> 4UPSF͸ෳ਺ͷ7JFX΁
 σʔλΛ഑ૹ͢ΔՄೳੑ͕͋Δ 7JFX 4UPSFE0CKFDU <> 4
  66. %JTQBUDIFS 4UPSF 7JFX VQEBUF USJHHFS σʔλΛ
 ஷΊΔ σʔλΛ
 දݱ͢Δ 0CKFDU

    \LFZ WBM^ 4UPSFE0CKFDU <> 4UPSF 0CKFDU \LFZ WBM^ 7JFX 4UPSFE0CKFDU <> %JTQBUDI͞Εͨ࣌఺Ͱ͸
 σʔλΛ഑ૹ͠ͳ͍ࣄ΋͋Δ ϚϨ 7JFX 4UPSFE0CKFDU <> 4
  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
  68. %JTQBUDIFS 4UPSF 7JFX VQEBUF USJHHFS σʔλΛ
 ஷΊΔ σʔλΛ
 දݱ͢Δ 0CKFDU

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

  70. "DUJPO 4UPSF 7JFX "DUJPO QBZMPBE 4UPSFE0CKFDU <> 7 4UPSF 7JFX

    4UPSFE0CKFDU <> 4UPSF͔Β౉͞ΕͨσʔλΛදݱ͢Δ
 ࣮૷͸3FBDU͕͓͢͢Ί͞Ε͍ͯΔ
  71. "DUJPO 4UPSF 7JFX "DUJPO QBZMPBE 4UPSFE0CKFDU <> 7 4UPSF 7JFX

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

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

    4UPSFE0CKFDU <> 7JFX͸4UPSFΛॻ͖׵͑ͯ͸͍͚ͳ͍ 7JFX͸ΠϕϯτΛ؂ࢹ͢Δ͚ͩɺ
 σʔλϑϩʔ͸ৗʹ4UPSF͔Β7JFX΁ ❌
  74. "DUJPO 4UPSF 7JFX "DUJPO QBZMPBE 4UPSFE0CKFDU <> 7 4UPSF 7JFX

    4UPSFE0CKFDU <> ෳ਺ͷ4UPSF͔Β
 σʔλΛड͚औΔՄೳੑ͕͋Δ 4UPSF 4UPSFE0CKFDU <>
  75. "DUJPO 4UPSF 7JFX "DUJPO QBZMPBE 4UPSFE0CKFDU <> 7 7JFX͸ൃੜͨ͠ΠϕϯτʹԠͯ͡
 "DUJPOΛൃߦ͢Δ͜ͱ͕Ͱ͖Δ

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

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

    "DUJPO QBZMPBE "DUJPO "DUJPO QBZMPBE "DUJPO
  78. "DUJPO 4UPSF 7JFX "DUJPO QBZMPBE 4UPSFE0CKFDU <> 7 7JFX͸4UPSF͔Β౉͞ΕͨσʔλΛ
 ࣗ਎Ͱߋ৽ͯ͠͸͍͚ͳ͍

    7JFX "DUJPO QBZMPBE "DUJPO ❌
  79. "DUJPO 4UPSF 7JFX "DUJPO QBZMPBE 4UPSFE0CKFDU <> 7 4UPSFͷ৘ใΛߋ৽͢Δ৔߹͸"DUJPOΛൃߦ͠
 %JTQBUDIFSܦ༝Ͱ4UPSFΛߋ৽͠มߋ௨஌ΛडऔΔ

    7JFX "DUJPO QBZMPBE  4UPSF
  80. ࢖ͬͯΈͯ w ઃܭͷ͜ͱΛ͍͢͝ߟ͑Δɺͱʹ͔͘ߟ͑Δ w σʔλߏ଄ͷࣄ͚ͩߟ͑ͯΔɺͲ͏΍ͬͯೖख͢Δ͔ɺ Ͳ͏΍ͬͯฤू͢Δ͔ɺͲ͏͍͏ॱ൪Ͱมߋ͢Δ͔ w %0.ͷࣄ͸ຆͲߟ͑ͳ͍ɺਖ਼͍͠σʔλ͸ਖ਼͍͠%0. ʹͳΔӡ໋ʹ͋ΔͷͰ΄ͬͱ͍͍͍ͯ w

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

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

  83. Ҏ্