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 ES2015 Proxy
Search
tipo159
February 22, 2018
Programming
1
550
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
320
ReasonReactとReactのAPIの違い / The Difference between ReasonReact API and React API
tipo159
2
440
REASONの紹介 / Introductory talk about REASON
tipo159
1
360
PWAで何ができるようになるのか / What does PWA do
tipo159
1
870
HNPWAの紹介 / Introductory talk about HNPWA
tipo159
2
530
fetchのCancel Abort方法標準化の変遷 / A History of Cancel Abort Method Standard
tipo159
1
430
Webコンポーネント関連の最新動向 / Recent Topics on Web Components
tipo159
0
540
SlackはどうやってBrowserViewに乗り換えたのか / How Slack move from webview to BrowserView
tipo159
2
4.1k
コンポーネント再利用ってどこまでするの? / How to reuse components
tipo159
0
860
Other Decks in Programming
See All in Programming
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
データカタログ運用物語 〜令和6年夏の理想と現実〜
kuro_kurorrr
0
110
Product Management LT会_クアンド新家
shinshin
0
260
CSC307 Lecture 05
javiergs
PRO
0
210
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
AHC035解説
terryu16
0
730
Activities at Cairo Library
cairolibrary720
0
1.2k
CSC307 Lecture 12
javiergs
PRO
0
220
Play Billing Library 7.0.0 変更点まとめ@potatotips#88
kako351
0
160
最近追加した型の紹介とその振り返り
aki19035vc
0
180
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
Designing for humans not robots
tammielis
247
25k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Building Your Own Lightsaber
phodgson
101
5.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
Teambox: Starting and Learning
jrom
130
8.6k
Typedesign – Prime Four
hannesfritz
37
2.2k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
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