JavaScript電卓を1日で作ってみよう！HTML・CSS・JavaScriptの総復習
こんにちは、とまだです。
JavaScript電卓を作ろうとして、難しそうだと感じていませんか？
私も最初にサンプルコードを見た時は、複雑な関数の連続に圧倒されました。しかし実際に作ってみると、電卓の仕組みは驚くほどシンプルだったんです。
今回は、JavaScript電卓を確実に完成させるための手順を、初心者の方でも理解しやすいようにお伝えします。
電卓作りが「プログラミングの入門に最適」な3つの理由
プログラミングの基本要素がすべて詰まっている
電卓には、Webアプリ開発の核心的な技術がすべて含まれています。
ボタンを押すと反応する「イベント処理」、数字を記憶する「データ管理」、計算する「ロジック作成」、結果を表示する「画面更新」。これらはLINEやInstagramなどの本格的なWebアプリでも使われている基本技術です。
電卓を作れるようになることは、これらの技術をマスターしたということ。つまり、本格的なWebアプリの土台ができたということなんです。
「私にもできた！」の成功体験が味わえる
電卓の仕組みは実はとてもシンプルです。
基本的には、数字ボタンを押したら画面に表示し、演算子ボタンを押したら計算モードに切り替え、=ボタンを押したら答えを出す。たったこれだけです。
スマホで電話番号を押して通話ボタンを押すのと同じレベルの単純さ。自分で作った電卓で「2+3=5」が正しく計算できた瞬間の達成感は、プログラミング学習の大きなモチベーションになります。
Web開発の「三種の神器」が一気に学べる
電卓作りでは、HTML・CSS・JavaScriptというWeb開発の基本技術を同時に学べます。
HTMLで骨組みを作り、CSSで見た目を整え、JavaScriptで実際に動くようにする。家を建てる時の骨組み・インテリア・電気配線のように、それぞれが協力し合って初めて使える電卓が完成します。
JavaScript電卓作りの事前準備（5分で完了）
必要なツールは3つだけ！環境構築の手順
準備するものはたった3つです。
- テキストエディタ（VS Code推奨）
- Webブラウザ（Chrome推奨）
- 作業フォルダ（デスクトップでOK）
VS Codeは公式サイトからダウンロードして、インストーラーを実行するだけ。特別な設定は一切不要です。
作業フォルダは、デスクトップに「calculator」というフォルダを作って、その中に「index.html」「style.css」「script.js」という3つの空ファイルを用意するだけです。
HTML・CSS・JavaScriptファイルの基本構造
それぞれのファイルの役割を理解しましょう。
index.htmlは電卓の骨組みとなるファイルです。以下の基本構造から始めます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript電卓</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<!-- ここに電卓のパーツを追加 -->
</div>
<script src="script.js"></script>
</body>
</html>
style.cssでは見た目を設定します。まずは電卓を画面の中央に配置しましょう。
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.calculator {
background-color: #333;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
script.jsは動きを制御するファイルです。最初は動作確認のメッセージだけ入れておきます。
console.log("電卓の準備OK！");
電卓のデザインパターンと選び方
電卓のデザインは大きく分けて3パターンあります。
シンプル型は数字と基本的な演算子のみで、初心者向けに1時間で完成可能です。関数電卓型は三角関数や対数も計算でき、中級者向けに追加で2-3時間必要です。スマホ電卓型は横向きで関数電卓に変身し、上級者向けでデザインスキルも必要です。
今回はシンプル型で進めます。基本をマスターしてから機能を追加していく方が挫折しにくいですからね。
HTMLで電卓の見た目を作る（15分）
電卓の画面（ディスプレイ）部分の作成
まず、計算結果を表示する画面から作りましょう。
<div class="calculator">
<input type="text" class="display" id="display" value="0" readonly>
</div>
readonly属性で、キーボードから直接入力できないようにしています。これは実際の電卓と同じ仕様ですね。
数字ボタン（0-9）の配置方法
次に、数字ボタンを配置します。電卓のボタン配置は電話と逆で、上から789...となっています。これは計算しやすさを重視した配置なんです。
<div class="calculator">
<input type="text" class="display" id="display" value="0" readonly>
<div class="buttons">
<button class="btn" onclick="appendNumber('7')">7</button>
<button class="btn" onclick="appendNumber('8')">8</button>
<button class="btn" onclick="appendNumber('9')">9</button>
<button class="btn operator" onclick="setOperator('/')">÷</button>
<button class="btn" onclick="appendNumber('4')">4</button>
<button class="btn" onclick="appendNumber('5')">5</button>
<button class="btn" onclick="appendNumber('6')">6</button>
<button class="btn operator" onclick="setOperator('*')">×</button>
<button class="btn" onclick="appendNumber('1')">1</button>
<button class="btn" onclick="appendNumber('2')">2</button>
<button class="btn" onclick="appendNumber('3')">3</button>
<button class="btn operator" onclick="setOperator('-')">−</button>
<button class="btn zero" onclick="appendNumber('0')">0</button>
<button class="btn" onclick="appendNumber('.')">.</button>
<button class="btn operator" onclick="calculate()">=</button>
<button class="btn operator" onclick="setOperator('+')">+</button>
</div>
</div>
各ボタンにonclick属性を設定して、クリック時の動作を指定しています。
演算子ボタンとクリアボタンの実装
便利なクリアボタンも追加しましょう。
<div class="extra-buttons">
<button class="btn clear" onclick="clearDisplay()">C</button>
<button class="btn clear" onclick="clearAll()">AC</button>
</div>
C（Clear）は現在入力中の数字だけクリアし、AC（All Clear）はすべてリセットします。実際の電卓でも、この2つがあると便利ですよね。
CSSで見た目を整える（15分）
電卓らしいデザインにするポイント
電卓のデザインで大切なのは押しやすさと見やすさです。
.display {
width: 100%;
height: 60px;
font-size: 2em;
text-align: right;
padding: 10px;
margin-bottom: 10px;
border: none;
background-color: #444;
color: #fff;
border-radius: 5px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.btn {
height: 60px;
font-size: 1.5em;
border: none;
border-radius: 5px;
cursor: pointer;
background-color: #666;
color: #fff;
transition: all 0.2s;
}
.btn:hover {
background-color: #777;
transform: scale(0.98);
}
.btn:active {
transform: scale(0.95);
}
大きめのボタン（60px）で押しやすく、ホバー効果で反応をわかりやすく、グリッドレイアウトできれいに整列させています。
ボタンの配置とサイズ調整のコツ
特殊なボタンのスタイリングも追加します。
.operator {
background-color: #ff9500;
}
.operator:hover {
background-color: #ffb143;
}
.zero {
grid-column: span 2;
}
.clear {
background-color: #d4d4d2;
color: #000;
}
.extra-buttons {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 10px;
}
0ボタンを横に広くしたり、演算子をオレンジ色にしたり。これだけで、本物の電卓っぽさがグッと増します。
レスポンシブ対応で使いやすさアップ
スマホでも使えるように、レスポンシブ対応も忘れずに。
@media (max-width: 400px) {
.calculator {
padding: 15px;
}
.btn {
height: 50px;
font-size: 1.2em;
}
.display {
height: 50px;
font-size: 1.5em;
}
}
画面が小さくても、ちゃんと使える電卓になります。
JavaScriptで動きをつける（25分）
変数の準備と初期設定
いよいよ電卓の頭脳部分を作ります。まず、必要な変数を準備しましょう。
// 電卓の状態を管理する変数
let currentNumber = '0'; // 現在入力中の数字
let previousNumber = ''; // 前の数字
let operator = ''; // 選択された演算子
let shouldResetScreen = false; // 画面をリセットすべきか
// 画面の要素を取得
const display = document.getElementById('display');
変数は電卓の記憶だと思ってください。人間が「さっき5を押して、次に+を押した」と覚えているように、電卓も覚える必要があるんです。
数字入力の処理（appendNumber関数）
数字ボタンを押した時の処理を作ります。
function appendNumber(number) {
// 画面リセットが必要な場合
if (shouldResetScreen) {
currentNumber = '';
shouldResetScreen = false;
}
// 小数点の重複チェック
if (number === '.' && currentNumber.includes('.')) {
return;
}
// 0の場合の処理
if (currentNumber === '0' && number !== '.') {
currentNumber = number;
} else {
currentNumber += number;
}
// 画面を更新
display.value = currentNumber;
}
ここでのポイントはエラーを防ぐ処理です。例えば「0.0.0.1」みたいな変な数字にならないよう、小数点の重複をチェックしています。
四則演算の実装方法
演算子ボタンの処理です。
function setOperator(op) {
// すでに演算子が選択されている場合は計算
if (operator !== '' && !shouldResetScreen) {
calculate();
}
previousNumber = currentNumber;
operator = op;
shouldResetScreen = true;
}
演算子を押すと、今の数字を「前の数字」として記憶します。これは、メモ帳に数字を書き留めるようなイメージですね。
計算結果の表示とエラー処理
最後に、イコールボタンの処理です。
function calculate() {
if (operator === '' || previousNumber === '') {
return;
}
let result;
const prev = parseFloat(previousNumber);
const current = parseFloat(currentNumber);
switch (operator) {
case '+':
result = prev + current;
break;
case '-':
result = prev - current;
break;
case '*':
result = prev * current;
break;
case '/':
// ゼロ除算のチェック
if (current === 0) {
alert('0で割ることはできません');
clearAll();
return;
}
result = prev / current;
break;
}
// 結果を画面に表示
currentNumber = result.toString();
display.value = currentNumber;
operator = '';
shouldResetScreen = true;
}
ゼロで割るという数学的にNGな操作もちゃんとチェックしています。こういう細かい配慮が、使いやすい電卓の秘訣です。
便利な機能を追加する（5分）
クリア機能（C/AC）の実装
クリアボタンの処理を追加します。
// 現在の入力をクリア
function clearDisplay() {
currentNumber = '0';
display.value = currentNumber;
}
// すべてをクリア
function clearAll() {
currentNumber = '0';
previousNumber = '';
operator = '';
shouldResetScreen = false;
display.value = currentNumber;
}
実際の電卓と同じように、CとACで動作を分けています。
キーボード入力への対応
マウスだけでなく、キーボードでも操作できるようにしましょう。
document.addEventListener('keydown', function(event) {
// 数字キー
if (event.key >= '0' && event.key <= '9' || event.key === '.') {
appendNumber(event.key);
}
// 演算子キー
else if (event.key === '+' || event.key === '-') {
setOperator(event.key);
} else if (event.key === '*') {
setOperator('*');
} else if (event.key === '/') {
event.preventDefault(); // ページ内検索を防ぐ
setOperator('/');
}
// Enterキーで計算
else if (event.key === 'Enter' || event.key === '=') {
calculate();
}
// Escapeキーでクリア
else if (event.key === 'Escape') {
clearAll();
}
});
これで、テンキーを使って素早く計算できるようになります。
小数点計算の注意点と対策
JavaScriptの小数計算には罠があります。試しに「0.1 + 0.2」を計算すると「0.30000000000000004」になるんです！
これを防ぐ方法があります。
function calculate() {
// ... 前の処理 ...
// 結果を丸める
result = Math.round(result * 100000000) / 100000000;
currentNumber = result.toString();
display.value = currentNumber;
}
8桁で丸めることで、見た目をきれいに保ちます。
よくあるエラーと解決方法
「ボタンを押しても反応しない」時の対処法
これは本当によくあるトラブルです。
まず、JavaScriptファイルが読み込まれているか確認しましょう。bodyの閉じタグの直前に配置されているか確認してください。
次に、関数名のタイプミスをチェックします。HTMLでの呼び出しとJavaScriptでの定義で名前が一致しているか確認しましょう。
最後に、F12キーで開発者ツールを開き、Consoleタブでエラーメッセージを確認します。
計算結果がおかしい時のデバッグ方法
計算がうまくいかない時は、console.logで状態を確認しましょう。
function calculate() {
console.log('計算前の状態：');
console.log('previousNumber:', previousNumber);
console.log('currentNumber:', currentNumber);
console.log('operator:', operator);
// 計算処理...
console.log('計算結果:', result);
}
これで、どこで問題が起きているか一目瞭然です。
レイアウトが崩れる原因と修正
CSSのレイアウト崩れもよくある問題です。
box-sizingの指定忘れ、グリッドの指定ミス、余白の計算ミスなどが主な原因です。開発者ツールで実際のサイズを確認しながら修正しましょう。
完成後の発展学習アイデア
メモリ機能（M+/M-）の追加方法
基本的な電卓ができたら、メモリ機能を追加してみましょう。
let memory = 0;
function memoryAdd() {
memory += parseFloat(currentNumber);
console.log('メモリに保存:', memory);
}
function memoryRecall() {
currentNumber = memory.toString();
display.value = currentNumber;
}
function memoryClear() {
memory = 0;
}
これで、計算結果を一時的に保存できるようになります。
履歴機能で過去の計算を確認
計算履歴を残す機能も便利です。
let history = [];
function addToHistory(calculation, result) {
history.push({
calculation: calculation,
result: result,
time: new Date().toLocaleTimeString()
});
// 最新5件だけ保持
if (history.length > 5) {
history.shift();
}
}
スマホアプリ風のデザインにカスタマイズ
もっとおしゃれにしたい場合は、グラデーションや影を活用しましょう。
.calculator {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.btn {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
ガラスのような透明感のあるデザインになります。
まとめ
JavaScript電卓の作り方をゼロから解説しました。
最初は難しそうに見えた電卓も、実はシンプルな仕組みで動いていることがわかっていただけたと思います。材料を準備して、手順通りに進めれば、必ず完成します。
電卓が作れるようになったということは、ToDoアプリ、計算機能付きのお買い物アプリ、簡単なゲームなど、同じ仕組みで様々なアプリが作れるようになったということです。
次は電卓の機能を1つずつ追加してみたり、見た目をもっとおしゃれにしてみたり、新しいアプリに挑戦してみたりと、選択肢は無限にあります。
プログラミング学習を継続したい方は、私が運営しているLearning Nextもチェックしてみてください。今日学んだ電卓作りの基礎から、より実践的なWebアプリ開発まで、挫折しない順序で体系的に学べます。
著者について
とまだ
フルスタックエンジニア
Learning Next の創設者。Ruby on Rails と React を中心に、プログラミング教育に情熱を注いでいます。初心者が楽しく学べる環境作りを目指しています。
著者の詳細を見る →