Proxy を作成する
オブジェクトをラップして操作を横取りします。
「Proxy を作成する」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
Proxyとは
Proxyはオブジェクトをラップし、読み取り、書き込み、プロパティの削除などの基本操作をインターセプトできるようにします。
new Proxy(target, handler)で作成し、handlerに動作をカスタマイズするトラップを定義します。
空のハンドラー
空のハンドラーを使用すると、Proxyはtargetとまったく同じように動作します。すべての操作がそのまま通過します。
const target = { greeting: 'hello' };
const proxy = new Proxy(target, {});
console.log(proxy.greeting);
proxy.greeting = 'hi';
console.log(target.greeting);TargetとProxyは状態を共有する
Proxyはtargetをコピーしません。両者は同じ基盤となるオブジェクトを参照するため、どちらを通して変更しても、もう一方から確認できます。
const target = { count: 0 };
const proxy = new Proxy(target, {});
proxy.count = 5;
console.log(target.count);
target.count = 10;
console.log(proxy.count);getトラップを追加する
getトラップはプロパティの読み取りをインターセプトします。ここでは、値を返す前にすべての読み取りをログに記録します。
const proxy = new Proxy({ name: 'Ada' }, {
get(target, prop) {
console.log('reading ' + prop);
return target[prop];
}
});
console.log(proxy.name);トラップの引数
getトラップは、target、property名、receiver（Proxy）を受け取ります。何を返すかは自分で決められます。
const proxy = new Proxy({ a: 1 }, {
get(target, prop) {
return prop in target ? target[prop] : 'missing';
}
});
console.log(proxy.a);
console.log(proxy.b);読み取り時の計算プロパティ
getトラップは、targetが実際には保持していない値を返し、オンデマンドで計算できます。
const proxy = new Proxy({ first: 'Ada', last: 'Lovelace' }, {
get(target, prop) {
if (prop === 'full') return target.first + ' ' + target.last;
return target[prop];
}
});
console.log(proxy.full);setトラップを追加する
setトラップは書き込みをインターセプトします。成功を示すにはtrueを返す必要があり、そうしないと代入は失敗したものとして扱われます。
const proxy = new Proxy({}, {
set(target, prop, value) {
console.log('setting ' + prop + ' = ' + value);
target[prop] = value;
return true;
}
});
proxy.score = 42;
console.log(proxy.score);hasトラップ
hasトラップはin演算子をインターセプトし、メンバーシップのチェック方法をカスタマイズできるようにします。
const proxy = new Proxy({ a: 1 }, {
has(target, prop) {
console.log('checking ' + prop);
return prop in target;
}
});
console.log('a' in proxy);
console.log('b' in proxy);deletePropertyトラップ
deletePropertyトラップはdeleteをインターセプトします。成功した場合はtrueを返します。
const proxy = new Proxy({ secret: 'x', ok: 'y' }, {
deleteProperty(target, prop) {
console.log('deleting ' + prop);
delete target[prop];
return true;
}
});
delete proxy.secret;
console.log(Object.keys(proxy));利用できる多くのトラップ
getとset以外にも、Proxyはhas、deleteProperty、ownKeys、関数用のapply、constructなどのトラップに対応しています。必要なものだけを実装します。
const proxy = new Proxy({ x: 1, y: 2 }, {
ownKeys(target) {
console.log('listing keys');
return Object.keys(target);
}
});
console.log(Object.keys(proxy));Proxyが重要な理由
Proxyを使うと、targetオブジェクトを変更せずに、バリデーション、ログ記録、デフォルト値、リアクティビティなどを追加できます。Vueのリアクティビティシステムのようなフレームワークを支えています。次はgetトラップとsetトラップについてさらに詳しく学びます。
const logged = new Proxy({ v: 0 }, {
get: (t, p) => { console.log('get ' + p); return t[p]; },
set: (t, p, val) => { console.log('set ' + p); t[p] = val; return true; }
});
logged.v = 9;
console.log(logged.v);理解度チェック
new Proxy(target, handler)は何を作成しますか。
まとめ：Proxyの作成
オブジェクトの操作をインターセプトする方法を学びました。
new Proxy(target, handler)は、トラップを備えたラッパーでオブジェクトを包みます。- 空のハンドラーではすべての操作がそのまま通過し、Proxyとtargetは状態を共有します。
- 一般的なトラップには
get、set、has、deleteProperty、ownKeysがあります。 - setトラップとdeleteトラップは、成功時に
trueを返す必要があります。
よくある質問
「Proxy を作成する」レッスンは無料ですか？
はい。「Proxy を作成する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「Proxy を作成する」で何を学びますか？
オブジェクトをラップして操作を横取りします。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「Proxy を作成する」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Proxy を作成する
- get と set のトラップ
- Reflect API
- Proxy の実践的な活用例