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

はじめに
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('1')">1</button>
    <button onclick="appendToDisplay('2')">2</button>
    <button onclick="appendToDisplay('3')">3</button>
    <button onclick="appendToDisplay('+')">+</button>
    <button onclick="appendToDisplay('-')">-</button>
    <button onclick="appendToDisplay('*')">*</button>
    <button onclick="appendToDisplay('/')">/</button>
    <button onclick="calculateResult()">=</button>
  </div>
  <script>
    function clearDisplay() {
      document.getElementById('display').value = '';
    }

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

    function calculateResult() {
      const result = eval(document.getElementById('display').value);
      document.getElementById('display').value = result;
    }
  </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 === '=') {
            display.value = eval(display.value);
          } else if (this.innerText === 'C') {
            display.value = '';
          } else {
            display.value += this.innerText;
          }
        });
      });
    };
  </script>
</head>
<body>
  <div id="calculator">
    <input type="text" id="display" readonly>
    <button>C</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>+</button>
    <button>-</button>
    <button>*</button>
    <button>/</button>
    <button>=</button>
  </div>
</body>
</html>

使い方・対処法・注意点

○入力値の制限

電卓の入力欄に制限を設けることで、誤った入力を防ぐことができます。

下記のサンプルコードでは、入力欄の属性に「pattern」を追加し、正規表現で入力可能な文字を制限しています。

<input type="text" id="display" pattern="[0-9+\-*/.]*" readonly>

○エラー処理

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

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

function calculateResult() {
  try {
    const result = eval(document.getElementById('display').value);
    document.getElementById('display').value = result;
  } catch (error) {
    document.getElementById('display').value = 'Error';
  }
}

○セキュリティ対策

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

特に、eval()関数は悪意のあるコードを実行するリスクがあるため、代替手段を検討することが望ましいです。

カスタマイズ方法

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

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

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

<style>
  #calculator {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 200px;
    margin: 0 auto;
  }

  #display {
    grid-column: 1 / -1;
    height: 30px;
    border: 1px solid #ccc;
    text-align: right;
    padding-right: 5px;
  }

  button {
    height: 40px;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    font-size: 18px;
  }

  button:hover {
    background-color: #e5e5e5;
  }
</style>

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

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

○機能の追加・拡張

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

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

応用例とサンプルコード

○税込み価格計算機能

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

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

function calculateTaxIncludedPrice() {
  const taxRate = 0.1;
  const price = parseFloat(document.getElementById('display').value);
  const taxIncludedPrice = price * (1 + taxRate);
  document.getElementById('display').value = taxIncludedPrice;
}

○通貨換算機能

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

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

function convertCurrency() {
  const exchangeRate = 110; // 仮の為替レート (1ドル = 110円)
  const amount = parseFloat(document.getElementById('display').value);
  const convertedAmount = amount * exchangeRate;
  document.getElementById('display').value = convertedAmount;
}

○BMI計算機能

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

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

function calculateBMI() {
  const height = parseFloat(document.getElementById('height').value) / 100; // cmからmに変換
  const weight = parseFloat(document.getElementById('weight').value);
  const bmi = weight / (height * height);
  document.getElementById('display').value = bmi.toFixed(1);
}

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

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

この記事を読めば、あなたも簡単な電卓アプリを作成することができるようになります。