ITコラム

colmun_main7879

JavaScript

2017.11.22

JavaScript【 eval 】 ~ ソースコードの評価と実行

eval 関数は、指定した文字列が「 JavaScriptのプログラムコードとして正しいか 」を評価した上で それを実行する関数です。
プログラムコードが動的に生成される場合などで必要とされる関数ですが、使用にはリスクも伴います。
今回は、このような eval 関数の使い方とリスクについて紹介します。

目次

 
1.eval 関数の使い方
2.eval 関数のリスク

1.eval 関数の使い方

 
eval 関数は、引数に指定した文字列を JavaScript のプログラムコードとして評価し、有効と評価された場合は それをそのまま実行する関数です。

次のように記述して、使用します。

eval( 文字列 );

eval 関数の引数には、評価対象となる JavaScript のプログラムコードを文字列で指定します。

eval 関数の返り値は、以下の通りです。

●引数の文字列が JavaScript のプログラムコードとして有効と評価された場合は、プログラムが実行されて、その値が返る

●引数の文字列が JavaScript のプログラムコードとして無効と評価された場合は、プログラムは実行されず、undefined が返る

●有効と評価されたプログラムコード内で 複数の式が実行された場合は、最後に実行された式の結果が返る

 
 
eval 関数を実行して、返り値を表示します。
実行ボタンをクリックしてみて下さい。

eval(“1+1”) 
  
 

eval(“var i = 1+1; i*2”) 
  
 

eval(“var i = 1”) 
  
 

eval(“‘あいう'”) 
  
 

eval(“var str = ‘あいう'”) 
  
 

eval(“[1,2,3,4]”) 
  
 

eval(“for(var i=0;i<10;i++){i;}") 
  
 

eval(“for(var i=0;i<0;i++){i;}") 
  
 

eval(“new Date()”) 
  
 

 
「 eval(“‘あいう'”) 」は、値そのものの「 あいう 」が返りますが、「 eval(“var str = ‘あいう'”) 」は、「 undefined 」が返ります。

変数の宣言のみの「 eval(“var str = ‘あいう'”) 」は、JavaScript のプログラムコードとして間違っているわけではありませんが、eval 関数の評価対象としては不適当という判断だと思います。

また、「 eval(“for (var i=0; i<0; i++){i;}”) 」のように、初期値と条件との設定に誤りがあるような場合も、「 undefined 」が返ります。

 
上のサンプルのソースコードは次の通りです。

<script type="text/javascript">
<!--
function disp() {
    document.getElementById("dat").value = eval("1+1");
}
function disp2() {
    document.getElementById("dat2").value = eval("var i = 1+1; i*2");
}
function disp3() {
    document.getElementById("dat3").value = eval("var i = 1");
}
function disp4() {
    document.getElementById("dat4").value = eval("'あいう'");
}
function disp5() {
    document.getElementById("dat5").value = eval("var str = 'あいう'");
}
function disp6() {
    document.getElementById("dat6").value = eval("[1,2,3,4]");
}
function disp7() {
    document.getElementById("dat7").value = eval("for (var i=0; i<10;  i++){i;}");
}
function disp8() {
    document.getElementById("dat8").value = eval("for (var i=0; i<0;  i++){i;}");
}
function disp9() {
    document.getElementById("dat9").value = eval("new Date()");
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px 20px 10px;">
    <div style="display:inline-flex; align-items: center;">
        <nobr style="width:450px;">eval("1+1")</nobr> 
        <nobr><input type="button" value="実行" onClick="disp()"></nobr>  
        <input type="text" id="dat"> 
    </div>
    <div style="display:inline-flex; align-items: center;">
        <nobr style="width:450px;">eval("var i = 1+1; i*2")</nobr> 
        <nobr><input type="button" value="実行" onClick="disp2()"></nobr>  
        <input type="text" id="dat2"> 
    </div>
    <div style="display:inline-flex; align-items: center;">
        <nobr style="width:450px;">eval("var i = 1")</nobr> 
        <nobr><input type="button" value="実行" onClick="disp3()"></nobr>  
        <input type="text" id="dat3"> 
    </div>
    <div style="display:inline-flex; align-items: center;">
        <nobr style="width:450px;">eval("'あいう'")</nobr> 
        <nobr><input type="button" value="実行" onClick="disp4()"></nobr>  
        <input type="text" id="dat4"> 
    </div>
    <div style="display:inline-flex; align-items: center;">
        <nobr style="width:450px;">eval("var str = 'あいう'")</nobr> 
        <nobr><input type="button" value="実行" onClick="disp5()"></nobr>  
        <input type="text" id="dat5"> 
    </div>
    <div style="display:inline-flex; align-items: center;">
        <nobr style="width:450px;">eval("[1,2,3,4]")</nobr> 
        <nobr><input type="button" value="実行" onClick="disp6()"></nobr>  
        <input type="text" id="dat6"> 
    </div>
    <div style="display:inline-flex; align-items: center;">
        <nobr style="width:450px;">eval("for(var i=0;i<10;i++){i;}")</nobr> 
        <nobr><input type="button" value="実行" onClick="disp7()"></nobr>  
        <input type="text" id="dat7"> 
    </div>
    <div style="display:inline-flex; align-items: center;">
        <nobr style="width:450px;">eval("for(var i=0;i<0;i++){i;}")</nobr> 
        <nobr><input type="button" value="実行" onClick="disp8()"></nobr>  
        <input type="text" id="dat8"> 
    </div>
    <div style="display:inline-flex; align-items: center;">
        <nobr style="width:450px;">eval("new Date()")</nobr> 
        <nobr><input type="button" value="実行" onClick="disp9()"></nobr>  
        <input type="text" id="dat9"> 
    </div>
</div>

▲目次へ戻る

 

2.eval 関数のリスク

 
eval関数には、次のようなリスクがあります。

●悪意を持って用意された プログラムコードが eval関数の引数に混入されると、無制限に実行されてしまうという、セキュリティ面のリスク

●通常の JavaScript プログラムを実行する場合と比較して 速度が低下してしまうという、パフォーマンス的なリスク。

このため、eval関数は、できる限り使用を避けるのが一般的です。

状況に応じて、代替手段があればその方法による、やむを得ず eval関数を使用する際にも リスク内容を考慮する、といった視点でコーディングすることが とても重要です。

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.