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
610
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
400
ReasonReactとReactのAPIの違い / The Difference between ReasonReact API and React API
tipo159
2
480
REASONの紹介 / Introductory talk about REASON
tipo159
1
380
PWAで何ができるようになるのか / What does PWA do
tipo159
1
920
HNPWAの紹介 / Introductory talk about HNPWA
tipo159
2
600
fetchのCancel Abort方法標準化の変遷 / A History of Cancel Abort Method Standard
tipo159
1
470
Webコンポーネント関連の最新動向 / Recent Topics on Web Components
tipo159
0
570
SlackはどうやってBrowserViewに乗り換えたのか / How Slack move from webview to BrowserView
tipo159
2
4.2k
コンポーネント再利用ってどこまでするの? / How to reuse components
tipo159
0
890
Other Decks in Programming
See All in Programming
昭和の職場からアジャイルの世界へ
kumagoro95
1
380
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
780
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
47
17k
Rails アプリ地図考 Flush Cut
makicamel
1
120
時計仕掛けのCompose
mkeeda
1
300
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
0
140
楽しく向き合う例外対応
okutsu
0
110
Immutable ActiveRecord
megane42
0
140
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
210
Linux && Docker 研修/Linux && Docker training
forrep
24
4.5k
Grafana Cloudとソラカメ
devoc
0
170
Unity Android XR入門
sakutama_11
0
160
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Gamification - CAS2011
davidbonilla
80
5.1k
KATA
mclloyd
29
14k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
We Have a Design System, Now What?
morganepeng
51
7.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Making Projects Easy
brettharned
116
6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
The Invisible Side of Design
smashingmag
299
50k
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