path: root/files/ja/web/javascript/reference/global_objects/eval/index.html

---
title: eval()
slug: Web/JavaScript/Reference/Global_Objects/eval
tags:
  - Evaluating JavaScript
  - JavaScript
  - Method
  - Reference
  - Warning
  - eval
  - メソッド
  - 警告
translation_of: Web/JavaScript/Reference/Global_Objects/eval
---
<div>{{jsSidebar("Objects")}}</div>

<p><code><strong>eval()</strong></code> 関数は、文字列として表現された JavaScript コードを評価します。</p>

<div class="blockIndicator warning">
<p><strong>警告:</strong> 文字列から JavaScript を実行することは、非常に大きなセキュリティリスクを伴います。<code>eval()</code> を使用すると、悪意のある者が任意のコードを実行するのはあまりにも簡単です。下記の <a href="#Never_use_eval!">eval() を使わないでください!</a>を参照してください。</p>
</div>

<div>{{EmbedInteractiveExample("pages/js/globalprops-eval.html")}}</div>

<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="syntaxbox notranslate"><code>eval(<em>string</em>)</code></pre>

<h3 id="Parameters" name="Parameters">引数</h3>

<dl>
 <dt><code>string</code></dt>
 <dd>JavaScript の式、文、または一連の文を表す文字列です。式には、既存オブジェクトの変数およびプロパティを含められます。</dd>
</dl>

<h3 id="Return_value" name="Return_value">返値</h3>

<p>与えられたコードの評価結果値を返します。評価結果が空の場合は、{{jsxref("undefined")}} を返します。</p>

<h2 id="Description" name="Description">解説</h2>

<p><code>eval()</code> はグローバルオブジェクトの関数プロパティです。</p>

<p><code>eval()</code> 関数の引数は文字列です。その文字列が式に相当する場合、<code>eval()</code> は引数を式として評価します。引数が 1 つ以上の JavaScript 文に相当する場合、<code>eval()</code> は引数を文として評価します。算術式を評価する目的で <code>eval()</code> を呼び出してはいけません。JavaScript は算術式を自動的に評価します。</p>

<p>算術式を文字列として構築した場合、後で <code>eval()</code> を使ってそれを評価することができます。例えば <code>x</code> という変数があるとします。ある変数に "<code>3 * x + 2</code>" といった式の文字列値を代入し、そしてスクリプトの後方で <code>eval()</code> を呼び出すことで、<code>x</code> が関わる式の評価を後回しにできます。</p>

<p><code>eval()</code> の引数が文字列でない場合、<code>eval()</code> は引数を変更せずに返します。次の例では <code>String</code> コンストラクターが指定されているため、<code>eval()</code> は文字列を評価したものではなく <code>String</code> オブジェクトを返します。</p>

<pre class="brush:js notranslate">eval(new String('2 + 2')); // "2 + 2" を含む String オブジェクトを返します
eval('2 + 2');             // 4 を返します
</pre>

<p>この制約は、<code>toString</code> を使用する一般的な方法で回避できます。</p>

<pre class="brush:js notranslate">var expression = new String('2 + 2');
eval(expression.toString());            // 4 を返します
</pre>

<p><code>eval</code> 関数を <code>eval</code> 以外の名前を参照して呼び出すことで<em>間接的に</em>使用した場合、<a href="http://www.ecma-international.org/ecma-262/5.1/#sec-10.4.2">ECMAScript 5</a> 以降ではローカルスコープではなくグローバルスコープで機能します。これは例えると、関数定義によりグローバル関数が作成されるため、評価されたコードはその呼び出されたスコープ内のローカル変数にアクセスできなくなる、ということです。</p>

<pre class="brush:js notranslate">function test() {
  var x = 2, y = 4;
  console.log(eval('x + y')); // 直接呼び出し、ローカルスコープを使用し、結果は 6 となる
  var geval = eval; // グローバルスコープでの eval呼び出しと同等
  console.log(geval('x + y')); // 間接呼び出し、グローバルスコープを使用し、x は未定義となるため ReferenceError が発生する
  (0, eval)('x + y'); // 間接的な呼び出しのもう一つの例
}
</pre>

<h2 id="Never_use_eval!" name="Never_use_eval!">eval() を使わないでください!</h2>

