ドキュメント価格ブログ
お問い合わせ
ログイン無料で新規登録
Back to Tech Articles

JavaScriptプロキシによる動的インターフェース構築

10月 13, 2025
# Misc

Ethan Miller

Product Engineer · Leapcell

この記事はEnglish、한국어、Deutschでも利用できます
Cover of "JavaScriptプロキシによる動的インターフェース構築"

はじめに

現代のウェブ開発において、データソースや外部APIとのやり取りは中心的なタスクです。多くの場合、クエリの構築、データのシリアライズ処理、さまざまなAPI構造への適応のために、繰り返し使われる定型コードが必要になります。

メソッド呼び出しから開発者の意図を魔法のように推測し、より表現力豊かで冗長性の低いコードを書けるようになる世界を想像してみてください。そこでJavaScript Proxyの真の力が発揮されます。Proxyは、オブジェクトの基本的な操作をインターセプト（傍受）およびカスタマイズするためのユニークな方法を提供し、非常に動的で柔軟なプログラミングパラダイムへの扉を開きます。

この記事では、この強力な機能を活用して、コンパクトでありながら効果的なミニORMや動的APIクライアントを構築する方法を探り、そのようなシステムを可能にする根本的な原則を理解します。

JavaScriptプロキシのコアコンセプト

実装を掘り下げる前に、関連する主要な概念をしっかりと理解しましょう。

プロキシとは？

JavaScriptのProxyは、別のオブジェクトまたは関数をラップするオブジェクトであり、ラップされたオブジェクトに対して実行される基本的な操作（プロパティのルックアップ、代入、関数の呼び出しなど）をインターセプトおよびカスタマイズできます。これは仲介者として機能し、オブジェクトの動作へのフックを提供します。

ターゲットとハンドラ

A Proxyコンストラクタは2つの引数を取ります。

  • target: Proxyが仮想化するオブジェクト。これはProxyが操作する基盤となるオブジェクトです。トラップが定義されていない場合、Proxyへの操作は直接targetに転送されます。
  • handler: 「トラップ」を含むオブジェクト。これは、Proxyに対する特定の操作をインターセプトするメソッドです。各トラップは基本的な操作（例: get、set、apply）に対応します。

トラップ

トラップはProxy機能の中核です。これらは、特定の操作をインターセプトするhandlerオブジェクト上のメソッドです。今回の目的で最も関連性の高いトラップは次のようになります。

  • get(target, prop, receiver): プロパティアクセスをインターセプトします。Proxyからプロパティを読み取ろうとすると、このトラップが呼び出されます。
    • target: プロキシされている元のオブジェクト。
    • prop: アクセスされているプロパティの名前。
    • receiver: Proxy自体、またはプロパティがプロトタイプチェーン経由でアクセスされた場合のProxyを継承するオブジェクト。
  • apply(target, thisArg, argumentsList): 関数呼び出しをインターセプトします。targetが関数であり、Proxyを関数として呼び出した場合、このトラップが呼び出されます。
    • target: プロキシされている元の関数。
    • thisArg: 関数呼び出しのthisコンテキスト。
    • argumentsList: 関数に渡された引数の配列。

プロキシによるミニORMの構築

プロキシの力を、より自然でオブジェクト指向的な方法でデータベースクエリを構築できる、簡略化されたリレーショナルオブジェクトマッパー（ORM）を構築することで示しましょう。

問題

従来のデータベースインタラクションでは、SQL文字列の記述や冗長なクエリビルダーの使用が多くなりがちです。一般的な願望は、データベーステーブルや行をJavaScriptオブジェクトとメソッドとして表現することです。

プロキシ搭載ソリューション

私たちのミニORMは、db.users.where('age').gt(25).orderBy('name').fetch()のようなコードを書けるようにします。

class QueryBuilder {
    constructor(tableName) {
        this.tableName = tableName;
        this.conditions = [];
        this.orderByClause = null;
        this.limitClause = null;
    }

    where(field) {
        // 比較演算子を動的に処理するProxyを返します
        return new Proxy({}, {
            get: (target, operator) => {
                return (value) => {
                    this.conditions.push({ field, operator, value });
                    return this; // チェーンを可能にする
                };
            }
        });
    }

    orderBy(field, direction = 'ASC') {
        this.orderByClause = { field, direction };
        return this;
    }

    limit(count) {
        this.limitClause = count;
        return this;
    }

