$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. 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.Λग़ྗ͢ΔγʔϯΛߟ͑Δ
  2. 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>
  3. { 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ϦεΫ͕..
  4. 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>
  5. { 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΋มΘΓ·͢..
  6. 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>
  7. 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ͰฤूͰ͖ΔΑ͏ʹ
 ͯ͠΋Β͍͍ͨΜͰ͕͍͍͢Ͱ͔͢..
  8. 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>
  9. 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> ࠷ऴߦ͡Όͳ్ͯ͘தʹ৽σʔλ͕
 ૠೖ͞ΕΔͱόάΓ·͢..
  10. 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
  11. 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ΛೖΕͯΈΔ
  12. #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
  13. #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
  14. #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͕ෳ਺ʹͳͬͨ࣌͸
 ͞Βʹάονϟάνϟʹͳ͍ͬͯ͘
  15. #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
  16. 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>
  17. 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>
  18. 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.
  19. 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>; } })
  20. 3FBDU w ͜͏͢Δ͚ͩͰউखʹࠩ෼ߋ৽ͯ͘͠ΕΔΠϝʔδ Ͱ͢ ࣮ࡍʹ͸TFUUFSΛ௨͢  w ߋ৽͞ΕΔͷ͸தͷ਺ࣈͷΈɺ%0.͸มߋ͞Εͳ͍ results[1].fav_count +=

    1 --- <section className='results'> {this.state.results.map(item => { return <Result item={item} />; })} </section> #49974740
  21. GBGSPUTLJFT w ਓؒ͸ݹདྷ͔Βحոͳݱ৅ʹ໊લΛ෇ ͚Δ͜ͱͰࣄ৅ΛઢҾ͖͠ɺίϛϡχ έʔγϣϯίετΛݮΒͨ͠Γɺ໰୊ ͷ੾Γ෼͚ΛߦͬͨΓ͖ͯͨ͠ w ϑΝϑϩπΩʔζʮͦͷ৔ʹ͋Δ͸ ͣͷͳ͍΋ͷ ڕͱ͔

    ͕߱ͬͯ͘Δʯ ݱ৅ͷ͜ͱ w ໊લΛ͚͓͚ͭͯ͹ɺ͍͖ͳΓۭ͔Β େྔͷڕ͕߱Γ஫͍Ͱ΋ʮ͋͊ɺ͋Ε Ͷʯͱݴ͑ΔɺਆʹفͬͯੜᩴΛ๋͛ Δ΂͖͔Ͳ͏͔൑ఆͰ͖Δɺӈԟࠨԟ ͤͣʹࡁΉɺจݙΛ୧Δ͜ͱ΋༰қ
  22. qVYqPX "DUJPO %JTQBUDIFS 4UPSF 7JFX "DUJPO QBZMPBE "1* 0CKFDU \LFZ

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

    ͕ग़͔ͨɺ໰୊΍ೝࣝͷ੾Γ෼͚͕ͱͯ΋ָ w ͜ͷߏ଄ͷ͍͍ͱ͜Ζ͸PCTFSWFSύλʔϯͳײ͡ͳͷͰద ٓάά͍ͬͯͩ͘͞ɺ͜ͷεϥΠυͰ͸ओʹ"DUJPOͱ͔qVY Ͱ࢖ΘΕΔ༻ޠΛઆ໌͠·͢
  24. 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 <>
  25. qVYqPX "DUJPO %JTQBUDIFS 4UPSF 7JFX BDUJPO "1* 3&45"35 <ϢʔβʔΠϕϯτ> ϘλϯͷΫϦοΫ΍


    ϖʔδͷΦʔτϦϩʔυ "DUJPO QBZMPBE 0CKFDU \LFZ WBM^ 0CKFDU \LFZ WBM^ 4UPSFE0CKFDU <> ͖ͬ͞ͷਤ΁໭Δ
  26. "DUJPO "DUJPO QBZMPBE )551 +40/ \LFZ WBM^ "DUJPO %JTQBUDIFS "1*

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

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

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

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

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

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

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

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

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

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

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

    4UPSFE0CKFDU <> ෳ਺ͷ4UPSF͔Β
 σʔλΛड͚औΔՄೳੑ͕͋Δ 4UPSF 4UPSFE0CKFDU <>