Proxy パターンとは？例でわかりやすく解説

目的と解決する問題

目的：別のオブジェクトへのアクセスを制御するために、その代理または代替物を提供することです。Proxy は Gang of Four（GoF）の書籍にある構造パターンの 1 つです。

アプリがネットワーク越しに天気サービスを呼び出すとします。1 回の呼び出しに数百ミリ秒かかり、料金も発生しますが、同じ都市が 1 分間に何度も要求されることがよくあります。サービスのクラスは変更できず、呼び出し側のあらゆる場所にキャッシュのコードを足したくもありません。そこでプロキシを使います。プロキシは同じインターフェースを実装し、キャッシュを持ち、キャッシュミスのときだけ本物のサービスを呼び出します。呼び出し側は一切変更する必要がありません。

同じ考え方は、ほかの用途にも使えます。高コストなオブジェクトを最初に使われたときだけ生成する、呼び出しの前に権限を確認する、すべての呼び出しをログに記録する、本物のオブジェクトが別のマシンにあることを隠す、などです。

構造と登場する役割

TypeScript での実装：キャッシュプロキシ

WeatherService が Subject です。CachedWeatherService がプロキシで、同じメソッドを持ち、キャッシュした値がない場合か古すぎる場合にだけ本物のサービスへ転送します。

interface WeatherService {
  getTemperature(city: string): Promise<number>;
}
class RemoteWeatherService implements WeatherService {
  calls = 0;
  async getTemperature(city: string): Promise<number> {
    this.calls++; // imagine a slow HTTP request here
    return city.length * 3;
  }
}
class CachedWeatherService implements WeatherService {
  private cache = new Map<string, { value: number; time: number }>();
  constructor(private real: WeatherService, private maxAgeMs = 60_000) {}
  async getTemperature(city: string): Promise<number> {
    const hit = this.cache.get(city);
    if (hit && Date.now() - hit.time < this.maxAgeMs) return hit.value;
    const value = await this.real.getTemperature(city);
    this.cache.set(city, { value, time: Date.now() });
    return value;
  }
}
async function main() {
  const real = new RemoteWeatherService();
  const weather: WeatherService = new CachedWeatherService(real);
  await weather.getTemperature("Paris");
  await weather.getTemperature("Paris");
  console.log(await weather.getTemperature("Hanoi"), "real calls:", real.calls);
  // 15 real calls: 2
}
main();

クライアント側の変数は WeatherService 型なので、たとえば依存性注入の設定など、1 か所で本物のサービスとプロキシを切り替えられます。

JavaScript の Proxy による仮想・保護プロキシ

JavaScript には組み込みの Proxy オブジェクト（ES2015）があり、プロパティの読み取り・書き込み・関数呼び出しといった操作を、トラップと呼ばれるハンドラ関数で横取りできます。インターフェースごとにクラスを書かなくてもプロキシを作れる便利な手段です。

type Account = { owner: string; balance: number };
function readOnly<T extends object>(target: T): T {
  return new Proxy(target, {
    set(_obj, prop) {
      throw new Error("Cannot change " + String(prop) + ": read-only");
    },
  });
}
const account = readOnly<Account>({ owner: "Ana", balance: 100 });
console.log(account.balance); // 100
try {
  account.balance = 0;
} catch (e) {
  console.log((e as Error).message); // Cannot change balance: read-only
}

使うべき場面と避けるべき場面

• 本物のクラスや呼び出し側を変えずに、遅延ロード、アクセス制御、キャッシュ、ログ記録、リモートアクセスを加えたいときに使います。
• ライブラリのクラスやネットワーククライアントのように、本物のオブジェクトを自分では変更できないときに使います。
• 単純な関数ラッパーで足りるときは使いません。関数 1 つなら、クラスよりも memoize(fn) のような高階関数のほうが簡単です。
• 遅い、または失敗するリモート呼び出しを、ローカルに見えるプロキシの陰に隠さないでください。呼び出し側は遅延とエラーを処理する必要があるため、インターフェースでそれを明示します（たとえば Promise を返す）。
• 同一性に注意しましょう。プロキシは本物の Subject とは別のオブジェクトなので、proxy === real は false になります。

実際の利用例

• Vue 3 は、リアクティビティシステムを JavaScript の Proxy で構築しています。プロパティを読み取ると依存関係が記録され、書き込むと更新が実行されます。
• Java には、実行時に動的なプロキシクラスを作る java.lang.reflect.Proxy があります。フレームワークはこれを使って、インターフェースの周りにトランザクション、セキュリティチェック、リモート呼び出しを追加します。
• Hibernate のようなオブジェクトリレーショナルマッパーは、関連するエンティティに遅延プロキシを返し、最初にアクセスされたときにデータベースから本物のデータを読み込みます。
• リモートプロシージャコール（RPC）ライブラリは、ローカルのオブジェクトのように見えて、呼び出しのたびにネットワークへ送信するクライアントスタブを生成します。

関連するパターン