Blog#134: プロキシの設計パターンを使ったJavaScript（Proxy Design Pattern）

こんにちは、私はトゥアンと申します。東京からフルスタックWeb開発者です。 将来の有用で面白い記事を見逃さないように、私のブログをフォローしてください。

概要

プロキシ（Proxy）デザインパターンはJavaScriptで利用できるとても面白い機能です！ プロキシデザインパターンを使えば、関数の呼び出し前後で簡単な操作を行うことができます。 主な利用用途としては、ある関数をそのまま使用できない時に関数すべてに統一的な処理を行うことがあります。

使い方

JavaScript でプロキシデザインパターンを使うには、少し変わった書き方が必要です。 書き方を確認するために、3つの主な利用用途を例に挙げてみます。

簡単なロギングを行う

次のプロキシを使うと、関数を呼び出した時に簡単なロギングを行うことができます。

const myLoggingProxy = {
  apply(target, thisArg, args) {
    console.log('関数が実行されました！', target.name, args);
    return target.apply(thisArg, args);
  }
};

function myFunction(x, y) {
  return x + y;
}

// プロキシを適用
const myProxyFunction = new Proxy(myFunction, myLoggingProxy);

// 関数を実行
console.log(myProxyFunction(3, 5));
// ログ：関数が実行されました！ myFunction [3, 5]

// 結果：8

特定の条件を満たした時に関数を実行する

次のプロキシを使うと、特定の条件を満たす時に関数の評価をスキップできます。

// 条件：x ＝ 4 の時だけ関数を実行
const myConditionProxy = {
  apply(target, thisArg, args) {
    const [x, y] = args;
    if (x !== 4) {
      console.log('関数は実行されませんでした…');
      return;
    }
    return target.apply(thisArg, args);
  }
};

function myFunction(x, y) {
  return x + y;
}

// プロキシを適用
const myProxyFunction = new Proxy(myFunction, myConditionProxy);

// 関数を実行
myProxyFunction(3, 5);
// ログ：関数は実行されませんでした…

// 結果：undefined

メモ化を使って高速化する

次のプロキシを使うと、関数が実行された時に初めて評価するのではなく、前回に評価された際の結果を参照して高速化できます。

const myMemoizeProxy = {
  cache: {},

  apply(target, thisArg, args) {
    const key = JSON.stringify(args);
    if (!this.cache[key]) {
      this.cache[key] = target.apply(thisArg, args);
    }
    return this.cache[key];
  },
};

async function myFunction(x, y) {
  await new Promise((resolve) => {
    console.log("wait 1s...");
    setTimeout(() => {
      resolve();
    }, 1000);
  });
  return x + y;
}

// プロキシを適用
const myProxyFunction = new Proxy(myFunction, myMemoizeProxy);

// 関数を実行
(async () => {
  for (let i = 0; i < 5; i++) {
    console.log(await myProxyFunction(3, 5));
  }
})();
// キャッシュに保管された算出結果が使われます

結果：

wait 1s...
8
8
8
8
8

まとめ

以上のようにプロキシデザインパターンはJavaScriptで利用できるとっても面白い機能です！ プロキシを使うことで、関数の呼び出し前後で簡単な処理を行うことができます。

最後

いつもお世話になっています。この記事を楽しんで、新しいことを学べたら嬉しいです。

今度の記事でお会いしましょう！この記事が気に入ったら、私を応援するために「LIKE」を押して登録してください。ありがとうございました。

---

この記事の主な目的は、日本語レベルを上げるのを手伝うことです。ソフトウェア開発に関連する概念や知識なとを紹介するために簡単な日本語を使います。ITの知識に関しては、インターネット上でもっとよく説明されているかもしれませんが、この記事の主な目標はまだ日本語を学ぶことです。