楽しいProxy

Proxy is so much fun! @We are JavaScripters! #27

Transcript

1. RyoNkmr PROJECT DATE PRESENTER 2018-12-20 ָ͍͠
   Proxy @WE ARE JAVASCRIPTERS! #27
2. ࣗݾ঺հ • RyoNkmr • @RyoNkmr_ • Retty Inc. • JavaScript 3೥ੜ • ॳొஃ
3. ָ͍͠ Proxy
4. Proxy
5. ...͜ΕΒ͸جຊతͳݴޠૢ࡞ʢྫ ͑͹ɺϓϩύςΟݕࡧɺ୅ೖɺྻ ڍɺؔ਺ݺͼग़͠ͳͲʣʹׂΓࠐ Έɺಈ࡞ΛΧελϚΠζͰ͖·͢ɻ [ϝλϓϩάϥϛϯά | MDN](https:// developer.mozilla.org/ja/docs/Web/ JavaScript/Guide/ Meta_programming) Proxy
6. ରԠঢ়گ
7. https://caniuse.com/#search=proxy
8. https://node.green/#ES2015-built-ins-Proxy
9. Browser: IE11Ҏ֎ Node: v6.4.0Ҏ߱ ରԠঢ়گ
10. Proxyͱͷग़ձ͍
11. ͱ͋Δݱ৔ͷ Pull Request { type: Array, validate(values) { return values.length !== 0; }, }
12. (ϨϏϡΞʔ) { type: Array, validate(values) { return values.length !== 0; }, } const fakeData = { length : 1000 }; ͜ΕͰಥഁͰ͖ΔͷͰ͸ɾɾɾʁ(Request Changes)
13. { type: Array, validate(values) { return Array.isArray(values) && values.length !== 0; }, }
14. (ϨϏϡΞʔ) 
 { type: Array, validate(values) { return Array.isArray(values) && values.length !== 0; }, }
15. (ϨϏϡΞʔ) const fakeData = new Proxy([], { get(...args) { if (args[1] === 'length') { return -100000000000; } return Reflect.get(...args); } }); > fakeData.length // -100000000000 > Array.isArray(fakeData) // true ͜ΕͰಥഁͰ͖ΔͷͰ͸ɾɾɾʁ(Request Changes) { type: Array, validate(values) { return Array.isArray(values) && values.length !== 0; }, }
16. { type: Array, validate(values) { return Array.isArray(values) && values.length > 0; }, }
17. Proxy
18. ͓΋ͪΌͰ͸ɾɾɾʁ
20. ࢖͍ಓΛߟ͑ͯΈΔ
21. ॲཧΛࠩ͠ࠐΉ
22. Logger on a Node.js Application
23. module.exports = new Proxy(console, { get(target, prop, receiver) { return (...args) => { require('fs').appendFile('logger.log', `[${prop}]: ${args}`, 'utf8', err => { if (err) { throw err; } }); return Reflect.apply(target[prop], receiver, args); }; } }); console Λ Proxy
24. > const logger = require('./log.js'); > logger.log('plz log me') plz log me > logger.error('this is an error!') this is an error! > logger.count('cat') cat: 1 > logger.count('dog') dog: 1 > logger.count('cat') cat: 2 console ͱಉ͡ interface
25. $ cat logger.log [log]: plz log me [error]: this is an error! [count]: cat [count]: dog [count]: cat ࣮ߦ࣌ʹϑΝΠϧʹॻ͖ग़͢
26. Get Λ Proxy ͯ͠༡Ϳ
27. ແݶϝιουνΣʔϯ > https://www.keithcirkel.co.uk/metaprogramming-in-es6- part-3-proxies/
28. module.exports = (domain = 'google.com') => { let paths = []; // ঢ়ଶΛ͓࣋ͬͯ͘ // ঢ়ଶΛݩʹURLจࣈྻΛ૊ΈཱͯΔؔ਺ͷఆٛ const buildUrl = () => { const _paths = [...paths]; paths = []; return `https://${domain}/${_paths.join('/')}`; }; return new Proxy(buildUrl, { get(_, prop, receiver) { // propertyΞΫηεΛঢ়ଶͷมߋʹ࢖͏ paths = [...paths, prop]; // chaining͢ΔͨΊʹProxyࣗ਎Λฦͯ͋͛͠Δ return receiver; }, }); };
29. const urlBuilder = require('./urlBuilder.js'); const google = urlBuilder('www.google.co.jp'); > google.image.saikyo.engineer.wannabe(); 'https://www.google.co.jp/image/saikyo/engineer/wannabe' > google.search.cool.javascripters(); 'https://www.google.co.jp/search/cool/javascripters' method missing Ά͍͜ͱ͕Ͱ͖Δ
30. Array Λ Proxy ͯ͠༡Ϳ
31. Πέϝϯͳ Array
32. const parsePropName = prefixCool => { const [, name] = /^cool(\w+)/.exec(prefixCool) || [, null]; return name !== null ? `${name[0].toLowerCase()}${name.slice(1)}` : prefixCool; } module.exports = ({ goodLooking } = { goodLooking: false }) => ( new Proxy([], { get(target, prop, receiver) { const actualPropName = parsePropName(prop); if ( typeof target[actualPropName] !== 'function' || goodLooking || prop.startsWith('cool') ) { return Reflect.get(target, actualPropName, receiver); } throw new TypeError(`Hmm... You'are not my type`); } }) );
33. > const coolArray = require('./coolArray.js')(); undefined > coolArray.push('hey, man.'); TypeError: Hmm... You'are not my type at Object.get (.../proxy/coolArray.js:18:13) > coolArray.coolPush('hey, handsome man.'); 1 > [...coolArray.coolValues()]; [ 'hey, handsome man.' ] cool͍͍ͬͯͪͪݴΘͳ͍ͱ
 ݴ͏͜ͱΛฉ͔ͳ͍ArrayΛ࡞ΕΔ
34. Proxy ָ͍͠
35. ·ͱΊ
36. • ґଘίʔυΛͦͷ··ʹɺґଘϥΠϒϥ ϦΛࣅͨΑ͏ͳผ෺ʹࠩ͠ସ͑Δͱ͖ • ϥΠϒϥϦͱ͔ϑϨʔϜϫʔΫͭ͘Δͱ ͖ • Array.isArray ͕ true Λฦ͢ͷʹ length ͩ ͚͸͓͔͍͠஋Λฦ͢ Array Έ͍ͨͳ΍ ͕ͭඞཁͳͱ͖
37. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