Tweet
Tweet

Slide 1

Slide 1 text

Ϋϥε΁ͷׂΓࠐΈॲཧͱ
 1SPYZͱ 3FqFDU XFKT!OE .BTBTIJ)BHBʢ!)JWFTCFFʣ

Slide 2

Slide 2 text

⾣6ODBVHIU3FGFSFODF&SSPS)BHBJTOPUEFpOFE .BTBTIJ)BHB (JUIVCIJWFTCFF
 5XJUUFS!)JWFTCFFʢ;͕͊ʣ 'SPOUFOE&OHJOFFSBU↘ &EJUPS(P-BOE
 $PNNBOEMPMDBU ❤7VFKT K2VFSZ /BLBNPUP

Slide 3

Slide 3 text

ࠓ೔͓࿩͢Δ͜ͱ ϝιουʹର͢ΔׂΓࠐΈΛ࣮૷ͨͯ͘͠ɺ ͍Ζ͍Ζௐ΂ͯপ͚ͬͨͲɺ ݁ہγϯϓϧͳ࣮૷ʹͳͬͨͱ͍͏ɺ ໎͍ʹ໎ͬͨͱ͖ͷ͓͸ͳ͠ ࠓ೔ͷίʔυɿIUUQTKTpEEMFOFUIJWFTCFFRYHSX[

Slide 4

Slide 4 text

΍Ζ͏ͱͨ͜͠ͱ ਆʢϢʔςΟϦςΟʔΫϥεʣ͸ݴͬͨʮΤϥʔ͋Εʯ ɹ☝ͷϝιουݺͼग़࣌͠ʹνΣοΫॲཧΛ
 ɹט·ͤͯͦ͜ͰΤϥʔͩͬͨΒ
 ɹΤϥʔϋϯυϦϯά͍ͨ͠ʢ෦෼తʹґଘੑΛ஫ೖʣ ɹͱ͍͏ͷΛ#VTJOFTT-PHJDଆͰ࣮૷͍ͨ͠ 6UJM$MBTT #VTJOFTT
 -PHJD .FUIPE Τϥʔ͋Ε &SSPS
 )BOEMFS
 ʢ·ͩͳ͍ʣ

Slide 5

Slide 5 text

Ͳ͏͠Α͏ͱ͔ͨ͠ Ҋ̍ɿ#VTJOFTT-PHJDଆͰίʔυΛॻ͚͹ʁ
 ɹˠʢϝιουݺͼग़ͨ͢ͼʹॻ͘ͷ͸ʣμϧ͘Ͷʁ Ҋ̎ɿ6UJM$MBTTͷதͰνΣοΫ͢Ε͹ʁ
 ɹˠʢ6UJM$MBTTͷϝιου૿͑ͨͱ͖ʹʣਏ͘Ͷʁ Ҋ̏ɿׂΓࠐΈॲཧͰղܾ͢Ε͹ʁ ɹˠͲ͏΍ͬͯʜʁˠ1SPYZͬͯ͋Δ͡ΌΜʂ 6UJM$MBTT #VTJOFTT
 -PHJD .FUIPE Τϥʔ͋Ε &SSPS
 )BOEMFS
 ʢ·ͩͳ͍ʣ

Slide 6

Slide 6 text

࣮૷ͯ͠Έͨʢࣦഊฤʣ // ׂΓࠐΈॲཧ͞ΕΔ Utility Ϋϥε class _Util { static greet(name) { console.log(`hello! ${name}!`) } static throwError(...args) { console.log(‘Sample#throwError') // ͜͜ͰΤϥʔ͕ى͜Δ throw new Error(...args) } } // Proxy ʹΘͨ͢ϋϯυϥ const handler = { get(target, name, receiver) { try { interceptor() return target[name] } catch (e) { onError(e) } } } // ͍ͭ͜ΒΛ export export let interceptor // ׂΓࠐΈॲཧ༻ export let onError // Τϥʔϋϯυϥ export const Util = new Proxy(_Util, handler) // ׂΓࠐΈॲཧͷ࣮૷ interceptor = () => { console.log('intercept!') } onError = (e) => { console.log('onError!') console.log(e) } // ࣮ࡍʹݺͼग़͢ Util.greet('haga') Util.throwError('sample error') 6UJM$MBTTKT #VTJOFTT-PHJDKT উͬͨͳʂ ෩࿊ೖͬͯ͘Δ Χϓʔ