<p><code>eval()</code> は呼び出し元の権限で渡されたコードを実行する危険な関数です。悪意のある第三者に影響を受ける可能性のある文字列で <code>eval()</code> を実行すると、あなたのウェブページ / 拡張機能の権限でユーザーのマシン上で悪意のあるコードを実行してしまう可能性があります。さらに重要なことに、サードパーティのコードは <code>eval()</code> が呼び出されたスコープを見ることができるので、類似の {{jsxref("Global_Objects/Function", "Function")}} では影響を受けない方法でも攻撃を受ける可能性があります。</p>

<p>また、ここ最近の JavaScript では多くの構造が JS エンジンによって最適化されているため、<code>eval()</code> は他の方法よりも低速でもあります。</p>

<p>さらに、現代の JavaScript インタープリターは JavaScript を機械語に変換します。これは、変数の名前の概念がすべて消滅することを意味します。したがって、<code>eval()</code> を使用すると、ブラウザーは長い高価な変数名検索を実行して、変数が機械語のどこに存在しているかを把握し、その値を設定します。さらに、<code>eval()</code> が変数の型の変更など、その変数に新しい変数をもたらす可能性もあり、生成されたすべての機械語を再評価して補正させられる可能性があります。</p>

<p>幸い、<code>eval()</code> にはとても良い代替策があります。{{jsxref("Function", "window.Function()")}} を使用することです。危険な <code>eval()</code> を使用したコードから <code>Function()</code> を使用したコードに変換する方法の例として、以下を参照してください。</p>

<p><code>eval()</code> を使用した悪いコード:</p>

<pre class="brush:js notranslate">function looseJsonParse(obj){
    return eval("(" + obj + ")");
}
console.log(looseJsonParse(
   "{a:(4-1), b:function(){}, c:new Date()}"
))
</pre>

<p><code>eval()</code> を使用しないより良いコード:</p>

<pre class="brush:js notranslate">function looseJsonParse(obj){
    return Function('"use strict";return (' + obj + ')')();
}
console.log(looseJsonParse(
   "{a:(4-1), b:function(){}, c:new Date()}"
))
</pre>

<p>上記の 2 つのコードスニペットを比較すると、2 つのコードスニペットが同じように動作するように見えるかもしれませんが、よく考えてみてください。<code>eval()</code> の方は非常に遅いのです。評価されたオブジェクトの中の <code>c: new Date()</code> に注目してください。<code>eval()</code> を使用しない関数では、オブジェクトはグローバルスコープで評価されているので、ブラウザーは <code>Date</code> が <code>window.Date</code> を参照しており、<code>Date</code> というローカル変数ではないと考えて安全です。しかし、コードが次のようになっている場合 <code>eval()</code> を使ったコードでは、ブラウザーがこれを仮定することができません。</p>

<pre class="brush:js notranslate">function Date(n){
    return ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"][n%7 || 0];
}
function looseJsonParse(obj){
    return eval("(" + obj + ")");
}
console.log(looseJsonParse(
   "{a:(4-1), b:function(){}, c:new Date()}"
))
</pre>

<p>したがって、コードの <code>eval()</code> バージョンでは、ブラウザーは高価なルックアップ呼び出しを行い、<code>Date()</code> というローカル変数があるかどうかを確認します。これは <code>Function()</code> と比較して非常に非効率的です。</p>

<p>関連する状況で、実際に <code>Date()</code> 関数を <code>Function()</code> 内のコードから呼び出すことができるようにしたいとしたらどうでしょうか。簡単な方法を取って、<code>eval()</code> に戻るべきでしょうか。いいえ、決してそうではありません。代わりに、以下の方法を試してみてください。</p>

<pre class="brush:js notranslate">function Date(n){
    return ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"][n%7 || 0];
}
function runCodeWithDateFunction(obj){
    return Function('"use strict";return (' + obj + ')')()(
        Date
    );
}
console.log(runCodeWithDateFunction(
   "function(Date){ return Date(5) }"
))
</pre>

<p>上記のコードは、三重に入れ子になった関数があるために非効率的で遅いと思えるかもしれませんが、上記の効率的なメソッドの利点を分析してみましょう。</p>

<ul>
 <li>これにより、<code>runCodeWithDateFunction()</code> に渡される文字列のコードを短縮することができます。</li>
 <li>関数呼び出しのオーバーヘッドが最小になり、コードサイズがはるかに小さくなるという利点には十分な価値があります。</li>
 <li><code>Function()</code> を使用することで、コードのパフォーマンスを向上させる <code>"use strict";</code> をより簡単に利用できるようになります。</li>
 <li>このコードでは <code>eval()</code> を使用しないので、そうでない場合に比べて桁違いに高速になります。</li>
</ul>

