ReactとFluxのこと

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. Ҏ্