HTML電卓入門！手軽に作成・カスタマイズする5つの方法

📋 対応バージョン

HTML HTML5

CSS CSS3

JavaScript ES6

Chrome 57+ ⓘ

Firefox 52+ ⓘ

Safari 10.1+ ⓘ

Edge 16+ ⓘ

IE 11 ⓘ

完全対応一部機能制限 ⓘ

はじめに
HTML電卓の基本概要
- ○電卓の役割とHTMLでの実装
- ○HTML電卓の基本構成
手軽に作成する方法
- ○基本的なHTML電卓の作成
- ○JavaScriptを使用した電卓の作成
使い方・対処法・注意点
カスタマイズ方法
- ○デザインのカスタマイズ
- ○機能の追加・拡張
応用例とサンプルコード
まとめ

はじめに

この記事を読めば、HTML電卓を作成・カスタマイズすることができるようになります！

HTML電卓の基本概要

電卓は、様々な計算を手軽に行うことができる便利なツールです。

HTMLを使用して、ウェブページ上で動作する電卓を作成することが可能になります。

この記事では、初心者でも簡単に作成できるHTML電卓の作り方やカスタマイズ方法、注意点などを詳しく解説していきます。

○電卓の役割とHTMLでの実装

電卓は、四則演算や平方根などの基本的な計算機能を持っています。

HTMLでは、電卓のボタンや表示部分を作成し、JavaScriptを使用して計算処理を実装する仕組みです。

○HTML電卓の基本構成

HTML電卓は、主に次のような要素で構成されています。

入力欄
演算子ボタン（加算、減算、乗算、除算）
数字ボタン（0〜9）
計算ボタン（=）
クリアボタン（C）

手軽に作成する方法

○基本的なHTML電卓の作成

下記のサンプルコードでは、HTMLとJavaScriptを使用して、基本的な電卓を作成しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTML電卓入門</title>
</head>
<body>
  <div id="calculator">
    <input type="text" id="display" readonly>
    <button onclick="clearDisplay()">C</button>
    <button onclick="appendToDisplay('7')">7</button>
    <button onclick="appendToDisplay('8')">8</button>
    <button onclick="appendToDisplay('9')">9</button>
    <button onclick="appendToDisplay('/')">/</button>
    <button onclick="appendToDisplay('4')">4</button>
    <button onclick="appendToDisplay('5')">5</button>
    <button onclick="appendToDisplay('6')">6</button>
    <button onclick="appendToDisplay('*')">*</button>
    <button onclick="appendToDisplay('1')">1</button>
    <button onclick="appendToDisplay('2')">2</button>
    <button onclick="appendToDisplay('3')">3</button>
    <button onclick="appendToDisplay('-')">-</button>
    <button onclick="appendToDisplay('0')">0</button>
    <button onclick="appendToDisplay('.')">.</button>
    <button onclick="calculateResult()">=</button>
    <button onclick="appendToDisplay('+')">+</button>
  </div>
  <script>
    function clearDisplay() {
      document.getElementById('display').value = '';
    }

    function appendToDisplay(value) {
      document.getElementById('display').value += value;
    }

    function calculateResult() {
      try {
        const expression = document.getElementById('display').value;
        if (isValidExpression(expression)) {
          const result = evaluateExpression(expression);
          document.getElementById('display').value = result;
        } else {
          document.getElementById('display').value = 'Error';
        }
      } catch (error) {
        document.getElementById('display').value = 'Error';
      }
    }

    function isValidExpression(expression) {
      return /^[0-9+\-*/.() ]+$/.test(expression);
    }

    function evaluateExpression(expression) {
      return Function('"use strict"; return (' + expression + ')')();
    }
  </script>
</body>
</html>

○JavaScriptを使用した電卓の作成

下記のサンプルコードでは、JavaScriptを用いて電卓の機能を実装しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTML電卓入門</title>
  <script>
    window.onload = function() {
      const display = document.getElementById('display');
      const buttons = document.querySelectorAll('button');

      buttons.forEach(button => {
        button.addEventListener('click', function() {
          if (this.innerText === '=') {
            try {
              const expression = display.value;
              if (isValidExpression(expression)) {
                display.value = evaluateExpression(expression);
              } else {
                display.value = 'Error';
              }
            } catch (error) {
              display.value = 'Error';
            }
          } else if (this.innerText === 'C') {
            display.value = '';
          } else {
            display.value += this.innerText;
          }
        });
      });

      function isValidExpression(expression) {
        return /^[0-9+\-*/.() ]+$/.test(expression);
      }

      function evaluateExpression(expression) {
        return Function('"use strict"; return (' + expression + ')')();
      }
    };
  </script>
</head>
<body>
  <div id="calculator">
    <input type="text" id="display" readonly>
    <button>C</button>
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <button>/</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>*</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>-</button>
    <button>0</button>
    <button>.</button>
    <button>=</button>
    <button>+</button>
  </div>
</body>
</html>

使い方・対処法・注意点

○入力値の制限

電卓の計算処理において、適切な入力値制限を設けることで、誤った計算や不正な入力を防ぐことができるでしょう。

上記のサンプルコードでは、isValidExpression関数を使用して、数字と基本的な演算子のみを許可する仕組みを実装しています。

○エラー処理

計算式に誤りがある場合、エラーが発生する可能性があります。

下記のサンプルコードでは、例外処理を用いてエラーが発生した場合にメッセージを表示する対策を講じています。

function calculateResult() {
  try {
    const expression = document.getElementById('display').value;
    if (isValidExpression(expression)) {
      const result = evaluateExpression(expression);
      document.getElementById('display').value = result;
    } else {
      document.getElementById('display').value = 'Error';
    }
  } catch (error) {
    document.getElementById('display').value = 'Error';
  }
}

