はじめに

この記事を読めば、HTMLで計算を行うことができるようになります。

今回は、初心者向けに分かりやすく、徹底解説していきます。

それでは、さっそく解説を始めましょう。

●HTMLでの計算とは

HTMLは、ウェブページの構造を作成するための言語です。

しかし、計算を行うためには、HTMLと連携して動作するJavaScriptが必要となります。

この記事では、HTMLとJavaScriptを組み合わせて計算を行う方法を学んでいきます。

○JavaScriptとの関連性

JavaScriptは、ウェブページにインタラクティブな要素を追加するプログラミング言語です。

HTMLで作成したウェブページに、JavaScriptを埋め込むことで、計算機能を実装することができます。

○サンプルコードを使った説明

次のサンプルコードは、HTMLとJavaScriptを組み合わせて、簡単な足し算を行うウェブページを作成する例です。

<!DOCTYPE html>
<html>
<head>
  <title>HTMLで計算を行う</title>
  <script>
    function addNumbers() {
      var num1 = parseFloat(document.getElementById('num1').value);
      var num2 = parseFloat(document.getElementById('num2').value);
      var sum = num1 + num2;
      document.getElementById('result').innerHTML = '結果: ' + sum;
    }
  </script>
</head>
<body>
  <h1>足し算を行う</h1>
  <input type="text" id="num1" placeholder="数字を入力">
  <input type="text" id="num2" placeholder="数字を入力">
  <button onclick="addNumbers()">足し算する</button>
  <p id="result"></p>
</body>
</html>

HTMLで計算を行う

足し算を行う

【計算の使い方】

それでは、足し算だけでなく、引き算、掛け算、割り算の使い方も見ていきましょう。

○足し算

足し算は、上記のサンプルコードで示したように、2つの入力値を取得し、それらを加算した結果を表示します。

○引き算

引き算は、足し算と同様に2つの入力値を取得し、それらを減算した結果を表示します。

サンプルコードは次の通りです。

<!DOCTYPE html>
<html>
<head>
  <title>HTMLで計算を行う</title>
  <script>
    function subtractNumbers() {
      var num1 = parseFloat(document.getElementById('num1').value);
      var num2 = parseFloat(document.getElementById('num2').value);
      var difference = num1 - num2;
      document.getElementById('result').innerHTML = '結果: ' + difference;
    }
  </script>
</head>
<body>
  <h1>引き算を行う</h1>
  <input type="text" id="num1" placeholder="数字を入力">
  <input type="text" id="num2" placeholder="数字を入力">
  <button onclick="subtractNumbers()">引き算する</button>
  <p id="result"></p>
</body>
</html>

○掛け算

掛け算は、2つの入力値を取得し、それらを乗算した結果を表示します。

サンプルコードは次の通りです。

<!DOCTYPE html>
<html>
<head>
  <title>HTMLで計算を行う</title>
  <script>
    function multiplyNumbers() {
      var num1 = parseFloat(document.getElementById('num1').value);
      var num2 = parseFloat(document.getElementById('num2').value);
      var product = num1 * num2;
      document.getElementById('result').innerHTML = '結果: ' + product;
    }
  </script>
</head>
<body>
  <h1>掛け算を行う</h1>
  <input type="text" id="num1" placeholder="数字を入力">
  <input type="text" id="num2" placeholder="数字を入力">
  <button onclick="multiplyNumbers()">掛け算する</button>
  <p id="result"></p>
</body>
</html>

○割り算

割り算は、2つの入力値を取得し、それらを除算した結果を表示します。

サンプルコードは次の通りです。

<!DOCTYPE html>
<html>
<head>
  <title>HTMLで計算を行う</title>
  <script>
    function divideNumbers() {
      var num1 = parseFloat(document.getElementById('num1').value);
      var num2 = parseFloat(document.getElementById('num2').value);
      var quotient = num1 / num2;
      document.getElementById('result').innerHTML = '結果: ' + quotient;
    }
  </script>
</head>
<body>
  <h1>割り算を行う</h1>
  <input type="text" id="num1" placeholder="数字を入力">
  <input type="text" id="num2" placeholder="数字を入力">
  <button onclick="divideNumbers()">割り算する</button>
  <p id="result"></p>
</body>
</html>

【対処法、注意点、カスタマイズ】

それでは、計算処理における対処法、注意点、カスタマイズについて解説します。

○入力値のチェック

入力値が数値であることを確認するために、isNaN()関数を使用できます。

次のサンプルコードでは、入力値が数値でない場合にアラートを表示しています。

<!DOCTYPE html>
<html>
<head>
  <title>HTMLで計算を行う</title>
  <script>
    function addNumbers() {
      var num1 = parseFloat(document.getElementById('num1').value);
      var num2 = parseFloat(document.getElementById('num2').value);

      if (isNaN(num1) || isNaN(num2)) {
        alert('数字を入力してください。');
        return;
      }

      var sum = num1 + num2;
      document.getElementById('result').innerHTML = '結果: ' + sum;
    }
  </script>
</head>
<body>
  <h1>足し算を行う</h1>
  <input type="text" id="num1" placeholder="数字を入力">
  <input type="text" id="num2" placeholder="数字を入力">
  <button onclick="addNumbers()">足し算する</button>
  <p id="result"></p>
</body>
</html>

○エラーハンドリング

計算処理にエラーが発生した場合、適切にユーザーに通知することが重要です。

例えば、割り算で除数が0の場合、アラートを表示するようにできます。

<!DOCTYPE html>
<html>
<head>
  <title>HTMLで計算を行う</title>
  <script>
    function divideNumbers() {
      var num1 = parseFloat(document.getElementById('num1').value);
      var num2 = parseFloat(document.getElementById('num2').value);

      if (isNaN(num1) || isNaN(num2)) {
        alert('数字を入力してください。');
        return;
      }

      if (num2 === 0) {
        alert('0で割ることはできません。');
        return;
      }

      var quotient = num1 / num2;
      document.getElementById('result').innerHTML = '結果: ' + quotient;
    }
  </script>
</head>
<body>
  <h1>割り算を行う</h1>
  <input type="text" id="num1" placeholder="数字を入力">
  <input type="text" id="num2" placeholder="数字を入力">
  <button onclick="divideNumbers()">割り算する</button>
  <p id="result"></p>
</body>
</html>

○スタイルのカスタマイズ

CSSを用いて、ウェブページのスタイルをカスタマイズすることができます。

例えば、次のサンプルコードでは、結果の表示部分に背景色と余白を設定しています。

<!DOCTYPE html>
<html>
<head>
  <title>HTMLで計算を行う</title>
  <style>
    #result {
      background-color: lightgray;
      padding: 10px;
      margin-top: 10px;
    }
  </style>
  <script>
    function addNumbers() {
      var num1 = parseFloat(document.getElementById('num1').value);
      var num2 = parseFloat(document.getElementById('num2').value);

      if (isNaN(num1) || isNaN(num2)) {
        alert('数字を入力してください。');
        return;
      }

      var sum = num1 + num2;
      document.getElementById('result').innerHTML = '結果: ' + sum;
    }
  </script>
</head>
<body>
  <h1>足し算を行う</h1>
  <input type="text" id="num1" placeholder="数字を入力">
  <input type="text" id="num2" placeholder="数字を入力">
  <button onclick="addNumbers()">足し算する</button>
  <p id="result"></p>
</body>
</html>

このように、CSSを活用することで、計算結果の表示部分を見やすくカスタマイズできます。

さらに、フォントや色、ボタンのスタイルなども自由に変更することができます。