    fetch() {
        // データベースインタラクションをシミュレートし、Promiseを返します
        let queryParts = [`SELECT * FROM ${this.tableName}`];

        if (this.conditions.length > 0) {
            const conditionStrings = this.conditions.map(c => {
                switch (c.operator) {
                    case 'eq': return `${c.field} = '${c.value}'`;
                    case 'gt': return `${c.field} > ${c.value}`;
                    case 'lt': return `${c.field} < ${c.value}`;
                    default: return ''; // 基本的な処理
                }
            });
            queryParts.push(`WHERE ${conditionStrings.join(' AND ')}`);
        }

        if (this.orderByClause) {
            queryParts.push(`ORDER BY ${this.orderByClause.field} ${this.orderByClause.direction}`);
        }

        if (this.limitClause) {
            queryParts.push(`LIMIT ${this.limitClause}`);
        }

        const simulatedQuery = queryParts.join(' ');
        console.log(`Executing query: ${simulatedQuery}`);

        // 実際のORMでは、これはデータベースドライバーと対話します
        return new Promise(resolve => {
            setTimeout(() => {
                console.log(`Simulating results for: ${this.tableName}`);
                resolve([
                    { id: 1, name: 'Alice', age: 30 },
                    { id: 2, name: 'Bob', age: 25 },
                    { id: 3, name: 'Charlie', age: 35 }
                ]);
            }, 500);
        });
    }
}

// Proxyを使用したデータベースファサード
const db = new Proxy({}, {
    get: (target, tableName) => {
        // db.tableNameにアクセスがあった場合、そのテーブルの新しいQueryBuilderを作成します
        return new QueryBuilder(tableName);
    }
});

// 使用例
async function runQueryExample() {
    console.log('--- ORM Example ---');
    const users = await db.users.where('age').gt(28).orderBy('name', 'DESC').limit(5).fetch();
    console.log('Fetched users:', users);

    const oldUsers = await db.users.where('age').lt(32).fetch();
    console.log('Fetched old users:', oldUsers);
}

runQueryExample();

この例では：

  1. dbはプロパティアクセスをインターセプトするProxyです。db.usersにアクセスしようとすると、dbのgetトラップがアクティブになります。
  2. getトラップは、usersテーブルのQueryBuilderをインスタンス化します。これにより、アクセスされたプロパティ名に基づいてクエリコンテキストを動的に作成できます。
  3. QueryBuilderのwhereメソッドは、それ自体が別のProxyを返します。この内部Proxyは、さらなるプロパティアクセス（.gt、.lt、.eqなど）をインターセプトします。この巧妙なレイヤリングにより、比較演算子を直接チェーンできます。.gtがアクセスされると、内部プロキシのgetトラップはvalueを受け取る関数を返し、条件を構築して、さらなるチェーンのためにQueryBuilderを返します。

動的APIクライアントの構築

同じProxyの原則を、さまざまなエンドポイントやHTTPメソッドに適応する非常に柔軟なAPIクライアントを作成するために適用できます。

問題

RESTful APIは、しばしば一貫したパターンに従います: /users、/products/123、POST /users、GET /products。各エンドポイントとメソッドのfetch呼び出しを手動で記述するのは面倒になる可能性があります。

プロキシ搭載ソリューション

api.users.get()、api.products(123).delete()、またはapi.posts.create({ title: 'New Post' })のようなことを達成したいと考えています。

class ApiClient {
    constructor(baseUrl = '') {
        this.baseUrl = baseUrl;
    }

