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

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

Transcript

1. &4ͷ1SPYZΛ࢖ͬͯΈͨ
   8F
   "SF
   +BWB4DSJQUFST
   !UI 
   UJQP
2. ΞδΣϯμ w ͳͥ1SPYZʹ͍ͭͯ࿩͢ͷ͔
   w 1SPYZ֓ཁ
   w 7VF
   ͷ1SPYZؔ࿈৘ใ
   w ϝλϓϩάϥϛϯά 2
3. ͳͥ1SPYZʹ͍ͭͯ࿩͢ͷ͔ w 3FHBSEJOH
   UIF
   CSPLFO
   QSPNJTF
   PG
   8FC
   $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 3FBDUJWJUZ
   JO
   7VFKT
   
   WT
   7VFKT
   
   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 .FUBQSPHSBNNJOH
   JO
   &4
   1BSU
   
   
   1SPYJFT
   https://www.keithcirkel.co.uk/metaprogramming- in-es6-part-3-proxies/ w ແݶʹνΣΠϯՄೳͳ"1*࡞੒
   w NFUIPE
   NJTTJOHϑοΫ࣮૷
   w ྻڍܕ͔ΒHFU0XO1SPQFSUZ/BNFT
   0CKFDULFZT
   JOԋࢉࢠ౳ΛӅณ
   w 0CTFSWFSύλʔϯ 0CKFDUPCTFSWF ͷ࣮૷ 9