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

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

tipo159
February 22, 2018

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

・Proxy概要
・Vue 3のProxy関連情報
・メタプログラミング

tipo159

February 22, 2018
Tweet

More Decks by tipo159

Other Decks in Programming

Transcript

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

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

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

    ௐ΂ͯΈΔͱɺ7VFʹ࠾༻͞ΕΔΑ͏ͳͷͰ঺հ 3
  4. 1SPYZ֓ཁ w جຊతͳૢ࡞ ྫ͑͹ϓϩύςΟͷݕࡧɺ୅ೖɺྻڍɺؔ਺ͷىಈͳ Ͳ ʹ͍ͭͯಠࣗͷಈ࡞Λఆٛ wߏจ var p =

    new Proxy(target, handler); wҾ਺ target λʔήοτͷΦϒδΣΫτ·ͨ͸ɺ1SPYZͰϥοϓ͢Δؔ਺ handler ؔ਺ΛϓϩύςΟͱͯ࣋ͭ͠ΦϒδΣΫτ ͦͷؔ਺Ͱɺ1SPYZʹରͯ͠ૢ࡞͕ߦΘΕͨ৔߹ͷڍಈΛఆٛ w ิ଍ QͱUBSHFU͸ಉ໊͡લͰ΋Α͍ 4
  5. 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. ϒϥ΢βͷαϙʔτঢ়گ 6 https://caniuse.com/#feat=proxy

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

    ςΟͷ௥ՃΛ7VFTFUͰߦ͏ඞཁ͕͋Δ w 7VFKTͰ͸ɺ഑ྻͷϓϩύςΟ΁ͷ஋ͷઃఆ΍ಈతͳϓϩύ ςΟͷ௥Ճ΋1SPYZͰଞͷϓϩύςΟͱಉ༷ʹѻ͑Δ IUUQTCMPHDMPVECPPTUJPSFBDUJWJUZJOWVFKTWTWVFKT EDEEEDEG 7
  8. ಈతଐੑ௥Ճͷίʔυ 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
  9. ϝλϓϩάϥϛϯά 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