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

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide