【JS応用】”new Function” 構文

概要

JavaScriptにおける`new Function()`構文は、文字列として渡されたコードを動的に実行するための強力な機能です。これは、コンパイル時ではなく実行時にコードを生成・実行したい場合に特に役立ちます。例えば、ユーザーからの入力に基づいて動的な計算を行ったり、プラグインシステムを実装したりする際に利用されます。

`new Function()`は、`Function`コンストラクタとも呼ばれ、新しい関数オブジェクトを作成します。このコンストラクタは、可変長の引数を受け取ります。最後の引数は、関数本体として実行される文字列コードです。それより前の引数は、生成される関数のパラメータ名として扱われます。

この構文の利点は、コードの柔軟性を大幅に向上させる点にありますが、同時にセキュリティリスクやパフォーマンスへの影響といった注意点も存在します。本記事では、`new Function()`の基本的な使い方から、その応用例、そして実務で注意すべき点までを詳細に解説していきます。

詳細解説

`new Function()`構文の基本形は以下のようになります。

new Function([arg1[, arg2[, …argN]],] functionBody)

* `arg1`, `arg2`, …, `argN`: 生成される関数のパラメータ名を文字列で指定します。これらのパラメータは、関数本体のコード内で利用できます。省略可能です。
* `functionBody`: 関数本体として実行されるJavaScriptコードを文字列で指定します。必須です。

例えば、単純な加算を行う関数を`new Function()`で作成してみましょう。

const add = new Function(‘a’, ‘b’, ‘return a + b;’);
console.log(add(5, 3)); // 出力: 8

この例では、`’a’`と`’b’`がパラメータ名として指定され、`’return a + b;’`が関数本体のコードとして渡されています。

`new Function()`の実行コンテキスト

`new Function()`によって作成された関数は、グローバルスコープで実行されます。これは、`eval()`関数がローカルスコープで実行されるのと対照的です。つまり、`new Function()`内で定義された変数や関数は、グローバルスコープに汚染をもたらす可能性があります。

const x = 10;
const funcWithGlobalScope = new Function(‘y’, ‘return x + y;’);
console.log(funcWithGlobalScope(5)); // 出力: 15 (グローバルスコープのxを参照)

function createLocalVariable() {
const z = 20;
const funcWithLocalScope = new Function(‘w’, ‘return z + w;’);
// console.log(funcWithLocalScope(5)); // エラー: z is not defined
}
// createLocalVariable();

この挙動は、`new Function()`を使用する際に特に注意すべき点です。意図しないグローバル変数の上書きや、ローカルスコープの変数へのアクセスができないといった問題を引き起こす可能性があります。

`new Function()`と`eval()`の違い

`eval()`も文字列をJavaScriptコードとして実行する機能ですが、`new Function()`とはいくつかの重要な違いがあります。

* **スコープ**: `eval()`は呼び出し元のスコープでコードを実行しますが、`new Function()`はグローバルスコープで実行されます。
* **パフォーマンス**: 一般的に、`new Function()`は`eval()`よりもパフォーマンスが良いとされています。これは、JavaScriptエンジンが`new Function()`によって作成される関数を、より早い段階でコンパイルし、最適化できるためです。`eval()`は実行時にコードを解析する必要があるため、パフォーマンスのオーバーヘッドが大きくなる傾向があります。
* **セキュリティ**: どちらの構文も、外部からの信頼できない入力をそのままコードとして実行すると、深刻なセキュリティ脆弱性を生む可能性があります。しかし、スコープの違いから、`new Function()`の方が意図しない副作用を局所化しやすいという見方もできます。

`new Function()`の応用例

1. **動的な関数生成**: ユーザーの入力や設定に基づいて、特定のロジックを持つ関数を動的に生成する場合に便利です。
例えば、ユーザーが入力した数式を評価する電卓アプリケーションなどで利用できます。

function createCalculator(operation) {
switch (operation) {
case ‘+’:
return new Function(‘a’, ‘b’, ‘return a + b;’);
case ‘-‘:
return new Function(‘a’, ‘b’, ‘return a – b;’);
case ‘*’:
return new Function(‘a’, ‘b’, ‘return a * b;’);
case ‘/’:
return new Function(‘a’, ‘b’, ‘return a / b;’);
default:
throw new Error(‘Unsupported operation’);
}
}

const add = createCalculator(‘+’);
console.log(add(10, 5)); // 出力: 15

const multiply = createCalculator(‘*’);
console.log(multiply(10, 5)); // 出力: 50

