eval関数について

下記のコードの演算処理の部分について教えていただきたいです。
中々うまく演算処理の部分が書けなかったので、調べてeval関数というものを使ったのですが調べても何故うまく動いているのか分かりません。馬鹿な私でもわかるように解説していただけますでしょうか？

発生している問題・エラーメッセージ

この部分を教えていただきたいです。
``` /*eval関数を定義*/
      function myValue(culc) {
	    if (culc == "=") {
		document.dentaku.display.value =
		    eval(document.dentaku.display.value);
	    } else if (culc == "C") {
		document.dentaku.display.value = "";
	    } else {
		document.dentaku.display.value += culc;
      }
    } 
  </script>


### 該当のソースコード

```ここに言語名を入力
ソースコード

<!DOCTYPE html>
<html lang="jn">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src=
      "https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <title>簡易電卓</title>
</head>
<body>
    <form name="dentaku" action="">
    <table border="1">
      <tr>
      <!--タイトル-->
      <td align="center" colspan="4"><b><h4>簡　易　電　卓</h4></b>
      </td>
      <tr>
      <!--表示画面部分-->
      <td colspan="4">
      <input type="" name="display" value=""  disabled>
      </tr>
      <!--上から1行目-->
      <tr>
        <td><input type="button" value="7" onclick="myValue('7')"></td>
        <td><input type="button" value="8" onclick="myValue('8')"></td>
        <td><input type="button" value="9" onclick="myValue('9')"></td>
        <td><input type="button" class="btn btn-primary" value="÷" onclick="myValue('/')" ></td>
      </tr>
      <!--上から2行目-->
      <tr>
        <td><input type="button" value="4" onclick="myValue('4')"></td>
        <td><input type="button" value="5" onclick="myValue('5')"></td>
        <td><input type="button" value="6" onclick="myValue('6')"></td>
        <td><input type="button" class="btn btn-primary" value="×" onclick="myValue('*')"></td>
        
      </tr>
      <!--上から3行目-->
      <tr>
        <td><input type="button" value="1" onclick="myValue('1')"></td>
        <td><input type="button" value="2" onclick="myValue('2')"></td>
        <td><input type="button" value="3" onclick="myValue('3')"></td>
        <td><input type="button" class="btn btn-primary" value="+" onclick="myValue('+')"></td>
      </tr>
      <!--上から4行目-->
      <tr>
        <td><input type="button" value="0" onclick="myValue('0')"></td>
        <td><input type="button" class="btn btn-danger" value="C" onclick="myValue('C')"></td>
        <td><input type="button" class="btn btn-success" value="=" onclick="myValue('=')"></td>
        <td><input type="button" class="btn btn-primary" value="-" onclick="myValue('-')"></td>
      </tr>
    </table>
  </form>
  <div id="app">
    <ul class="item">
    <a :href="dentakuURL">
    <img :src="dentakuLogo">
    </a>
    </ul>
</div>
  <script>
        new Vue({
      el: '#app',
      data: {
        dentakuURL:'https://www.amazon.co.jp/gp/bestsellers/office-products/89359051',
        dentakuLogo:'dentaku_kaden1_man.png', 
      }
    }),
  /*eval関数を定義*/
      function myValue(culc) {
	    if (culc == "=") {
		document.dentaku.display.value =
		    eval(document.dentaku.display.value);
	    } else if (culc == "C") {
		document.dentaku.display.value = "";
	    } else {
		document.dentaku.display.value += culc;
      }
    } 
  </script>
</body>
</html>
<style>
  /*画像表示位置*/
  .item{
    position: absolute;
    bottom: 170px;
    right: 900px;
  }
  /*ボタンのサイズ*/
  input[type="button"]{
    width: 100px;
    height: 100px;
    font-size: xx-large;
  }
  /*カーソルを合わせたときに背景を暗くする*/
  input:hover{  
    background: #747373b9;
  }
  /*表示部分の大きさ*/
  input[name="display"]{
    width: 410px;
    height: 80px;
    font-size: xx-large;
    text-align: right;
    background:#ffffff;
  }  
</style>

### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

evalは文字列を式として評価します

javascript
1const v="1+2+3";
2console.log(eval(v));//6

ただしバグの温床になるのであまり推奨されません

eval() - JavaScript | MDN

投稿2022/03/02 00:43

yambejp

総合スコア114839

syoshinnsya123

2022/03/02 01:04

あまり理解はできてないのですが、とても便利だと思っていましたが大きな欠点があるんですね。ありがとうございました！

行動規範の内容に同意します

ベストアンサー

myValueが呼び出されるたびに計算式が文字列として作られていきます。
例えば

javascript
1myValue("1");
2myValue("+");
3myValue("2");
4myValue("+");
5myValue("3");

のように呼び出したら、document.dentaku.display.valueは最終的に

javascript
1"1+2+3"

という文字列になります。

そして最後に

javascript
1myValue("=");

を実行した際にこの計算式がevalで計算されるようなプログラムになっています。

投稿2022/03/02 00:41

退会済みユーザー

総合スコア0

syoshinnsya123

2022/03/02 01:03

丁寧にありがとうございました。該当コードの部分にコメントを入れる場合の正しい入れ方も教えていただくことは可能でしょうか？

退会済みユーザー

2022/03/02 05:58 編集

何をもって正しい入れ方と考えればいいのか自分には判断つけがたいです。とりあえずご自身のメモ代わりに、後から見てわかるように書き込んだらよいのではないでしょうか。＃yambejpさんの回答にもありましたが、evalは単なる計算だけでなくJavaScriptのコードそのものを実行させることが可能ですので、くれぐれも気を付けてください。

行動規範の内容に同意します

あなたの回答