JavaScriptでeval関数の使い方とリスクとは【初心者向け】

JavaScriptの使い方を初心者向けに紹介した記事です。

今回は、JavaScriptでevalを使う方法について解説します。

また、入門向けにJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。

 

evalとは

evalとは、引数に指定した文字列をJavaScriptプログラムコードとして評価・実行する機能をもつ関数です。

 

関数とは、関数とは、処理に名前をつけてまとめたものです。

関数自体には2種類あり、JavaScriptで最初から用意されている関数と自作の関数があります。

eval関数は、JavaScriptで最初から用意されている関数です。

 

引数とは、

eval(string)

で実行された際の( )内に入る値のことを意味します。

ここでは、stringとありますが、これは文字列 を意味します。

そして、eval関数の引数には文字列のみを指定することができます。

 

eval関数の利用方法

基本構文としては、

eval(string)

とあるように、文字列を入れます。

そのため、自由自在にJavaScriptコードを引き渡して動作させることができます。

 

では実際のコードを書いてみましょう。

今回は文字列を渡して、JavaScriptのコードとして計算するプログラムです。

 

JavaScript

document.write(eval("1+1")+"<br>");
var kazu=10;
document.write(eval(kazu+20)+"<br>");

各行を説明します。

1行目は「1+1」という文字列をJavaScriptのコードとして認識して計算結果の2を表示させています。

行の最後に「+”<br>”」とある部分は、表示した際に改行するためのものです。

2行目は変数kazuに「10」という数字を入れます。変数とは値を入れる箱のようなものです。

こちらも、kazu+20という文字列を引数で指定していますが、実際はJavaScriptコードとして計算結果の「30」が表示されます。

 

今回の説明の最初で、

evalとは、引数に指定した文字列をJavaScriptプログラムコードとして評価・実行する機能をもつ関数です。

と説明しました。

今回のプログラムでは文字列として渡した数字の計算式が、eval関数を通じて、文字列だった数値や変数が計算するプログラムとして処理してしまいました。

この一連の処理が、

引数に指定した文字列をJavaScriptプログラムコードとして評価・実行する

という事をあらわす処理になります。

 

こちらで実際のJavaScriptプログラムを見ながら動作確認ができます。

 

[PR] フロントエンドで副業する学習方法を動画で公開中

eval関数の危険性

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

1. 悪意の第3者が用意したJavaScriptプログラムを自由に実行できてしまうセキュリティリスク。
2. 通常のJavaScriptプログラムを実行するより速度が低下してしまうパフォーマンス劣化リスク。

このため、evalを使用しないのが一般的です。

eval関数はeval is evilと称され、evalは邪悪だと言われています。

現在では、eval関数を使用しなくてもほとんどの処理を作成することができます。

 

evalの使い方と使うことのリスクについて解説しました。

セキュリティ面で特に注意が必要なので、十分理解しておきましょう。

 

また、TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。

JavaScriptを使ってリッチなWebサービスを作りたい方はぜひご覧ください。