ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy

&4ͷ1SPYZΛ࢖ͬͯΈͨ 8F"SF+BWB4DSJQUFST!UI UJQP

ΞδΣϯμ w ͳͥ1SPYZʹ͍ͭͯ࿩͢ͷ͔ w 1SPYZ֓ཁ w 7VFͷ1SPYZؔ࿈৘ใ w ϝλϓϩάϥϛϯά 2

ͳͥ1SPYZʹ͍ͭͯ࿩͢ͷ͔ w 3FHBSEJOHUIFCSPLFOQSPNJTFPG8FC $PNQPOFOUTͰ࠶ൃݟ w &4ͷղઆهࣄͰݟͨ͜ͱ͸͕͋ͬͨɺ࢖ͬͨ͜ͱ ͸ͳ͔ͬͨ http://robdodson.me/regarding-the-broken-promise- of-web-components/ w
ௐ΂ͯΈΔͱɺ7VFʹ࠾༻͞ΕΔΑ͏ͳͷͰ঺հ 3

1SPYZ֓ཁ w جຊతͳૢ࡞ ྫ͑͹ϓϩύςΟͷݕࡧɺ୅ೖɺྻڍɺؔ਺ͷىಈͳ Ͳ ʹ͍ͭͯಠࣗͷಈ࡞Λఆٛ wߏจ var p =
new Proxy(target, handler); wҾ਺ target λʔήοτͷΦϒδΣΫτ·ͨ͸ɺ1SPYZͰϥοϓ͢Δؔ਺ handler ؔ਺ΛϓϩύςΟͱͯ࣋ͭ͠ΦϒδΣΫτ ͦͷؔ਺Ͱɺ1SPYZʹରͯ͠ૢ࡞͕ߦΘΕͨ৔߹ͷڍಈΛఆٛ w ิ଍ QͱUBSHFU͸ಉ໊͡લͰ΋Α͍ 4

1SPYZͷαϯϓϧίʔυ w ΦϒδΣΫτʹ౉͞Εͨ஋Λݕূ let validator = { set: function(obj, prop,
value) { if (prop === 'age') { if (!Number.isInteger(value)) { throw new TypeError('年齢が整数ではありません'); } } obj[prop] = value; } }; let person = new Proxy({}, validator); person.age = 'young'; // 例外が投げられる 5

ϒϥ΢βͷαϙʔτঢ়گ 6 https://caniuse.com/#feat=proxy

7VFͷ1SPYZؔ࿈৘ใ w 7VF͸1SPYZͳͲͷ৽͍͠"1*Λ࢖͏ͨΊɺ*&ͳͲͷݹ͍ϒ ϥ΢βΛαϙʔτ͠ͳ͍ IUUQTIBTIOPEFDPNBNBXJUIWVFKTUFBN DKJUMSLJBFXVWST w 3FBDUJWJUZJO7VFKTWT7VFKT w 7VFKTͰ͸ɺ഑ྻͷϓϩύςΟ΁ͷ஋ͷઃఆ΍ಈతͳϓϩύ
ςΟͷ௥ՃΛ7VFTFUͰߦ͏ඞཁ͕͋Δ w 7VFKTͰ͸ɺ഑ྻͷϓϩύςΟ΁ͷ஋ͷઃఆ΍ಈతͳϓϩύ ςΟͷ௥Ճ΋1SPYZͰଞͷϓϩύςΟͱಉ༷ʹѻ͑Δ IUUQTCMPHDMPVECPPTUJPSFBDUJWJUZJOWVFKTWTWVFKT EDEEEDEG 7

ಈతଐੑ௥Ճͷίʔυ w 7VF Vue.set(this.$data, 'lastAddedName', 'John Elway'); w 7VF data
= new Proxy(data, { set: function(obj, prop, value) { if (obj[prop] !== value) { obj[prop] = value; } } }); data.lastAddedName = 'John Elway'; 8

ϝλϓϩάϥϛϯά w .FUBQSPHSBNNJOHJO&41BSU1SPYJFT https://www.keithcirkel.co.uk/metaprogramming- in-es6-part-3-proxies/ w ແݶʹνΣΠϯՄೳͳ"1*࡞੒ w NFUIPENJTTJOHϑοΫ࣮૷ w
ྻڍܕ͔ΒHFU0XO1SPQFSUZ/BNFT 0CKFDULFZT JOԋࢉࢠ౳ΛӅณ w 0CTFSWFSύλʔϯ 0CKFDUPCTFSWF ͷ࣮૷ 9

ES2015 Proxyを使ってみた / Introductory talk about ES...

ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy

tipo159

More Decks by tipo159

Other Decks in Programming

Featured

Transcript

&4ͷ1SPYZΛ࢖ͬͯΈͨ 8F"SF+BWB4DSJQUFST!UI UJQP

ΞδΣϯμ w ͳͥ1SPYZʹ͍ͭͯ࿩͢ͷ͔ w 1SPYZ֓ཁ w 7VFͷ1SPYZؔ࿈৘ใ w ϝλϓϩάϥϛϯά 2

ͳͥ1SPYZʹ͍ͭͯ࿩͢ͷ͔ w 3FHBSEJOHUIFCSPLFOQSPNJTFPG8FC $PNQPOFOUTͰ࠶ൃݟ w &4ͷղઆهࣄͰݟͨ͜ͱ͸͕͋ͬͨɺ࢖ͬͨ͜ͱ ͸ͳ͔ͬͨ http://robdodson.me/regarding-the-broken-promise- of-web-components/ w

1SPYZ֓ཁ w جຊతͳૢ࡞ ྫ͑͹ϓϩύςΟͷݕࡧɺ୅ೖɺྻڍɺؔ਺ͷىಈͳ Ͳ ʹ͍ͭͯಠࣗͷಈ࡞Λఆٛ wߏจ var p =

1SPYZͷαϯϓϧίʔυ w ΦϒδΣΫτʹ౉͞Εͨ஋Λݕূ let validator = { set: function(obj, prop,

ϒϥ΢βͷαϙʔτঢ়گ 6 https://caniuse.com/#feat=proxy

7VFͷ1SPYZؔ࿈৘ใ w 7VF͸1SPYZͳͲͷ৽͍͠"1Λ࢖͏ͨΊɺ&ͳͲͷݹ͍ϒ ϥ΢βΛαϙʔτ͠ͳ͍ IUUQTIBTIOPEFDPNBNBXJUIWVFKTUFBN DKJUMSLJBFXVWST w 3FBDUJWJUZJO7VFKTWT7VFKT w 7VFKTͰ͸ɺ഑ྻͷϓϩύςΟ΁ͷ஋ͷઃఆ΍ಈతͳϓϩύ

ಈతଐੑ௥Ճͷίʔυ w 7VF Vue.set(this.$data, 'lastAddedName', 'John Elway'); w 7VF data

ϝλϓϩάϥϛϯά w .FUBQSPHSBNNJOHJO&41BSU1SPYJFT https://www.keithcirkel.co.uk/metaprogramming- in-es6-part-3-proxies/ w ແݶʹνΣΠϯՄೳͳ"1*࡞੒ w NFUIPENJTTJOHϑοΫ࣮૷ w