Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

    new Proxy(target, handler); wҾ਺ target λʔήοτͷΦϒδΣΫτ·ͨ͸ɺ1SPYZͰϥοϓ͢Δؔ਺ handler ؔ਺ΛϓϩύςΟͱͯ࣋ͭ͠ΦϒδΣΫτ ͦͷؔ਺Ͱɺ1SPYZʹରͯ͠ૢ࡞͕ߦΘΕͨ৔߹ͷڍಈΛఆٛ w ิ଍ QͱUBSHFU͸ಉ໊͡લͰ΋Α͍ 4
  2. 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
  3. 7VFͷ1SPYZؔ࿈৘ใ w 7VF͸1SPYZͳͲͷ৽͍͠"1*Λ࢖͏ͨΊɺ*&ͳͲͷݹ͍ϒ ϥ΢βΛαϙʔτ͠ͳ͍ IUUQTIBTIOPEFDPNBNBXJUIWVFKTUFBN DKJUMSLJBFXVWST w 3FBDUJWJUZJO7VFKTWT7VFKT w 7VFKTͰ͸ɺ഑ྻͷϓϩύςΟ΁ͷ஋ͷઃఆ΍ಈతͳϓϩύ

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