【JavaScript】JavaScriptで電卓を作ろう！ChatGPT作と比較【初心者プログラム】

2023年3月8日2026年2月19日

概要

こんにちは。

JavaScriptで電卓を作って、ChatGPTに作ってもらったものと比較してみました！

追記　2026年2月

2023年3月8日最初に記事を書きましたが、2026年になった今はどうでしょうか。

人気のあるテーマなのでちょっと記事を手直ししてみることにしました。

2023年のChatGPTが作った電卓、2023年に管理人が作った電卓、2026年のChatGPTが作った電卓を比較してみます。

2023年に管理人が作った電卓

見た目は質素ですが、しっかりと計算可能です。

電卓

2023年に作った電卓ですが、音が出るように改良してたみたいです。↓

2023年に管理人が作った電卓のコード

<!DOCTYPE html>
<html lang="ja">
<head>

    <meta charset="utf-8">

    <title>電卓</title>

    <style>

        .botan{

            height: 50px;
            width: 50px;
            box-sizing: border-box;
            border: 1px solid #68779a;
            background: hsl(174, 30%, 86%);
            cursor: pointer;

        }

    </style>
        
    <script>

        let tmp="";

        function num(num){

            document.getElementById('edit_area').innerHTML = String(tmp+num) ;
            tmp=tmp+num;
            
        }

        function result(){

            document.getElementById('edit_area').innerHTML =eval( tmp ) ;

        }

        function reset(){
            tmp="";
            document.getElementById('edit_area').innerHTML =tmp;
        }

    </script>

</head>
<body>
 
    <div id="edit_area"></div>
    <br></br>
    <input type="button" value="7" onclick="num(7)" class="botan">
    <input type="button" value="8" onclick="num(8)" class="botan">
    <input type="button" value="9" onclick="num(9)" class="botan">
    <input type="button" value="×" onclick="num('*')" class="botan">
    <br></br>

    <input type="button" value="4" onclick="num(4)" class="botan">
    <input type="button" value="5" onclick="num(5)" class="botan">
    <input type="button" value="6" onclick="num(6)" class="botan">
    <input type="button" value="－" onclick="num('-')" class="botan">

    <br></br>

    <input type="button" value="1" onclick="num(1)" class="botan">
    <input type="button" value="2" onclick="num(2)" class="botan">
    <input type="button" value="3" onclick="num(3)" class="botan">
    <input type="button" value="＋" onclick="num('+')" class="botan">

     <br></br>
     
    <input type="button" value="0" onclick="num(0)" class="botan">
    <input type="button" value="." onclick="num('.')" class="botan">
   
    <input type="button" value="÷" onclick="num('/')" class="botan">
    <input type="button" value="＝" onclick="result()" class="botan">
    <input type="button" value="C" onclick="reset()" class="botan">

</body>

</html>

使用した関数

電卓を作るのに良い関数はないか探した所、eval関数を見つけました。

eval関数は、文字列として表現された JavaScript コードを評価します。

2023年のChatGPTに作らせた電卓

チャッピーに依頼して、、、

こんな見た目の電卓を作ってくれました。

動きませんでした。

2023年のChatGPTに作らせた電卓のコード

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Calculator</title>
  <link rel="stylesheet" href="./css/電卓.css">
</head>
<body>
  <div class="calculator">
    <input type="text" id="result" disabled>
    <div class="row">
      <button class="number" value="7">7</button>
      <button class="number" value="8">8</button>
      <button class="number" value="9">9</button>
      <button class="operator" value="/">/</button>
    </div>
    <div class="row">
      <button class="number" value="4">4</button>
      <button class="number" value="5">5</button>
      <button class="number" value="6">6</button>
      <button class="operator" value="*">*</button>
    </div>
    <div class="row">
      <button class="number" value="1">1</button>
      <button class="number" value="2">2</button>
      <button class="number" value="3">3</button>
      <button class="operator" value="-">-</button>
    </div>
    <div class="row">
      <button class="number" value="0">0</button>
      <button class="clear" value="clear">C</button>
      <button class="equal" value="=">=</button>
      <button class="operator" value="+">+</button>
    </div>
  </div>
  <script src="./js/電卓.js"></script>
</body>
</html>

JavaScript

const result = document.getElementById('result');
const numbers = document.querySelectorAll('.number');
const operators

CSS

.calculator {
  width: 200px;
  margin: 0 auto;
  border: 1px solid black;
  padding: 10px;
}

.row {
  display: flex;
}

button {
  width: 50px;
  height: 50px;
  font-size: 24px;
  margin: 5px;
  border-radius: 5px;
}

.number {
  background-color: lightgray;
}

.operator {
  background-color: gray;
  color: white;
}

.clear {
  background-color: red;
  color: white;
}

.equal {
  background-color: blue;
  color: white;
}

#result {
  width: 100%;
  margin-bottom: 10px;
  font-size: 24px;
  text-align: right;
}

2026年のChatGPTに作らせた電卓

古感がなくなって今風のオシャレな感じな見た目です。

2026年の作ってっくれた電卓はちゃんと動きました！

2026年のChatGPTに作らせた電卓のコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>電卓</title>
<style>
  body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #f0f0f0;
  }
  .calculator {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  }
  #display {
    width: 100%;
    height: 50px;
    font-size: 24px;
    margin-bottom: 10px;
    text-align: right;
    padding: 5px;
  }
  .buttons {
    display: grid;
    grid-template-columns: repeat(4, 60px);
    gap: 10px;
  }
  button {
    height: 50px;
    font-size: 18px;
    cursor: pointer;
  }
</style>
</head>
<body>

<div class="calculator">
  <input type="text" id="display" disabled>
  <div class="buttons">
    <button onclick="append('7')">7</button>
    <button onclick="append('8')">8</button>
    <button onclick="append('9')">9</button>
    <button onclick="append('/')">÷</button>

    <button onclick="append('4')">4</button>
    <button onclick="append('5')">5</button>
    <button onclick="append('6')">6</button>
    <button onclick="append('*')">×</button>

    <button onclick="append('1')">1</button>
    <button onclick="append('2')">2</button>
    <button onclick="append('3')">3</button>
    <button onclick="append('-')">−</button>

    <button onclick="append('0')">0</button>
    <button onclick="append('.')">.</button>
    <button onclick="calculate()">=</button>
    <button onclick="append('+')">＋</button>

    <button onclick="clearDisplay()" style="grid-column: span 4;">C</button>
  </div>
</div>

<script>
function append(value) {
  document.getElementById("display").value += value;
}

function clearDisplay() {
  document.getElementById("display").value = "";
}

function calculate() {
  const display = document.getElementById("display");
  try {
    display.value = eval(display.value);
  } catch {
    display.value = "エラー";
  }
}
</script>

</body>
</html>