この記事では、JavaScriptで簡単な電卓を作る方法を説明します。プログラミング初心者の方でも安心して読み進められるように、HTML・JavaScriptの基礎を使って、簡単な電卓アプリを作っていきます。
電卓を作るために使う技術
この電卓では次の2つの技術を使います。
| 技術 | 内容 |
| HTML | ボタンや表示画面を作る |
| JavaScript | ボタンの動きや計算処理を実装する |
電卓の仕様
今回作成する電卓の仕様です。
１．用意するボタンとクリック時の動作は以下のとおり。
| ボタン | クリック時の動作 |
| 0 | 数値0の入力 |
| 1 | 数値1の入力 |
| 2 | 数値2の入力 |
| 3 | 数値3の入力 |
| 4 | 数値4の入力 |
| 5 | 数値5の入力 |
| 6 | 数値6の入力 |
| 7 | 数値7の入力 |
| 8 | 数値8の入力 |
| 9 | 数値9の入力 |
| + | 加算の開始 |
| – | 減算の開始 |
| * | 乗算の開始 |
| / | 除算の開始 |
| = | 計算の表示 |
| C | それまでの作業をクリアする |
２．数値、計算結果はパネルに表示する。
３．ゼロで除算した場合は、「ゼロで除算はNG」とメッセージを表示する。
４．＋をクリック→ーをクリックのように四則演算のボタンを続けてクリックした場合は、最後にクリックしたボタンが有効になる。
HTMLで見た目を作る
HTMLで電卓の「画面部分」を作ります。
■index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>電卓</title>
<style>
#display {
width: 240px;
height: 40px;
font-size: 24px;
text-align: right;
margin-bottom: 10px;
}
button {
width: 60px;
height: 60px;
font-size: 20px;
margin: 2px;
}
</style>
</head>
<body>
<h1>電卓</h1>
<input type="text" id="display" disabled>
<br>
<button onclick="appendNumber('7')">7</button>
<button onclick="appendNumber('8')">8</button>
<button onclick="appendNumber('9')">9</button>
<button onclick="setOperator('+')">+</button>
<br>
<button onclick="appendNumber('4')">4</button>
<button onclick="appendNumber('5')">5</button>
<button onclick="appendNumber('6')">6</button>
<button onclick="setOperator('-')">-</button>
<br>
<button onclick="appendNumber('1')">1</button>
<button onclick="appendNumber('2')">2</button>
<button onclick="appendNumber('3')">3</button>
<button onclick="setOperator('*')">*</button>
<br>
<button onclick="appendNumber('0')">0</button>
<button onclick="clearDisplay()">C</button>
<button onclick="calculate()">=</button>
<button onclick="setOperator('/')">/</button>
<script src="script.js"></script>
</body>
</html>JavaScriptで動きをつける
ボタンを押したときの動きや計算処理をJavaScriptで書いていきます。
■script.js
// 画面に表示される現在の入力内容（数字や演算式）
let currentInput = '';
// 現在選択されている演算子（+ - * /）
let operator = '';
// 最初に入力された数値（計算の第一オペランド）
let firstOperand = null;
// 次の数値を待っているかどうか（trueなら新しい数値を入力中）
let waitingForSecondOperand = false;
// 数字ボタンが押されたときに呼び出される関数
function appendNumber(number) {
if (waitingForSecondOperand) {
// 演算子を押した直後なら、新しい数値として上書きする
currentInput = number;
waitingForSecondOperand = false;
} else {
// それ以外は、今の入力に数字を追加していく
currentInput += number;
}
updateDisplay(); // 画面を更新
}
// 演算子（+ - * /）ボタンが押されたときに呼び出される関数
function setOperator(nextOperator) {
if (operator && waitingForSecondOperand) {
// 連続して演算子を押した場合は、最後に押した演算子だけ有効にする
operator = nextOperator;
return;
}
if (firstOperand === null) {
// 最初の数値がまだ設定されていないなら、今の入力を第一オペランドにする
firstOperand = parseFloat(currentInput);
} else if (operator) {
// すでに演算子が設定されていたら計算を実行
const result = performCalculation(firstOperand, parseFloat(currentInput));
if (result === 'ゼロで除算はNG') {
// ゼロ除算エラーの場合
currentInput = result;
firstOperand = null;
operator = '';
waitingForSecondOperand = false;
updateDisplay();
return;
}
// 計算結果を次の第一オペランドに設定
firstOperand = result;
currentInput = String(result);
}
// 次に使う演算子をセット
operator = nextOperator;
waitingForSecondOperand = true; // 次は第二オペランドを入力する準備
updateDisplay(); // 画面を更新
}
// 実際に計算を行う関数
function performCalculation(first, second) {
if (operator === '+') {
return first + second;
} else if (operator === '-') {
return first - second;
} else if (operator === '*') {
return first * second;
} else if (operator === '/') {
if (second === 0) {
// ゼロで割ろうとしたらエラーメッセージを返す
return 'ゼロで除算はNG';
}
return first / second;
}
return second; // 演算子がなければ、第二オペランドをそのまま返す
}
// 「＝」ボタンが押されたときに呼び出される関数
function calculate() {
if (operator && !waitingForSecondOperand) {
const result = performCalculation(firstOperand, parseFloat(currentInput));
if (result === 'ゼロで除算はNG') {
currentInput = result;
} else {
currentInput = String(result);
firstOperand = result;
}
operator = ''; // 計算後は演算子リセット
waitingForSecondOperand = false; // 計算後は通常状態に戻す
updateDisplay();
}
}
// 「C」ボタンが押されたときに呼び出される関数（リセット）
function clearDisplay() {
currentInput = '';
firstOperand = null;
operator = '';
waitingForSecondOperand = false;
updateDisplay();
}
// 画面の表示を更新する関数
function updateDisplay() {
document.getElementById('display').value = currentInput;
}コードのポイントまとめ
- waitingForSecondOperandで「演算子を押したあとの状態」を管理
- setOperator関数で「演算子を連続押し対応」
- performCalculation関数で「ゼロ除算チェック」
- clearDisplay関数でリセットできる
実際に動かしてみましょう！
すべてのファイルを同じフォルダに保存して、index.htmlをブラウザで開いてみましょう。
- 演算子を続けて押すと最後に押した演算子だけ有効
- ゼロで割ると「ゼロで除算はNG」と表示
- 計算結果もちゃんとパネルに表示
これで電卓が完成です！
まとめ
今回は、JavaScriptで簡単な電卓を作る方法を説明しました。
- パネルに数値と結果を表示
- 演算子を連続押し対応
- ゼロ除算エラー表示
プログラミングの基本を学ぶのにとても良い練習になります。自分だけのオリジナル電卓を作ってみてくださいね！