Slide 7

Slide 7 text

࣮૷ͯ͠Έͨʢࣦഊฤʣ JOUFSDFQU IFMMPIBHB JOUFSDFQU 4BNQMFUISPX&SSPS 6TFSTʜUFTUKT UISPXOFX&SSPS BSHT  ? &SSPSTBNQMFFSSPS BU1SPYZUISPX&SSPS 6TFSTʜUFTUKT  BU0CKFDUBOPOZNPVT 6TFSTʜUFTUKT  ʜ ࣮ߦͨ݁͠Ռʜ ΨνͷΤϥʔൃੜ
 ʢΤϥʔϋϯυϥͰݕ஌͍ͯ͠ͳ͍ʣ ૲ Χϓʔ

Slide 8

Slide 8 text

࣮૷ͯ͠Έͨʢࣦഊฤʣ const handler = { get(target, name, receiver) { try { interceptor() return target[name] } catch (e) { onError(e) } } } ݪҼ͸ʜ ϝιουͦͷ··ฦͯ͠·͢΍Μʜ
 ͦΓΌಈ͖·ͤΜΘʜ ͱͳΔͱIBOEMFS಺Ͱॲཧͤͯ͋͛͞ͳ͍ͱʜ
 ˠͦ͏͍͑͹3FqFDUͬͯ͋ͬͨͳʜ

Slide 9

Slide 9 text

࣮૷ͯ͠Έͨʢ੒ޭʁฤʣ const handler = { get(target, name, receiver) { return (...args) => { const apiMethod = Reflect.get(target, name, receiver) const boundApiMethod = apiMethod.bind(target) try { interceptor() return boundApiMethod(...args) } catch (e) { onError(e) } } } } const handler = { get(target, name, receiver) { try { interceptor() return target[name] } catch (e) { onError(e) } } } 3FqFDUHFUͰϝιουΛऔΓग़ͯ͠ॲཧ
 ΤϥʔϋϯυϦϯά·ͰؚΊͨॲཧΛSFUVSO ΍͔ͬͨʁ Χϓʔ #FGPSF "GUFS ˠ;ͭʔʹಈ͍ͨ

Slide 10

Slide 10 text

͖ͬ͞ʢ̑࣌ؒલʣࢥͬͨ͜ͱ͚ͩͲ ͪΐͬͱ·ͬͯ
 
 ͜Εͬͯ3FqFDUͱ͍͏ΑΓϞδϡʔϧͰॻ͍͔ͨΒ͡ΌͶʁ ͱɺ͍͏͜ͱͰ
 3FqFDUͷॲཧΛ໭ͯ͠ϞδϡʔϧΛSFUVSO͢Δͱ͚࣮ͩ͜૷

Slide 11

Slide 11 text

࣮૷ͯ͠Έͨʢ੒ޭฤʣ const handler = { get(target, name, receiver) { return (...args) => { try { interceptor() return target[name](...args) } catch (e) { onError(e) } } } } ಈ͍ͨΑʜ
 ʢमਖ਼ͷϓϧϦΫग़͞ͳ͖Όʜʣ ૲ Χϓʔ

Slide 12

Slide 12 text

·ͱΊ ɾ1SPYZ͚ͩͰׂΓࠐΈॲཧ͸Ͱ͖Δ
 ɹ͋Εɺ3FqFDUͬͯͳΜͩʜ ɾਖ਼௚ɺࣗ෼͚ͩͰߟ͑ͯ࡞͔ͬͨΒ͜Ε͕
 ɹϕετϓϥΫςΟε͔Ͳ͏͔ϫΧϥϯ ɾ;ͩΜ͸7VFʹ͓ΜͿʹ͔ͩͬͩ͜Βٱ͠ͿΓʹপͬͨ ɾ*OWFSTJGZ+4ʜ
 ɹͬͪ͜ͷ΄͏ָ͕ʹॻ͚ΔΜͰ͔͢ʜʁ ɹ˞ࡢ೔ௐ΂௚ͨ͠Βग़͖ͯͨʜৄ͍͠ਓڭ͑ͯʜ

Slide 13

Slide 13 text

͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ Χϓʔʂ