WEBページに計算機能（電卓）を設置してみよう。

こんにちは皆さん！
冬の寒さが身に沁みるようになってきました。PC作業するときはどうしても動かなくなってしまいますので、部屋を暖かくして健康に注意して過ごしましょう。私は最近ミカンの食べ過ぎで指先が黄色くなっております。（1日２個までですね。🍊）

今日は、WEBページに電卓を設置する方法についてお話します!
完成形は下記のようにWEBページ上で使える電卓を作っていきます。

計算結果:

作成にはHTML と JavaScript を使用します。
HTML で電卓部分のインターフェースを作成し、計算部分をJavaScript で機能を実装します。

JavaScript の書き方は応用編で詳しく説明されていますのでそちらを確認ください！
JvaScriptの概要

ではコードの解説です。

HTMLのコード

<div id="calculator">
    <input type="text" id="display" name="display">
    <button onclick="inputNumber('1')">1</button>
    <button onclick="inputNumber('2')">2</button>
    <button onclick="inputNumber('3')">3</button>
    <button onclick="inputOperator('+')">+</button>
    <button onclick="inputNumber('4')">4</button>
    <button onclick="inputNumber('5')">5</button>
    <button onclick="inputNumber('6')">6</button>
    <button onclick="inputOperator('-')">-</button>
    <button onclick="inputNumber('7')">7</button>
    <button onclick="inputNumber('8')">8</button>
    <button onclick="inputNumber('9')">9</button>
    <button onclick="inputOperator('*')">*</button>
    <button onclick="inputNumber('0')">0</button>
    <button onclick="clearDisplay()">C</button>
    <button type="button" onclick="calculateResult()">=</button>
    <button onclick="inputOperator('/')">/</button>
    <button type="button" onclick="outputResult()">出力</button>
</div>

<div id="result">計算結果: <span id="calculation-result"></span></div>

電卓の主要部分

<div id="calculator">...</div>: この部分は電卓の主要の部分です。

入力フィールド

<input type="text" id="display" name="display">: 数字と計算結果が表示されるテキストフィールドです。

数字と演算子のボタン

<button onclick="inputNumber('1')">1</button>: 「1」ボタンです。このボタンをクリックすると、inputNumber('1')関数が呼び出され、テキストフィールドに「1」が追加されます。それ以外も同様です。

特殊なボタン

clearDisplay(): テキストフィールドをクリアするためのボタン（C）です。
calculateResult(): 入力された式を計算し、結果をテキストフィールド（display）に表示するためのボタン（＝）です。

計算結果の表示

<div id="result">計算結果: <span id="calculation-result"></span></div>: 計算結果が表示される場所です。計算結果は<span id="calculation-result"></span>内に表示されます。無ても機能します。

JavaScriptのコード

<script>
function inputNumber(number) {
    var display = document.getElementById('display');
    display.value += number;
}

function inputOperator(operator) {
    var display = document.getElementById('display');
    display.value += operator;
}

function calculateResult() {
    var display = document.getElementById('display');
    try {
        display.value = eval(display.value); 
    } catch (e) {
        display.value = 'エラー'; 
    }
}

function outputResult() {
    var display = document.getElementById('display').value;
    var resultElement = document.getElementById('calculation-result');
    try {
        var result = eval(display);
        resultElement.innerText = result; 
    } catch (e) {
        resultElement.innerText = 'エラー'; 
    }
}

function clearDisplay() {
    var display = document.getElementById('display');
    display.value = '';
    document.getElementById('calculation-result').innerText = ''; 
}
</script>

inputNumber(number)関数

この関数は数字のボタンをクリックしたときに呼び出されます。
引数は、ボタンに表示されている数字です。
関数は、displayというIDを持つテキストフィールド（電卓のディスプレイ）の値に、クリックされた数字を追加します。

inputOperator(operator)関数

この関数は演算子（+、-、*、/）のボタンをクリックしたときに呼び出されます。
引数operatorは、ボタンに表示されている演算子です。
関数は、displayの値に、クリックされた演算子を追加します。

calculateResult()関数

この関数は「=」ボタンをクリックしたときに呼び出されます。
関数はeval関数を使用して、displayに入力された数式の計算結果を求め、その結果をdisplayに表示します。
もし計算中にエラーが発生した場合（例えば、無効な数式の場合）、displayに「エラー」と表示します。

outputResult()関数

この関数は、別の方法で計算結果を表示するために用いられます。
calculation-resultというIDを持つ要素に計算結果を表示します。
計算中にエラーが発生した場合、calculation-resultに「エラー」と表示します。

clearDisplay()関数

この関数は、ディスプレイと計算結果をクリアするために使用されます。
displayの値を空にし、calculation-resultのテキストもクリアします。

コードのままだと元のテーマのCSSに引っ張られてしまうので、CSSでデザインを整えて完成です！
実際に実装する際にはもっとエラー処理について考えないといけないですね。

まとめ

プラグインを探せば電卓の機能を実装するものはいくらでもありそうですが、あえてコードを書いてみました。
特に、WEB上で計算させる金融関連のサイトや、工学、物販の電卓機能は使えそうですね。

「本当に使い道があるのか？」というツッコミへの回答は次回までに考えます。

今回で私の今年のブログ更新は最後になりましたが、皆様良いお年をお過ごしください。

WEBページに計算機能（電卓）を設置してみよう。