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
640
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
440
ReasonReactとReactのAPIの違い / The Difference between ReasonReact API and React API
tipo159
2
520
REASONの紹介 / Introductory talk about REASON
tipo159
1
390
PWAで何ができるようになるのか / What does PWA do
tipo159
1
970
HNPWAの紹介 / Introductory talk about HNPWA
tipo159
2
640
fetchのCancel Abort方法標準化の変遷 / A History of Cancel Abort Method Standard
tipo159
1
510
Webコンポーネント関連の最新動向 / Recent Topics on Web Components
tipo159
0
600
SlackはどうやってBrowserViewに乗り換えたのか / How Slack move from webview to BrowserView
tipo159
2
4.3k
コンポーネント再利用ってどこまでするの? / How to reuse components
tipo159
0
910
Other Decks in Programming
See All in Programming
Testing Trophyは叫ばない
toms74209200
0
890
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
旅行プランAIエージェント開発の裏側
ippo012
2
930
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
120
AIでLINEスタンプを作ってみた
eycjur
1
230
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
320
Deep Dive into Kotlin Flow
jmatsu
1
370
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
4.3k
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
570
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Designing for Performance
lara
610
69k
We Have a Design System, Now What?
morganepeng
53
7.8k
4 Signs Your Business is Dying
shpigford
184
22k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
What's in a price? How to price your products and services
michaelherold
246
12k
GitHub's CSS Performance
jonrohan
1032
460k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Why Our Code Smells
bkeepers
PRO
339
57k
How STYLIGHT went responsive
nonsquared
100
5.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