Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy
tipo159
February 22, 2018
Programming
1
420
ES2015 Proxyを使ってみた / Introductory talk about ES2015 Proxy
・Proxy概要
・Vue 3のProxy関連情報
・メタプログラミング
tipo159
February 22, 2018
Tweet
Share
More Decks by tipo159
See All by tipo159
ReasonReactとReactのAPIの違い / The Difference between ReasonReact API and React API
tipo159
2
350
REASONの紹介 / Introductory talk about REASON
tipo159
1
310
PWAで何ができるようになるのか / What does PWA do
tipo159
1
760
HNPWAの紹介 / Introductory talk about HNPWA
tipo159
2
360
fetchのCancel Abort方法標準化の変遷 / A History of Cancel Abort Method Standard
tipo159
1
360
Webコンポーネント関連の最新動向 / Recent Topics on Web Components
tipo159
0
470
SlackはどうやってBrowserViewに乗り換えたのか / How Slack move from webview to BrowserView
tipo159
2
3.5k
コンポーネント再利用ってどこまでするの? / How to reuse components
tipo159
0
820
Webデザイナーに聞きたいこと / Questions to ask web designers
tipo159
0
120
Other Decks in Programming
See All in Programming
よりUXに近いSLI・SLOの運用による可用性の再設計
kazumanagano
3
900
クリエイティブ系のウェブサイト制作で役立つCSS技法 / CSS for develop creative website
clockmaker
2
1.7k
インフラエンジニアの多様性と評価、またはキャリアへのつなげ方 / Careers as infrastructure engineers
katsuhisa91
0
550
スモールチームがAmazon Cognitoでコスパよく作るサービス間連携認証
tacke_jp
2
850
About Type Syntax Proposal
quramy
1
1.2k
Node.js 最新動向 TFCon 2022
yosuke_furukawa
PRO
6
2.9k
Let's make a contract: the art of designing a Java API
mariofusco
0
160
質とスピード(2022春版、質疑応答用資料付き) / Quality and Speed 2022 Spring Edition
twada
PRO
29
19k
既存画面の Jetpack Composeでの書き換え: FAANSでの事例紹介 / Case study of rewriting existing screens with Jetpack Compose
horie1024
0
320
ソフトウェアテストなんて他人事! だと思っていた私が始めた小さな取り組み
izumii19
0
310
Licences open source : entre guerre de clochers et radicalité
pylapp
2
350
CLI構築のススメ
nyankotaro
1
240
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
Intergalactic Javascript Robots from Outer Space
tanoku
261
25k
Designing with Data
zakiwarfel
91
3.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
350
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
29
4.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
12k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
10k
Code Reviewing Like a Champion
maltzj
506
37k
A Philosophy of Restraint
colly
192
14k
The Invisible Customer
myddelton
110
11k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
120k
Transcript
&4ͷ1SPYZΛͬͯΈͨ 8F"SF+BWB4DSJQUFST!UI UJQP
ΞδΣϯμ w ͳͥ1SPYZʹ͍ͭͯ͢ͷ͔ w 1SPYZ֓ཁ w 7VFͷ1SPYZؔ࿈ใ w ϝλϓϩάϥϛϯά 2
ͳͥ1SPYZʹ͍ͭͯ͢ͷ͔ w 3FHBSEJOHUIFCSPLFOQSPNJTFPG8FC $PNQPOFOUTͰ࠶ൃݟ w &4ͷղઆهࣄͰݟͨ͜ͱ͕͋ͬͨɺͬͨ͜ͱ ͳ͔ͬͨ http://robdodson.me/regarding-the-broken-promise- of-web-components/ w
ௐͯΈΔͱɺ7VFʹ࠾༻͞ΕΔΑ͏ͳͷͰհ 3
1SPYZ֓ཁ w جຊతͳૢ࡞ ྫ͑ϓϩύςΟͷݕࡧɺೖɺྻڍɺؔͷىಈͳ Ͳ ʹ͍ͭͯಠࣗͷಈ࡞Λఆٛ wߏจ var p =
new Proxy(target, handler); wҾ target λʔήοτͷΦϒδΣΫτ·ͨɺ1SPYZͰϥοϓ͢Δؔ handler ؔΛϓϩύςΟͱͯ࣋ͭ͠ΦϒδΣΫτ ͦͷؔͰɺ1SPYZʹରͯ͠ૢ࡞͕ߦΘΕͨ߹ͷڍಈΛఆٛ w ิ QͱUBSHFUಉ໊͡લͰΑ͍ 4
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 https://caniuse.com/#feat=proxy
7VFͷ1SPYZؔ࿈ใ w 7VF1SPYZͳͲͷ৽͍͠"1*Λ͏ͨΊɺ*&ͳͲͷݹ͍ϒ ϥβΛαϙʔτ͠ͳ͍ IUUQTIBTIOPEFDPNBNBXJUIWVFKTUFBN DKJUMSLJBFXVWST w 3FBDUJWJUZJO7VFKTWT7VFKT w 7VFKTͰɺྻͷϓϩύςΟͷͷઃఆಈతͳϓϩύ
ςΟͷՃΛ7VFTFUͰߦ͏ඞཁ͕͋Δ w 7VFKTͰɺྻͷϓϩύςΟͷͷઃఆಈతͳϓϩύ ςΟͷՃ1SPYZͰଞͷϓϩύςΟͱಉ༷ʹѻ͑Δ IUUQTCMPHDMPVECPPTUJPSFBDUJWJUZJOWVFKTWTWVFKT EDEEEDEG 7
ಈతଐੑՃͷίʔυ 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
ϝλϓϩάϥϛϯά 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