Proxy でオブジェクト挙動をカスタム — new Proxy(obj, { get(target, k) { } })
JavaScript の Proxy は「オブジェクトの操作を横取りしてカスタマイズできる仕組み」です。
初心者は「オブジェクトにアクセスするときに、裏で監視や加工ができる魔法のラッパー」と覚えると理解しやすいです。
基本のコード例
const obj = { a: 1, b: 2 };
const proxy = new Proxy(obj, {
get(target, key) {
console.log(`プロパティ ${key} にアクセスしました`);
return target[key];
}
});
console.log(proxy.a); // → 1 （ログも出る）
console.log(proxy.b); // → 2
new Proxy(obj, handler)obj: 元のオブジェクトhandler: 操作を横取りする関数群（get,set, など）
get(target, key)→ プロパティ取得時に呼ばれる。
よく使うテンプレート集
存在しないプロパティにデフォルト値を返す
const obj = { name: "Aki" };
const proxy = new Proxy(obj, {
get(target, key) {
return key in target ? target[key] : "未定義";
}
});
console.log(proxy.name); // → "Aki"
console.log(proxy.age); // → "未定義"
値を自動的に変換する
const obj = { price: 100 };
const proxy = new Proxy(obj, {
get(target, key) {
if (key === "priceWithTax") {
return target.price * 1.1;
}
return target[key];
}
});
console.log(proxy.price); // → 100
console.log(proxy.priceWithTax); // → 110
書き込みを監視する（set）
const obj = {};
const proxy = new Proxy(obj, {
set(target, key, value) {
console.log(`プロパティ ${key} に ${value} を設定しました`);
target[key] = value;
return true; // 成功を示す
}
});
proxy.x = 10; // → ログ出力
console.log(obj.x); // → 10
例題: 入力チェックをする Proxy
const user = {};
const proxy = new Proxy(user, {
set(target, key, value) {
if (key === "age" && typeof value !== "number") {
throw new Error("age は数値でなければなりません");
}
target[key] = value;
return true;
}
});
proxy.age = 20; // OK
// proxy.age = "20"; // エラー
- 効果: プロパティに値を設定するときにチェックできる。
実務でのコツ
- 監視やバリデーションに便利: 値のチェックやログ出力に使える。
- 動的なプロパティ生成: 存在しないキーにアクセスしたときに自動で値を返す。
- ライブラリやフレームワークでよく使われる: Vue.js や MobX などのリアクティブシステムで Proxy が活躍。
- 返り値に注意:
setは必ずtrueを返す必要がある。
ありがちなハマりポイントと対策
- Proxy はラッパー:
proxyを通してアクセスすると挙動が変わるが、元のobjに直接アクセスすると普通の動作になる。 - パフォーマンス: Proxy は便利だが、頻繁に使うと処理が重くなる場合がある。
- JSON.stringify に注意: Proxy はシリアライズ時に特殊な挙動をすることがある。
練習問題（ログ付きオブジェクト）
const obj = { x: 1, y: 2 };
const proxy = new Proxy(obj, {
get(target, key) {
console.log(`アクセス: ${key}`);
return target[key];
}
});
console.log(proxy.x); // → 1 （ログ: アクセス: x）
console.log(proxy.y); // → 2 （ログ: アクセス: y）
直感的な指針
Proxy= オブジェクトの操作を横取りしてカスタムできるラッパー。getで読み取りを制御、setで書き込みを制御。- デフォルト値、バリデーション、ログ出力などに便利。
- 初心者は「ログ出力」「デフォルト値」「入力チェック」で練習すると理解が深まる。
これを覚えれば「オブジェクトの挙動を自由にカスタマイズ」できるようになり、フレームワークの仕組みも理解しやすくなります。