<p>最後に、短縮を検討してみましょう。上記のように <code>Function()</code> を使用すると、<code>runCodeWithDateFunction</code> に渡されたコード文字列をはるかに効率的に縮小することができます。関数の引数名は、下の縮小されたコードで見られるように縮小することができるからです。</p>

<pre class="brush:js notranslate">console.log(Function('"use strict";return(function(a){return a(5)})')()(function(a){
return"Monday Tuesday Wednesday Thursday Friday Saturday Sunday".split(" ")[a%7||0]}));</pre>

<p>一般的な用途においては、さらに安全 (そして高速) な <code>eval()</code> または <code>Function()</code> の代替手段があります。</p>

<h3 id="Accessing_member_properties" name="Accessing_member_properties">メンバーのプロパティへのアクセス</h3>

<p>プロパティ名からプロパティ自体への変換を行うのに <code>eval()</code> を使用しないでください。アクセスされるオブジェクトのプロパティがコードが実行されるまでわからない場合の例を考えてみましょう。これは <code>eval()</code> で行うことができます。</p>

<pre class="brush:js notranslate">var obj = { a: 20, b: 30 };
var propName = getPropName();  // "a" または "b" が返される

eval( 'var result = obj.' + propName );
</pre>

<p>ただし、ここで <code>eval()</code> は必要ありません。実際、この使い方はお勧めできません。代わりに<a href="/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors">プロパティアクセサー</a>を使用したほうが、より速くて安全です。</p>

<pre class="brush:js notranslate">var obj = { a: 20, b: 30 };
var propName = getPropName();  // "a" または "b" が返される
var result = obj[ propName ];  //  obj[ "a" ] は obj.a と同じ</pre>

<p>このメソッドを使用して子孫プロパティにアクセスすることもできます。<code>eval()</code> を使うと以下のようになります。</p>

<pre class="brush:js notranslate">var obj = {a: {b: {c: 0}}};
var propPath = getPropPath();  // returns e.g. "a.b.c"

eval( 'var result = obj.' + propPath );
</pre>

<p>ここで <code>eval()</code> を回避するには、プロパティのパスを分割し、様々なプロパティをループすることで行うことができます。</p>

<pre class="brush:js notranslate">function getDescendantProp(obj, desc) {
  var arr = desc.split('.');
  while (arr.length) {
    obj = obj[arr.shift()];
  }
  return obj;
}

var obj = {a: {b: {c: 0}}};
var propPath = getPropPath();  // "a.b.c" などを返す
var result = getDescendantProp(obj, propPath);</pre>

<p>プロパティの設定も同様に行うことができます。</p>

<pre class="brush:js notranslate">function setDescendantProp(obj, desc, value) {
  var arr = desc.split('.');
  while (arr.length &gt; 1) {
    obj = obj[arr.shift()];
  }
  return obj[arr[0]] = value;
}

var obj = {a: {b: {c: 0}}};
var propPath = getPropPath();  // "a.b.c" などを返す
var result = setDescendantProp(obj, propPath, 1);  // obj.a.b.c will now be 1</pre>

<h3 id="Use_functions_instead_of_evaluating_snippets_of_code" name="Use_functions_instead_of_evaluating_snippets_of_code">コードの断片を評価する場合、代わりに関数を使う</h3>

<p>JavaScript {{interwiki("wikipedia","第一級関数")}}を備えており、関数を他の API の引数としたり、変数やオブジェクトのプロパティに保存したりすることができます。多くの DOM API はこれを考慮して作られているので、次のように書くことができます (また、書くべきです)。</p>

<pre class="brush: js notranslate">// setTimeout(" ... ", 1000) を使う代わりに
setTimeout(function() { ... }, 1000);

// elt.setAttribute("onclick", " ... ") を使う代わりに
elt.addEventListener('click', function() { ... } , false); </pre>

<p>文字列を連結せずにパラメーター化した関数を作成する方法としては、<a href="/ja/docs/Web/JavaScript/Closures">クロージャ</a>を使う方法も便利です。</p>

<h3 id="Parsing_JSON_converting_strings_to_JavaScript_objects" name="Parsing_JSON_converting_strings_to_JavaScript_objects">JSON の解析 (文字列を JavaScript オブジェクトに変換)</h3>

<p><code>eval()</code> の呼び出しに使おうとしている文字列がコードではなくデータ (例えば <code>"[1, 2, 3]"</code> で配列を表す) を含むものであれば、{{Glossary("JSON")}} に切り替えることを検討してください。これは JavaScript のサブセットを使用することで、文字列でデータを表現することができます。<a href="/ja/docs/Downloading_JSON_and_JavaScript_in_extensions">Downloading JSON and JavaScript in extensions</a> の記事も参照してください。</p>