2. **プラグインシステム**: 外部から提供されるJavaScriptコードを、安全かつ隔離された環境で実行したい場合に、`new Function()`が利用されることがあります。ただし、完全なサンドボックス化には追加の対策が必要です。

3. **動的なデータ処理**: サーバーから受け取ったデータ構造に基づいて、特定のフィールドを抽出したり、変換したりする関数を動的に生成する際に使用できます。

function createFieldExtractor(fieldName) {
return new Function(‘data’, `return data[‘${fieldName}’];`);
}

const user = { id: 1, name: ‘Alice’, age: 30 };
const getName = createFieldExtractor(‘name’);
console.log(getName(user)); // 出力: Alice

`new Function()`の制限事項と注意点

* **セキュリティリスク**: 最も重大な懸念事項です。信頼できないソースからの入力をそのまま`new Function()`に渡すと、クロスサイトスクリプティング（XSS）攻撃や、悪意のあるコード実行につながる可能性があります。ユーザー入力は常にサニタイズ（無害化）するか、バリデーションを行う必要があります。
* **パフォーマンス**: 一般的には`eval()`よりも優れていますが、頻繁に大量の関数を動的に生成・実行すると、アプリケーション全体のパフォーマンスに影響を与える可能性があります。コードの生成とコンパイルにはコストがかかります。
* **デバッグの困難さ**: `new Function()`で生成されたコードは、通常のソースコードとしてブラウザの開発者ツールに表示されない場合があります。そのため、デバッグが難しくなることがあります。エラーが発生した場合、原因の特定に時間がかかる可能性があります。
* **スコープの問題**: 前述の通り、グローバルスコープで実行されるため、意図しないグローバル変数の汚染や、ローカルスコープの変数へのアクセス不可といった問題が発生しやすいです。
* **可読性の低下**: コードが文字列として扱われるため、静的解析ツール（Linterなど）によるチェックが難しくなり、コードの可読性や保守性が低下する可能性があります。

サンプルコード

ここでは、`new Function()`のより実践的な使用例をいくつか示します。

例1: 動的な条件分岐

ユーザーが選択した条件に基づいて、異なる処理を行う関数を生成します。

const checkEven = createConditionalFunction(‘value % 2 === 0’, ‘Even number’, ‘Odd number’);

console.log(checkEven(4)); // 出力: Even number
console.log(checkEven(7)); // 出力: Odd number

// 別の条件で関数を生成
const checkPositive = createConditionalFunction(‘value > 0’, ‘Positive’, ‘Non-positive’);
console.log(checkPositive(10)); // 出力: Positive
console.log(checkPositive(-5)); // 出力: Non-positive

この例では、`condition`、`successMessage`、`failureMessage`といった外部からの入力を元に、実行時にコードを組み立てています。

例2: オブジェクトのプロパティを動的にアクセスする関数

指定されたキーを持つオブジェクトのプロパティ値を返す関数を生成します。

const person = {
name: ‘Bob’,
age: 25,
city: ‘Tokyo’
};

const getName = createPropertyAccessor(‘name’);
console.log(getName(person)); // 出力: Bob

const getAge = createPropertyAccessor(‘age’);
console.log(getAge(person)); // 出力: 25

const getCountry = createPropertyAccessor(‘country’);
console.log(getCountry(person)); // 出力: undefined

この例では、`key`という文字列を元に、`obj[‘${key}’]`というコードを生成しています。キーに特殊文字が含まれる場合、エスケープ処理が必要になることもあります。

例3: 複数の引数と複雑なロジック

より複雑な関数本体を文字列で渡すことも可能です。

// 外部で定義された関数を文字列経由で利用
const multiply = (x, y) => x * y;
const add = (x, y) => x + y;

// ‘x’と’y’を引数とし、外部の ‘multiply’ 関数を呼び出す関数を生成
// 注意: この例では、’multiply’ 関数がグローバルスコープに存在することを前提としています。
const multiplyProcessor = createComplexFunction(‘x’, ‘y’, ‘multiply’);
console.log(multiplyProcessor(5, 3)); // 出力: Processed: 15

// ‘a’と’b’を引数とし、外部の ‘add’ 関数を呼び出す関数を生成
const addProcessor = createComplexFunction(‘a’, ‘b’, ‘add’);
console.log(addProcessor(10, 20)); // 出力: Processed: 30

この例では、`logic`として渡された関数名（文字列）を、関数本体のコード内で使用しています。この場合、`logic`で指定される関数は、`new Function()`が実行されるスコープ（グローバルスコープ）からアクセス可能である必要があります。

