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
ES2015 Proxyを使ってみた / Introductory talk about ES...
Search
tipo159
February 22, 2018
Programming
1
630
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
Type-safe front-end development using Rust/Rustを使った型安全なフロントエンド開発
tipo159
0
430
ReasonReactとReactのAPIの違い / The Difference between ReasonReact API and React API
tipo159
2
510
REASONの紹介 / Introductory talk about REASON
tipo159
1
390
PWAで何ができるようになるのか / What does PWA do
tipo159
1
950
HNPWAの紹介 / Introductory talk about HNPWA
tipo159
2
620
fetchのCancel Abort方法標準化の変遷 / A History of Cancel Abort Method Standard
tipo159
1
490
Webコンポーネント関連の最新動向 / Recent Topics on Web Components
tipo159
0
590
SlackはどうやってBrowserViewに乗り換えたのか / How Slack move from webview to BrowserView
tipo159
2
4.3k
コンポーネント再利用ってどこまでするの? / How to reuse components
tipo159
0
900
Other Decks in Programming
See All in Programming
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
330
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
14
2.9k
コード書くの好きな人向けAIコーディング活用tips #orestudy
77web
3
330
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
130
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
170
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
360
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
500
XP, Testing and ninja testing
m_seki
3
150
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
300
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
960
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
840
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
300
Featured
See All Featured
Making Projects Easy
brettharned
116
6.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Building Applications with DynamoDB
mza
95
6.5k
How to Ace a Technical Interview
jacobian
277
23k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Music & Morning Musume
bryan
46
6.6k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Six Lessons from altMBA
skipperchong
28
3.8k
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