Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
クラスへの割り込み処理とProxyとReflect / method-intercept-wi...
Search
hivesbee
May 24, 2019
Programming
130
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
クラスへの割り込み処理とProxyとReflect / method-intercept-with-proxy-and-reflect
初投稿です。
hivesbee
May 24, 2019
More Decks by hivesbee
See All by hivesbee
組織・プロセス・技術 フロントエンドの生産性向上への複眼的アプローチ
hivesbee
0
38
Design System Meets Vue.js
hivesbee
0
160
mabl を融和させるための取り組み in クラウドサイン / how-to-fusion-mabl-in-cloudsign
hivesbee
0
220
フロントエンドの組織について考える / think-about-front-end-organization
hivesbee
5
3k
ProgressiveにVueを導入している話 / vue-progressive-integration
hivesbee
1
660
ProgressiveにVueを導入している現場から送る小ネタ / vue-progressive-integration-tips-dialog
hivesbee
1
600
Other Decks in Programming
See All in Programming
Generative UI & AI-Assistants for Your Angular Solutions
manfredsteyer
PRO
1
160
エンジニア向け会社紹介/Findy Company Profile
findyinc
6
360k
「正の参照」と 「負の導出」で組む ハーネスエンジニアリング
cottpan
1
130
継続モナドとリアクティブプログラミング
yukikurage
3
480
Semantic Version 単位で戦略を柔軟に変えて、パッケージアップデートを自動化する
daitasu
1
350
Contextとはなにか
chiroruxx
1
390
エンジニアと一緒にテストコードの設計と実装を改善した話
mototakatsu
0
260
音楽のための関数型プログラミング言語mimiumにおける多段階計算の活用
tomoyanonymous
1
300
Observability in Practice:Grafana 與 Edge Device SRE 的那些事
blueswen
0
190
Even G2とAWSで推しのエージェントを召喚しよう!
har1101
1
160
【SRE NEXT 2026 Lunch Session】一人目専任SREの立ち上げを加速する ― AIと進めたオンボーディングで2分を0.04秒にした話
pkshadeck
PRO
0
2.3k
ローカルLLMでどこまでコードが書けるか -縮小版 / How much code can be written on a local LLM Shortened
kishida
2
180
Featured
See All Featured
Heart Work Chapter 1 - Part 1
lfama
PRO
8
36k
Deep Space Network (abreviated)
tonyrice
0
220
The Power of CSS Pseudo Elements
geoffreycrofte
82
6.3k
Skip the Path - Find Your Career Trail
mkilby
1
160
New Earth Scene 8
popppiees
3
2.4k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
2
420
The Illustrated Children's Guide to Kubernetes
chrisshort
51
52k
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
118
120k
Prompt Engineering for Job Search
mfonobong
0
370
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
1
220
Digital Ethics as a Driver of Design Innovation
axbom
PRO
1
340
Fireside Chat
paigeccino
42
4k
Transcript
ΫϥεͷׂΓࠐΈॲཧͱ 1SPYZͱ 3FqFDU XFKT!OE .BTBTIJ)BHBʢ!)JWFTCFFʣ
⾣6ODBVHIU3FGFSFODF&SSPS)BHBJTOPUEFpOFE .BTBTIJ)BHB (JUIVCIJWFTCFF 5XJUUFS!)JWFTCFFʢ;͕͊ʣ 'SPOUFOE&OHJOFFSBU↘ &EJUPS(P-BOE $PNNBOEMPMDBU ❤7VFKT K2VFSZ /BLBNPUP
ࠓ͓͢Δ͜ͱ ϝιουʹର͢ΔׂΓࠐΈΛ࣮ͨͯ͘͠ɺ ͍Ζ͍Ζௐͯপ͚ͬͨͲɺ ݁ہγϯϓϧͳ࣮ʹͳͬͨͱ͍͏ɺ ໎͍ʹ໎ͬͨͱ͖ͷ͓ͳ͠ ࠓͷίʔυɿIUUQTKTpEEMFOFUIJWFTCFFRYHSX[
Ζ͏ͱͨ͜͠ͱ ਆʢϢʔςΟϦςΟʔΫϥεʣݴͬͨʮΤϥʔ͋Εʯ ɹ☝ͷϝιουݺͼग़࣌͠ʹνΣοΫॲཧΛ ɹט·ͤͯͦ͜ͰΤϥʔͩͬͨΒ ɹΤϥʔϋϯυϦϯά͍ͨ͠ʢ෦తʹґଘੑΛೖʣ ɹͱ͍͏ͷΛ#VTJOFTT-PHJDଆͰ࣮͍ͨ͠ 6UJM$MBTT #VTJOFTT -PHJD .FUIPE
Τϥʔ͋Ε &SSPS )BOEMFS ʢ·ͩͳ͍ʣ
Ͳ͏͠Α͏ͱ͔ͨ͠ Ҋ̍ɿ#VTJOFTT-PHJDଆͰίʔυΛॻ͚ʁ ɹˠʢϝιουݺͼग़ͨ͢ͼʹॻ͘ͷʣμϧ͘Ͷʁ Ҋ̎ɿ6UJM$MBTTͷதͰνΣοΫ͢Εʁ ɹˠʢ6UJM$MBTTͷϝιου૿͑ͨͱ͖ʹʣਏ͘Ͷʁ Ҋ̏ɿׂΓࠐΈॲཧͰղܾ͢Εʁ ɹˠͲ͏ͬͯʜʁˠ1SPYZͬͯ͋Δ͡ΌΜʂ 6UJM$MBTT #VTJOFTT -PHJD
.FUIPE Τϥʔ͋Ε &SSPS )BOEMFS ʢ·ͩͳ͍ʣ
࣮ͯ͠Έͨʢࣦഊฤʣ // ׂΓࠐΈॲཧ͞ΕΔ 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 উͬͨͳʂ ෩࿊ೖͬͯ͘Δ Χϓʔ
࣮ͯ͠Έͨʢࣦഊฤʣ JOUFSDFQU IFMMPIBHB JOUFSDFQU 4BNQMFUISPX&SSPS 6TFSTʜUFTUKT UISPXOFX&SSPS BSHT ?
&SSPSTBNQMFFSSPS BU1SPYZUISPX&SSPS 6TFSTʜUFTUKT BU0CKFDUBOPOZNPVT 6TFSTʜUFTUKT ʜ ࣮ߦͨ݁͠Ռʜ ΨνͷΤϥʔൃੜ ʢΤϥʔϋϯυϥͰݕ͍ͯ͠ͳ͍ʣ Χϓʔ
࣮ͯ͠Έͨʢࣦഊฤʣ const handler = { get(target, name, receiver) { try
{ interceptor() return target[name] } catch (e) { onError(e) } } } ݪҼʜ ϝιουͦͷ··ฦͯ͠·͢Μʜ ͦΓΌಈ͖·ͤΜΘʜ ͱͳΔͱIBOEMFSͰॲཧͤͯ͋͛͞ͳ͍ͱʜ ˠͦ͏͍͑3FqFDUͬͯ͋ͬͨͳʜ
࣮ͯ͠Έͨʢޭʁฤʣ 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 ˠ;ͭʔʹಈ͍ͨ
͖ͬ͞ʢ̑࣌ؒલʣࢥͬͨ͜ͱ͚ͩͲ ͪΐͬͱ·ͬͯ ͜Εͬͯ3FqFDUͱ͍͏ΑΓϞδϡʔϧͰॻ͍͔ͨΒ͡ΌͶʁ ͱɺ͍͏͜ͱͰ 3FqFDUͷॲཧΛͯ͠ϞδϡʔϧΛSFUVSO͢Δͱ͚࣮ͩ͜
࣮ͯ͠Έͨʢޭฤʣ const handler = { get(target, name, receiver) { return
(...args) => { try { interceptor() return target[name](...args) } catch (e) { onError(e) } } } } ಈ͍ͨΑʜ ʢमਖ਼ͷϓϧϦΫग़͞ͳ͖Όʜʣ Χϓʔ
·ͱΊ ɾ1SPYZ͚ͩͰׂΓࠐΈॲཧͰ͖Δ ɹ͋Εɺ3FqFDUͬͯͳΜͩʜ ɾਖ਼ɺ͚ࣗͩͰߟ͑ͯ࡞͔ͬͨΒ͜Ε͕ ɹϕετϓϥΫςΟε͔Ͳ͏͔ϫΧϥϯ ɾ;ͩΜ7VFʹ͓ΜͿʹ͔ͩͬͩ͜Βٱ͠ͿΓʹপͬͨ ɾ*OWFSTJGZ+4ʜ ɹͬͪ͜ͷ΄͏ָ͕ʹॻ͚ΔΜͰ͔͢ʜʁ ɹ˞ࡢௐͨ͠Βग़͖ͯͨʜৄ͍͠ਓڭ͑ͯʜ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ Χϓʔʂ