実務アドバイス

`new Function()`構文は強力ですが、その使用には慎重さが求められます。実務でこの構文を検討する際には、以下の点を考慮してください。

1. **代替手段の検討**: まず、`new Function()`を使わずに実現できないか検討しましょう。
* **オブジェクトやマップによる設定**: 設定値に基づいて処理を分岐させる場合、`if`/`switch`文の代わりに、オブジェクトやMapに処理をマッピングする方が、コードがシンプルで可読性が高くなることが多いです。
* **クラスやモジュール**: 構造化されたコードが必要な場合は、クラスやモジュールを使用する方が、スコープ管理や保守性の観点から優れています。
* **`JSON.parse()`と`JSON.stringify()`**: データのシリアライズ/デシリアライズには、これらの標準的なAPIを使用するのが安全かつ効率的です。
* **`Function.prototype.bind()`**: 特定のコンテキストで関数を実行したい場合に、`bind()`は`new Function()`よりも安全で推奨される方法です。

2. **セキュリティ対策の徹底**: ユーザー入力や外部からのデータが`new Function()`の引数に含まれる場合は、以下の対策を必ず講じてください。
* **入力のバリデーション**: 期待されるデータ型、フォーマット、範囲などを厳密にチェックします。
* **入力のサニタイゼーション**: コードとして解釈される可能性のある特殊文字や危険なキーワード（`eval`、`document`、`window`など）をエスケープまたは除去します。ただし、JavaScriptのコードを完全に安全にサニタイズするのは非常に困難です。
* **最小権限の原則**: `new Function()`で実行するコードには、必要最低限の権限のみを与えるように設計します。例えば、DOM操作やネットワークリクエストが不要な場合は、それらのAPIにアクセスできないように工夫します（ただし、`new Function()`のスコープはグローバルなので、完全な隔離は難しいです）。

3. **パフォーマンスの計測**: `new Function()`を多用する箇所がある場合、そのパフォーマンスへの影響を計測してください。特に、ループ内で頻繁に新しい関数が生成されるようなケースは、パフォーマンスのボトルネックになりやすいです。必要であれば、生成する関数をキャッシュしたり、代替アルゴリズムを検討したりします。

4. **コードの可読性と保守性**: `new Function()`を使用すると、コードが文字列になり、静的な解析が難しくなります。
* **コメントの活用**: なぜ`new Function()`が必要なのか、どのようなコードが生成されるのかを、コメントで詳細に記述します。
* **生成されるコードの可視化**: 可能であれば、デバッグ時に生成されるコードをコンソールに出力するなどして、内容を確認できるようにします。
* **命名規則**: 生成される関数に意味のある名前を付け、どこでどのように使われるのかを明確にします。

5. **エラーハンドリング**: `new Function()`のコンストラクタ自体が構文エラーを投げることがあります。また、生成された関数が実行時にエラーを発生させることもあります。`try…catch`ブロックを適切に使用して、これらのエラーを捕捉し、適切に処理してください。

// 例: 構文エラーを含む関数を作成しようとする
const invalidFunction = safeCreateFunction([‘x’], ‘return x +;’);
if (invalidFunction) {
// 実行されない
}

6. **代替ライブラリの検討**: 特定のユースケース（例えば、テンプレートエンジンのようなもの）では、`new Function()`を内部で使用しているライブラリが存在します。これらのライブラリは、セキュリティやパフォーマンスに関する考慮がなされている場合が多いので、自前で実装する前に検討する価値があります。

まとめ

`new Function()`構文は、JavaScriptで動的にコードを生成・実行できる強力なツールです。ユーザー入力に基づいた動的な計算、設定駆動型のロジック、あるいはプラグインシステムの構築など、様々な応用が考えられます。

しかし、その柔軟性の裏には、深刻なセキュリティリスク、パフォーマンスへの影響、デバッグの困難さ、スコープの問題といった、注意すべき多くの落とし穴が存在します。特に、信頼できないソースからの入力を直接コードとして実行することは、絶対に避けるべきです。

実務においては、`new Function()`の使用は最後の手段と考え、まずは代替手段がないか検討することが重要です。もし使用せざるを得ない場合は、セキュリティ対策を最優先し、コードの可読性や保守性、パフォーマンスへの影響も十分に考慮した上で、慎重に実装を進める必要があります。

`new Function()`は、その特性を深く理解し、適切に管理することで、開発の幅を広げる強力な味方となり得ますが、誤った使用は予期せぬ問題を引き起こす可能性が高いことを常に念頭に置くべきです。