ReactとFluxのこと

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

Transcript

1. React Flux
2. HFUB SFBDUͱqVYʹ͍ͭͯษڧͯ͠Δ
3. HFUB ࡶʹ·ͱΊͯΈΔ
5. 3FBDU w GBDFCPPL͕࡞ͬͨ+BWB4DSJQUͷϏϡʔ༻ϥΠϒϥϦ
   w ϑϨʔϜϫʔΫͰ͸ͳ͍ʢॏཁʣ
   w ΞʔΩςΫνϟΛ੍໿͢Δ΋ͷͰ͸ͳ͍ɺϏϡʔ༻ͷ ίϯϙʔωϯτͱͯ͠୯ಠͰར༻͢Δ͜ͱ͕Ͱ͖Δ
   w .PEFMͱ$PMMFDUJPO͸#BDLCPOFɺ7JFX͚ͩ3FBDUɺ ͱ͍͏ετʔϦʔ΋͋ΓಘΔ
   w αʔόͰ΋ΫϥΠΞϯτͰ΋ར༻Մೳ
6. #FGPSF
   3FBDU
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
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. qVY
    qPX "DUJPO %JTQBUDIFS 4UPSF 7JFX "DUJPO QBZMPBE "1* 0CKFDU \LFZ WBM^ 0CKFDU \LFZ WBM^ 4UPSFE0CKFDU <>
47. qVY
    qPX "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. qVY
    qPX "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. qVY
    qPX "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
     ͱϢʔβ͝ͱͷλΠϜϥΠ ϯ FH
    HFUB ΁ͦΕͧΕ഑ૹ͓ͯ͘͠ײ͡
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
     ͱϢʔβ͝ͱͷλΠϜϥΠϯ FH
    HFUB Λผͷ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
    OFYU
    QBHF
     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. Ҏ্