<p>JSON の構文は JavaScript の構文に比べて制限があり、多くの有効な JavaScript リテラルが JSON としては解釈されないことに注意してください。例えば、最後にカンマを付けることは JSON では許されておらず、オブジェクトリテラル内のプロパティ名 (キー) は引用符で囲む必要があります。後で JSON として解析される文字列を生成するには、JSON シリアライザーを使うようにしてください。</p>

<h3 id="Pass_data_instead_of_code" name="Pass_data_instead_of_code">コードの代わりにデータを渡す</h3>

<p>例えば、ウェブページの内容を取得できるよう設計された拡張であれば、JavaScript コードの代わりに <a href="/ja/docs/Web/XPath">XPath</a> を使って取得ルールを定義できます。</p>

<h3 id="Run_code_with_limited_privileges" name="Run_code_with_limited_privileges">制限された権限でコードを実行する</h3>

<p>どうしてもコードを実行したければ、制限された権限下での実行を検討しましょう。このアドバイスは、拡張機能や XUL アプリケーション上であれば <a href="/ja/docs/Components.utils.evalInSandbox">Components.utils.evalInSandbox</a> を使用すれば適用できます。</p>

<h2 id="Examples" name="Examples">使用例</h2>

<h3 id="Using_eval" name="Using_eval"><code>eval</code> を使用する</h3>

<p>次のコードでは、<code>eval</code> を含むどちらの文も 42 を返します。最初のコードは文字列 "<code>x + y + 1</code>" を評価します。2 番目のコードは文字列 "<code>42</code>" を評価します。</p>

<pre class="brush:js notranslate">var x = 2;
var y = 39;
var z = '42';
eval('x + y + 1'); // 42 が返される
eval(z);           // 42 が返される
</pre>

<h3 id="Using_eval_to_evaluate_a_string_of_JavaScript_statements" name="Using_eval_to_evaluate_a_string_of_JavaScript_statements"><code>eval</code> を使用して JavaScript 文の文字列を評価する</h3>

<p>次の例は、<code>eval()</code> を使用して文字列 <code>str</code> を評価しています。この文字列は <code>x</code> が 5 の場合に <code>z</code> に 42 の値を代入し、それ以外の場合は <code>z</code> に 0 を代入する JavaScript 文で構成されています。2 番目の文が実行される時、<code>eval</code> によってこれらの文が実行され、そして一連の文を評価して <code>z</code> に代入される値を返します。</p>

<pre class="brush:js notranslate">var x = 5;
var str = "if (x == 5) {console.log('z is 42'); z = 42;} else z = 0;";

console.log('z is ', eval(str));</pre>

<p>複数の値を定義した場合、最後の値が返されます。</p>

<pre class="brush:js notranslate">var x = 5;
var str = "if (x == 5) {console.log('z is 42'); z = 42; x = 420; } else z = 0;";

console.log('x is ', eval(str)); // z is 42  x is 420
</pre>

<h3 id="Last_expression_is_evaluated" name="Last_expression_is_evaluated">評価される最後の式について</h3>

<p><code>eval()</code> は最後に評価された式の値を返します。</p>

<pre class="brush:js notranslate">var str = 'if ( a ) { 1 + 1; } else { 1 + 2; }';
var a = true;
var b = eval(str);  // 2 が返される

console.log('b is : ' + b);

a = false;
b = eval(str);  // 3 が返される

console.log('b is : ' + b);</pre>

<h3 id="関数定義の文字列の_eval_には先頭と末尾に_と_が必要">関数定義の文字列の <code>eval</code> には先頭と末尾に "(" と ")" が必要</h3>

<pre class="brush:js notranslate">var fctStr1 = 'function a() {}'
var fctStr2 = '(function a() {})'
var fct1 = eval(fctStr1)  // undefined が返される
var fct2 = eval(fctStr2)  // 関数が返される
</pre>

<h2 id="Specifications" name="Specifications">仕様</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-eval-x', 'eval')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、<a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("javascript.builtins.eval")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{jsxref("Global_Objects/uneval", "uneval()")}}</li>
 <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors">プロパティアクセサー</a></li>
 <li><a href="/ja/Add-ons/WebExtensions/Content_scripts#Using_eval()_in_content_scripts">WebExtensions: コンテンツスクリプト内で eval() を使う</a></li>
</ul>