はじめに
なぜ今回、電卓システムをJavaScriptで作るに至ったかというと、私は以前、C＃の方で電卓システムを作り、難しかった記憶があり、それを私はC＃の経験をもとに、JSで新しい挑戦してみたいと思い、この計画を立てました。今回は簡易なボタン認識と四則演算のシステムを作っていこうと思います。
小数の計算については、うまくいかなかったので省かせていただきます。ご了承ください。
完成形
codepen
https://codepen.io/black-lacksun/pen/pvzPzOE
HTML
まず最初にHTMLのプログラムを紹介をします。（headの説明は省略）
class
"calculator"
電卓全体を囲むコンテナ
"buttons"
ボタンを配置するエリア
"button"
各ボタンの定義
appendNumber ０～９の数字
chooseOperator 四則演算
clearDisplay クリア
calculate イコール
id
"expretion"
計算式を表示するエリア（０は初期値）
"display"
計算結果を示すエリア（０は初期値）
Java Script
次にJSのプログラムを紹介します。
変数の初期化
ここでは、それぞれの変数を初期化しています。
関数
まず１つ目の関数は、数字を押されたときに呼ばれる関数です。
引数numberに押された数字が渡され、currentNumberに押された数字を追加し、updateDisplay関数を呼び出してディスプレイを更新します。
次に２つ目の関数は、演算子ボタンが押されたときに呼ばれる関数です。
引数selectOperatorに押された演算子が渡され、currentNumberが空でない場合に処理を行います。
また、previousNumberが空でない場合に、calculate関数を呼び出して計算します。
operatorに選択された演算子を設定し、previousNumberにcurrentNumberを設定します。
最後にexpressionを更新し、currentNumberをリセットしてディスプレイを更新します。
３つ目の関数は、計算を実行する関数です。
previousNumberとcurrentNumberを整数に変換し、演算子に応じて計算を行い、結果をcalculationに格納します。
そして、計算式をexpressionに更新し、currentNumberに計算結果を設定します。
最後に演算子とpreviousNumberをリセットし、ディスプレイを更新します。
４つ目の関数はディスプレイをクリアする関数です。
すべての変数を初期化し、ディスプレイを更新します。
５つ目の関数はディスプレイを更新する関数です。
ディスプレイび現在の数値や、計算式を表示したり、currentNumberが空の場合は０を表示します。
CSS
最後にCSSのプログラムを紹介します。
body
全体のスタイルを設定しています。
背景色を薄いグレーにし、ディスプレイをフレックスボックスにして、中央配置にしています。
.calculator
電卓全体のスタイルを設定しています。
背景色を白にして、パディング（余白）を追加し、角を丸くし、影を付けました。
.display .expression
計算結果と計算式を表示するエリアのスタイルを設定しています。
フォントを大きくし、右揃え、境界線と丸みを追加しています。
計算式エリアの文字は少し小さく灰色になるように設定を追加しています。
###.button, .buttons
グリッドレイアウトなるものを使用しボタンの列を4列に設定したり、幅を均等にしています。
ここでも、フォントサイズ、背景色、丸みなどを設定しています。
まとめ
作ってみての感想ですが、システム自体はC＃より単純にできたような感じがします。しかしながら、ボタンの配置について、C＃はカーソルでボタン配置ができていたのでCSSの大変さが身に沁みます。今後はもう少しJSなどの言語を勉強してこれより良い電卓システムを作ってみたいものです。