【JS応用｜実務向け】フロントエンド開発における eval() の危険性と安全な代替案

1. 導入

JavaScriptにおいて、文字列として渡されたコードを動的に実行できる eval() 関数は、一見すると非常に強力で便利な機能に見えます。しかし、実務の現場において eval() を使用することは、セキュリティ上の致命的なリスクを伴い、推奨されません。本記事では、なぜ eval() が避けられるべきなのか、そして、同等の機能を実現するための安全な代替手段について解説します。

2. 基礎知識

eval() は、引数として受け取った文字列を JavaScript コードとして評価・実行する組み込み関数です。例えば、eval(“2 + 2”) と記述すれば 4 が返ります。
しかし、この機能には「外部から入力された文字列も実行できてしまう」という重大な欠点があります。もし悪意のあるユーザーが入力フォームなどに不正なスクリプトを仕込んだ場合、そのコードがアプリケーションの権限でそのまま実行される「クロスサイトスクリプティング（XSS）」の温床となります。また、ブラウザの最適化が効かなくなるため、パフォーマンスの低下を招くというデメリットもあります。

3. 実装/解決策

eval() を使わずに同様のロジックを実現する場合、JSON.parse() や new Function()（※ただしこれも注意が必要）、あるいはブラケット記法によるオブジェクトの動的アクセスを活用するのが正攻法です。特に「文字列で指定されたプロパティをオブジェクトから取得したい」といったケースでは、eval() は全く不要です。

4. サンプルプログラム

以下のコードは、eval() を使わずに、文字列で指定したキーの値を安全に取得する手法です。

// 動的にプロパティ値を取得したいオブジェクト
const userConfig = {
  theme: "dark",
  fontSize: 16,
  showSidebar: true
};

/

eval() を使わずに安全に値を取得する関数
@param {Object} obj - 参照先のオブジェクト
@param {string} key - 取得したいプロパティ名

 /
function getValueSafe(obj, key) {
  // ブラケット記法を使用することで、文字列をキーとして安全にアクセス可能
  if (Object.prototype.hasOwnProperty.call(obj, key)) {
    return obj[key];
  }
  return "指定されたキーは存在しません";
}

// 実行例
const setting = "theme";
console.log(getValueSafe(userConfig, setting)); // 出力: "dark"

// 文字列からJSONデータを解析したい場合は JSON.parse() を使用する
const jsonString = '{"status": "success", "code": 200}';
const data = JSON.parse(jsonString);
console.log(data.status); // 出力: "success"

5. 応用・注意点

現場での開発において、どうしても動的な計算が必要な場合は、eval() の代わりに math.js などの専用ライブラリを利用することを検討してください。また、JSON データを受け取る際は、必ず正しい形式であることを確認してから JSON.parse() を使用し、例外処理（try-catch）を必ず組み込むようにしましょう。

結論として、eval() を見かけたら「リファクタリングの対象」と見なすべきです。 セキュリティを担保し、保守性の高いコードを書くために、より安全でモダンな JavaScript の機能を優先して利用してください。