JavaScriptでeval関数の使い方とリスクとは【初心者向け】
プログラミング初心者向けにJavaScriptでeval関数の使い方とそのリスクについて解説しています。あまり実用的な知識ではありませんが、セキュリティ面やパフォーマンスでどんなデメリットが生まれるのか知っておくと良いでしょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
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プログラムを見ながら動作確認ができます。
eval関数の危険性
eval関数には次のようなリスクがあります。
- 悪意の第3者が用意したJavaScriptプログラムを自由に実行できてしまうセキュリティリスク。
- 通常のJavaScriptプログラムを実行するより速度が低下してしまうパフォーマンス劣化リスク。
このため、evalを使用しないのが一般的です。
eval関数はeval is evilと称され、evalは邪悪だと言われています。
現在では、eval関数を使用しなくてもほとんどの処理を作成することができます。
evalの使い方と使うことのリスクについて解説しました。
セキュリティ面で特に注意が必要なので、十分理解しておきましょう。
また、TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。
JavaScriptを使ってリッチなWebサービスを作りたい方はぜひご覧ください。