    _request(method, path, data = null) {
        const url = `${this.baseUrl}${path}`;
        console.log(`Making ${method} request to: ${url}`, data ? `with data: ${JSON.stringify(data)}` : '');

        // ネットワークリクエストをシミュレート
        return new Promise(resolve => {
            setTimeout(() => {
                if (method === 'GET') {
                    if (path.includes('users') && !path.includes('/')) {
                        resolve([{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]);
                    } else if (path.includes('products/')) {
                        resolve({ id: parseInt(path.split('/').pop()), name: 'Product ' + path.split('/').pop() });
                    } else {
                        resolve({ message: `${method} ${path} successful` });
                    }
                } else if (method === 'POST') {
                    resolve({ id: Math.floor(Math.random() * 1000), ...data, status: 'created' });
                } else if (method === 'PUT') {
                    resolve({ id: path.split('/').pop(), ...data, status: 'updated' });
                } else if (method === 'DELETE') {
                    resolve({ id: path.split('/').pop(), status: 'deleted' });
                }
            }, 300);
        });
    }

    // 特定のパスセグメント（例: 'users'、'products'）に対応するProxyを作成します
    createPathProxy(currentPath) {
        return new Proxy(() => {}, { // applyトラップのためにターゲットは空の関数
            get: (target, prop) => {
                if (['get', 'post', 'put', 'delete'].includes(prop)) {
                    // メソッドにアクセスした場合（例: api.users.get）
                    return (data) => this._request(prop.toUpperCase(), currentPath, data);
                }
                // 別のパスセグメントにアクセスした場合（例: api.users.posts）
                return this.createPathProxy(`${currentPath}/${String(prop)}`);
            },
            apply: (target, thisArg, argumentsList) => {
                // Proxyが関数として呼び出された場合（例: api.products(123)）
                const id = argumentsList[0];
                return this.createPathProxy(`${currentPath}/${id}`);
            }
        });
    }
}

const api = new Proxy(new ApiClient('https://api.example.com'), {
    get: (target, prop) => {
        if (target[prop]) {
            // ApiClientインスタンスにプロパティが存在する場合（例: `baseUrl`）
            return Reflect.get(target, prop);
        }
        // それ以外の場合、APIパスの開始とみなします（例: api.users）
        return target.createPathProxy(`/${String(prop)}`);
    }
});

// 使用例
async function runApiClientExample() {
    console.log('
--- API Client Example ---');
    const allUsers = await api.users.get();
    console.log('All Users:', allUsers);

    const specificProduct = await api.products(123).get();
    console.log('Specific Product:', specificProduct);

    const newUser = await api.users.post({ name: 'Charlie', email: 'charlie@example.com' });
    console.log('New User:', newUser);

    const updatedProduct = await api.products(456).put({ price: 29.99 });
    console.log('Updated Product:', updatedProduct);

    const deletedPost = await api.blog.posts(789).delete();
    console.log('Deleted Post:', deletedPost);
}

runApiClientExample();

このAPIクライアントの例では：

  1. 初期のapiオブジェクトはApiClientインスタンスのProxyです。そのgetトラップはapi.usersのような呼び出しをインターセプトします。
  2. api.usersがアクセスされると、getトラップがtarget.createPathProxy('/users')を呼び出します。
  3. createPathProxyは別のProxyを返します。この内部Proxyには2つの重要なトラップがあります。
    • getトラップ: get、post、put、deleteがアクセスされた場合（例: api.users.get）、実際のHTTPリクエストを実行する関数を返します。別のパスセグメントがアクセスされた場合（例: api.users.comments）、パスをさらに長くするためにcreatePathProxyを再帰的に呼び出します。
    • applyトラップ: Proxyが関数として呼び出された場合（例: api.products(123)）、applyトラップは引数（通常はID）を受け取り、パスを拡張して、さらに別のProxyを返します。

getとapplyトラップに基づくこの動的なチェーンにより、ルートをハードコーディングすることなく、非常に直感的で柔軟なAPIインタラクションが可能になります。

内部メカニズム

これらの実装の背後にある魔法は、Proxyが基本的な操作をインターセプトし、動的に新しいProxyインスタンスを生成したり、関数を返したりする機能にあります。

  • 遅延評価と動的生成: すべての可能なメソッドまたはルートを事前に定義する代わりに、Proxyを使用すると、操作が実際に試行されるまでロジックを延期できます。db.usersがアクセスされるとQueryBuilderが作成され、api.users.getが呼び出されるとGETリクエストが構築されます。
  • Proxyのチェーン: 例では、1つのProxyが別のProxyを返す方法（例: dbがQueryBuilderを返し、そのwhereメソッドがProxy自体を返す）を示しています。これにより、複雑なマルチセグメントメソッドチェーンが可能になります。
  • コンテキストに応じたトラップロジック: API Clientのgetトラップは、prop名を動的にチェックします。getまたはpostの場合、リクエストを実行します。それ以外の場合、別のパスセグメントとみなしてURLを拡張します。これは、トラップロジックが非常にコンテキストに応じてどのように行えるかを示しています。
  • Reflect API: これらの特定の例ではあまり使用されていませんが、Reflect APIはProxyトラップをミラーリングする静的メソッドを提供します。これは、特定のトラップに対してカスタム動作が不要な場合、デフォルトの動作が維持されるように、トラップ内で（例: Reflect.get(target, prop, receiver)）操作を元のターゲットに転送するためにしばしば使用されます。

結論

JavaScriptプロキシは驚くほど強力な機能であり、開発者は高度に抽象化された表現力豊かで動的なインターフェースを構築できます。getとapplyトラップを理解し活用することで、メソッド呼び出しをデータベースクエリに変換するミニORMや、オブジェクトのトラバーサルをAPIエンドポイントにシームレスにマッピングする動的APIクライアントのような洗練されたツールを作成できます。

これらは、より宣言的で、定型コードの記述を減らし、アプリケーションをより適応可能で開発しやすいものにする力を与えてくれます。Proxyは、オブジェクトとの対話方法を根本的に変え、エレガントで簡潔な構文で深いカスタマイズされた動作を実装できるようにします。

Share this article

HackerNews

More Posts from Leapcell

cover

Node.jsにおけるプロパティドリルの公式な代替手段、AsyncLocalStorageの解明

cover

FastAPI/DjangoにおけるGILの影響とGunicorn/Uvicornの活用法

Popular Posts