JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのeval()関数とは？基本的な使い方と危険性について解説

eval()関数とは

JavaScriptのeval()関数は、引数として渡された文字列を評価し、それをJavaScriptコードとして実行するための関数です。文字列で記述された式や関数呼び出しを、その場で動的に処理できるのが特徴です。

ただし、eval()の使用は非常に危険であることに注意が必要です。外部からの入力値をそのままeval()に渡してしまうと、悪意のあるコード（XSS攻撃など）を実行されてしまう可能性があります。そのため、実際の開発ではeval()の使用は避け、代替手段を検討することが推奨されています。

eval()関数の使用例

以下は、JavaScriptでeval()関数を使用するサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScript eval() function</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックするとeval()の動作を確認できます</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    function multiply(a, b) {
        return a * b;
    }
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML += eval("12+92") + " ";
        eval('resEle.innerHTML += "Hello world "');
        resEle.innerHTML += eval("multiply(12,33)");
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptのeval()関数とは？基本的な使い方と危険性について解説

「CLICK HERE」ボタンをクリックすると、以下のようにeval()による計算結果と文字列が出力されます。

  • eval("12+92")：文字列「12+92」を数式として評価し、「104」を返します。
  • eval('resEle.innerHTML += "Hello world "')：文字列内のコードが実行され、画面に「Hello world」と表示されます。
  • eval("multiply(12,33)")：定義済みの関数multiply()を文字列から呼び出し、「396」を返します。

JavaScriptのeval()関数とは？基本的な使い方と危険性について解説

まとめ：eval()を使う際の注意点

eval()は便利な反面、以下のリスクがあるため使用には細心の注意が必要です。

  • セキュリティリスク：ユーザー入力などをそのまま渡すと、任意のコードを実行される恐れがあります。
  • パフォーマンス低下：eval()内のコードはコンパイルの最適化が行われにくく、実行速度が遅くなります。
  • デバッグの困難さ：動的に生成されたコードはデバッガでの追跡が難しくなります。

これらの理由から、モダンなJavaScript開発ではeval()の代わりに、JSON.parse()や関数型のアプローチなど、より安全な代替手段を採用することがベストプラクティスとされています。

  1. JavaScriptの部分関数（Partial Function）とは？仕組みと実装例をわかりやすく解説

    部分関数（Partial Function）とは、既存の関数を引数として受け取り、それに加えて別の型の引数も同時に受け取れるようにする仕組みです。まず渡された引数の一部を使い、残りの引数を受け取る新しい関数を返します。そして、返された関数が呼び出されるときに、あらかじめ固定しておいた引数とそのときに渡された引数をすべて組み合わせて、元の親関数が実行されます。 この手法は「部分適用（Partial Application）」とも呼ばれ、関数型プログラミングの基本的なテクニックのひとつです。共通する引数を先に束縛しておくことで、処理の再利用性やコードの可読性を高めることができます。 コード例 以下

  2. JavaScriptのクロージャとは？仕組みと実装例をわかりやすく解説

    クロージャとはJavaScriptにおけるクロージャ（Closure）とは、外側の関数の実行が完了して値を返した後であっても、内側の関数から外側の関数のスコープ（変数）にアクセスできる仕組みのことです。言い換えれば、内側の関数は、外側の関数の変数に対して常にアクセスできるということです。この性質を活用することで、データを外部から直接操作されないように隠蔽したり、関数の呼び出し間で状態を保持する処理を実現したりすることが可能になります。クロージャのサンプルコード以下は、JavaScriptでクロージャを使用した具体的なコード例です。ボタンをクリックすると、クロージャによって保持された値を使って2