○セキュリティ対策

電卓の実装において、セキュリティ対策を行うことも重要です。

上記のコードでは、eval()関数の代わりにFunctionコンストラクタと入力値検証を組み合わせることで、セキュリティリスクを軽減しています。

カスタマイズ方法

○デザインのカスタマイズ

CSSを使用して、電卓のデザインをカスタマイズすることができます。

例えば、ボタンの背景色やフォントサイズを変更したり、入力欄の枠線を整えることが可能です。

<style>
  #calculator {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 300px;
    margin: 20px auto;
    padding: 20px;
    border: 2px solid #ddd;
    border-radius: 10px;
  }

  #display {
    grid-column: 1 / -1;
    height: 50px;
    border: 1px solid #ccc;
    text-align: right;
    padding-right: 10px;
    font-size: 18px;
    border-radius: 5px;
  }

  button {
    height: 50px;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    font-size: 18px;
    border-radius: 5px;
    cursor: pointer;
  }

  button:hover {
    background-color: #e5e5e5;
  }

  button:active {
    background-color: #d5d5d5;
  }
</style>

上記のCSSコードは、電卓のデザインを整えるための例です。

このコードをHTMLファイルの<head>タグ内に追加することで、電卓の見た目をカスタマイズできるでしょう。

○機能の追加・拡張

電卓に新たな機能を追加することもできます。

例えば、パーセント計算やルート計算の機能を追加して、電卓の使い勝手を向上させることが可能になります。

応用例とサンプルコード

○税込み価格計算機能

電卓に税込み価格計算機能を追加することで、簡単に税込価格を求めることができます。

下記のサンプルコードでは、消費税率を10%として税込み価格を計算しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>税込み価格計算機能付き電卓</title>
</head>
<body>
  <div id="calculator">
    <input type="text" id="display" readonly>
    <!-- 基本的なボタン配置 -->
    <button onclick="clearDisplay()">C</button>
    <button onclick="appendToDisplay('7')">7</button>
    <button onclick="appendToDisplay('8')">8</button>
    <button onclick="appendToDisplay('9')">9</button>
    <button onclick="calculateTaxIncludedPrice()">税込</button>
  </div>
  
  <script>
    function calculateTaxIncludedPrice() {
      const taxRate = 0.1;
      const price = parseFloat(document.getElementById('display').value);
      if (!isNaN(price)) {
        const taxIncludedPrice = price * (1 + taxRate);
        document.getElementById('display').value = taxIncludedPrice;
      } else {
        document.getElementById('display').value = 'Error';
      }
    }
    
    function clearDisplay() {
      document.getElementById('display').value = '';
    }

    function appendToDisplay(value) {
      document.getElementById('display').value += value;
    }
  </script>
</body>
</html>

○通貨換算機能

電卓に通貨換算機能を追加することで、異なる通貨間の金額を簡単に換算することができます。

下記のサンプルコードでは、ドルと円の換算を行っています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>通貨換算機能付き電卓</title>
</head>
<body>
  <div id="calculator">
    <input type="text" id="display" readonly>
    <!-- 基本的なボタン配置 -->
    <button onclick="clearDisplay()">C</button>
    <button onclick="appendToDisplay('1')">1</button>
    <button onclick="appendToDisplay('2')">2</button>
    <button onclick="appendToDisplay('3')">3</button>
    <button onclick="convertCurrency()">USD→JPY</button>
  </div>
  
  <script>
    function convertCurrency() {
      const exchangeRate = 150; // 2025年6月時点の概算レート (1ドル = 150円)
      const amount = parseFloat(document.getElementById('display').value);
      if (!isNaN(amount)) {
        const convertedAmount = amount * exchangeRate;
        document.getElementById('display').value = convertedAmount;
      } else {
        document.getElementById('display').value = 'Error';
      }
    }
    
    function clearDisplay() {
      document.getElementById('display').value = '';
    }

    function appendToDisplay(value) {
      document.getElementById('display').value += value;
    }
  </script>
</body>
</html>

○BMI計算機能

電卓にBMI（体格指数）計算機能を追加することで、身長と体重からBMIを計算することができます。

下記のサンプルコードでは、身長と体重を入力してBMIを計算しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>BMI計算機能付き電卓</title>
</head>
<body>
  <div id="calculator">
    <label for="height">身長(cm):</label>
    <input type="number" id="height" placeholder="例: 170">
    
    <label for="weight">体重(kg):</label>
    <input type="number" id="weight" placeholder="例: 60">
    
    <input type="text" id="display" readonly placeholder="BMI結果">
    <button onclick="calculateBMI()">BMI計算</button>
    <button onclick="clearAll()">クリア</button>
  </div>
  
  <script>
    function calculateBMI() {
      const height = parseFloat(document.getElementById('height').value) / 100; // cmからmに変換
      const weight = parseFloat(document.getElementById('weight').value);
      
      if (!isNaN(height) && !isNaN(weight) && height > 0 && weight > 0) {
        const bmi = weight / (height * height);
        document.getElementById('display').value = bmi.toFixed(1);
      } else {
        document.getElementById('display').value = 'Error';
      }
    }
    
    function clearAll() {
      document.getElementById('height').value = '';
      document.getElementById('weight').value = '';
      document.getElementById('display').value = '';
    }
  </script>
</body>
</html>

このように、HTMLとJavaScriptを用いて電卓を作成し、様々な機能を追加・拡張することができます。

初心者でも分かりやすいように実装方法やカスタマイズ方法を解説しましたので、ぜひ試してみてください。

この記事を読めば、あなたも実用的な電卓アプリを作成することができるようになるでしょう。