【JavaScript】電卓の作り方を初心者向けにわかりやすく解説
はじめに
みなさんは、ウェブブラウザ上で手軽に数字の加算や乗算を行いたいと思ったことはないでしょうか。
そのような場面では、JavaScriptで作る電卓機能がとても便利です。
例えば、フォーム入力時に値段や数量を入力すると、すぐに合計金額を算出してくれるような仕組みがあれば、ユーザーにとってわかりやすいだけでなく、入力ミスの防止にも役立ちます。
JavaScript電卓を実装するメリットとしては、HTMLとCSSで見た目を自由にデザインしながら、少ないコード量で動きをつけられる点が挙げられます。
複雑な計算や多機能なインタフェースを実現することもできるので、ちょっとしたツールから本格的なアプリケーションまで、多彩な用途で活躍するでしょう。
今回は、まったくの初心者の方でも理解しやすいように、具体的なコード例を交えながら、JavaScriptで電卓を作る方法を解説します。
記事の中では、実務での応用シーンなどにも触れ、実際に役立つ知識をたっぷり紹介します。
この記事を読むとわかること
- JavaScriptで電卓を作る基本的な仕組み
- HTMLやCSSと連携する際のポイント
- 簡単な計算から複数演算子への対応方法
- 実務で使う際に役立つ具体的な利用シーン
- デバッグやトラブルシューティングのヒント
JavaScript電卓とは何か
JavaScript電卓の概要
JavaScript電卓とは、ウェブページ上で四則演算（加算、減算、乗算、除算）や多機能な計算ができる仕組みのことです。
ブラウザと連動して動作するため、専用ソフトをインストールする必要がありません。
例えば、入力フォームに数値を入れると自動的に合計金額を計算してくれるような仕組みは、多くのECサイトや予約システムなどで見かけると思います。
また、電卓というとシンプルなイメージがあるかもしれませんが、JavaScriptを使えば高度な演算処理やUIにも対応可能です。
たとえば、三角関数やルート計算など、専門的な計算式を組み込んだり、計算履歴を保存したりといった機能を追加することもできます。
このように、JavaScript電卓は「ユーザーがブラウザを介して数値を入力し、リアルタイムで結果を確認できる」という利便性の高いツールです。
特別な外部ライブラリを使わなくても、HTML・CSS・JavaScriptだけで気軽に実装できる点が大きな魅力となっています。
実務での活用シーン
実務の現場でも、JavaScript電卓の概念はさまざまな形で活かせます。
例えば、見積もりページで商品の単価×数量の計算を行うフォームや、ショッピングカート内で合計金額を動的に表示する機能は、多くのECサイトに欠かせません。
さらに予約システムでは、選択したオプションによって追加料金を計算したり、給与シミュレーションツールでは時給や勤務時間を入力するだけで自動計算したりと、幅広い分野でのニーズがあります。
社内の業務支援でも便利です。
セミナーなどのイベント管理で、参加人数に応じた必要備品の数や費用を計算する簡易ツールを開発すれば、担当者の手間を減らせるでしょう。
エクセルなどのスプレッドシートを使う方法も一般的ですが、わざわざファイルを開かなくても、社内ポータル上のJavaScript電卓を利用すればより素早く確認できます。
つまり、JavaScriptでの電卓実装は単なる学習用サンプルに留まらず、本格的な業務に直結する実践的な技術です。
一度理解しておくと、いろいろなプロジェクトの中で応用ができるでしょう。
JavaScriptで電卓を作るメリット
ユーザー操作が直感的
HTMLボタンや入力欄など、ユーザーが一目見てわかるUIをそのまま使えるので、操作がシンプルです。
加えて、CSSでレイアウトを自由に変えられるため、利用者が迷わない電卓を作りやすいでしょう。
数字ボタンや演算子の配置を工夫すれば、画面サイズの異なるデバイス（PCやスマートフォンなど）にも対応できます。
計算結果の即時反映
JavaScriptはブラウザ上で動作するため、サーバーにリクエストを送らなくても計算ができます。
つまり、演算処理がクライアントサイドで完結するので、素早いレスポンスが期待できます。
「＝」ボタンを押した瞬間に計算結果が表示されるので、ユーザーにとって待ち時間はほとんどありません。
追加機能の拡張が容易
JavaScriptであれば、あらゆるロジックを組み込みやすいのが利点です。
もし、複利計算やローンのシミュレーション機能を搭載したいといった要望があれば、既存のコードに追加の関数を定義して組み込むだけで対応可能です。
また、計算結果を画面上のリストに保存したり、セッションストレージやローカルストレージを使って数値を引き継いだりと、柔軟な機能拡張ができます。
クロスプラットフォーム対応
JavaScriptは、ブラウザさえあればOSを問わずに動作します。
Windows、Mac、Linux、さらにはスマートフォンのブラウザでもほぼ同じように実行可能です。
このおかげで、ユーザーの環境に依存せずに使ってもらえる計算ツールとして設計できます。
JavaScript電卓を構成する要素
HTML（構造）の準備
電卓には、一般的に数字ボタンや演算子ボタン、そして結果を表示する画面となる要素が必要です。
最も基本的な例では、以下のようにボタンを並べ、表示部分は <div> や <input> を使って表示します。
初心者の方にとっては、まずはボタンを単純に整列させるだけでも、プロトタイプとしては十分です。
CSS（見た目）のカスタマイズ
CSSでは、ボタンのサイズや配置を調整し、見やすく使いやすい電卓画面を作ることができます。
ボタンのホバー時に色を変えたり、クリック時にアニメーションをつけることも可能です。
また、スマートフォンなどで使いやすいよう、レスポンシブ対応することも大事なポイントになります。
JavaScript（動きと計算）
ボタンがクリックされたときにどのような処理を行うかを管理するのがJavaScriptの役割です。
たとえば、数字ボタンを押したら入力欄に文字を追加し、演算子ボタンを押したら一度入力を確定してメモリに保持するなど、フローを考えながら実装します。
JavaScriptならではのイベントハンドリングの仕組みを使うことで、直感的なコードを書きやすいでしょう。
JavaScript電卓：シンプルな実装例
ここからは、シンプルな電卓のコード例を紹介します。
なお、HTMLとCSSの部分は非常に基本的な例なので、実際に使うときはレイアウトを調整してください。
HTMLの例
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScript電卓 - シンプル版</title> <style> /* 簡単なCSS */ .calculator { width: 200px; margin: 0 auto; } .display { width: 100%; height: 40px; text-align: right; font-size: 1.2rem; margin-bottom: 8px; } .button-row { display: flex; } button { flex: 1; height: 40px; margin: 2px; font-size: 1rem; } </style> </head> <body> <div class="calculator"> <input type="text" class="display" id="display" readonly> <div class="button-row"> <button>7</button> <button>8</button> <button>9</button> <button>/</button> </div> <div class="button-row"> <button>4</button> <button>5</button> <button>6</button> <button>*</button> </div> <div class="button-row"> <button>1</button> <button>2</button> <button>3</button> <button>-</button> </div> <div class="button-row"> <button>0</button> <button>.</button> <button>=</button> <button>+</button> </div> <div class="button-row"> <button id="clear">C</button> </div> </div> <script src="app.js"></script> </body> </html>
この例では、数字や演算子ごとにボタンを配置し、入力値を表示する部分には id="display" を設定しています。
見やすさを考慮すると、さらにボタンを大きくしたり、行数を増やしてメモリ機能を追加したりと、HTMLの段階でいろいろ工夫することができます。
JavaScriptの例
以下は、app.js として外部ファイルに用意したものを想定しています。
const display = document.getElementById("display"); const buttons = document.querySelectorAll("button"); let currentValue = ""; let previousValue = ""; let operator = null; buttons.forEach((btn) => { btn.addEventListener("click", () => { const btnText = btn.textContent; if (!isNaN(btnText) || btnText === ".") { // 数字か小数点の場合 currentValue += btnText; display.value = currentValue; } else if (btnText === "C") { // クリアボタン currentValue = ""; previousValue = ""; operator = null; display.value = ""; } else if (btnText === "=") { // イコールを押したとき if (operator && previousValue !== "" && currentValue !== "") { const result = calculate(previousValue, currentValue, operator); display.value = result; previousValue = result; currentValue = ""; operator = null; } } else { // 演算子（+,-,*,/）が押されたとき if (currentValue === "") return; if (previousValue !== "") { // すでに演算子がある場合は即計算 const result = calculate(previousValue, currentValue, operator); previousValue = result; display.value = result; currentValue = ""; } else { previousValue = currentValue; currentValue = ""; } operator = btnText; } }); }); function calculate(a, b, op) { const numA = parseFloat(a); const numB = parseFloat(b); switch (op) { case "+": return numA + numB; case "-": return numA - numB; case "*": return numA * numB; case "/": return numB !== 0 ? numA / numB : "エラー"; default: return 0; } }
上のコードでは、以下のような流れで実装しています。
- 数字ボタン・小数点ボタンが押されると
currentValueに追加 - クリアボタンで変数をすべて初期化
- 演算子が押されたら現在の値を
previousValueに移し、次の数値入力に備える - イコールが押されたら
calculate関数で結果を算出し、表示
このように、イベントハンドラー（addEventListener("click", ...)）を使いながら、変数で状態を管理する形は、初心者にもわかりやすい書き方です。
小数点の入力は、特に気をつけないと 1.2.3 のように連続で打ててしまう場合もあります。
実務で使う際は、一度小数点を入力したら再度入力を許可しないなどのバリデーション処理を加えると良いでしょう。
応用的な実装：複数の演算を連続で行う
続けて演算する電卓
上記のシンプルな例では「2 + 3 ＝ 5」というような1回ずつの計算を前提としています。
しかし、実務では「2 + 3 * 4 ＝ 14」のような複数の演算子を連続して使うケースも普通にあるでしょう。
この場合、左から順番に演算していく方法（加減乗除を同列扱い）や、数学的優先順位に従う方法（乗除を先に計算）など、処理ロジックを工夫する必要があります。
例えば、加減乗除をすべて同じ優先順位とみなす場合は、電卓が「メモリにある値と現在の値を演算し、次の演算子が押されるたびに計算結果を更新する」という流れを繰り返せば実装できます。
しかし、乗除を優先するとなると「スタック」や「配列」に演算子と数値を貯めて一度パースするような処理が必要です。
コード例：左から計算する簡易版
let displayValue = ""; let operationQueue = []; // ["5", "+", "3", "*", "2" のように格納] function inputDigit(digit) { displayValue += digit; updateDisplay(); } function inputOperator(op) { if (displayValue !== "") { operationQueue.push(displayValue); displayValue = ""; } operationQueue.push(op); updateDisplay(); } function calculateResult() { // 最後に数字が入力されていたらpush if (displayValue !== "") { operationQueue.push(displayValue); displayValue = ""; } // 左から順に演算していく let result = parseFloat(operationQueue[0]); for (let i = 1; i < operationQueue.length; i += 2) { const operator = operationQueue[i]; const nextValue = parseFloat(operationQueue[i + 1]); switch (operator) { case "+": result = result + nextValue; break; case "-": result = result - nextValue; break; case "*": result = result * nextValue; break; case "/": if (nextValue === 0) { result = "エラー"; } else { result = result / nextValue; } break; default: break; } } // 画面に表示し、次回の演算に備える displayValue = result.toString(); operationQueue = []; updateDisplay(); } function updateDisplay() { // 画面上に現在の状態を表示 const display = document.getElementById("display"); if (displayValue) { display.value = displayValue; } else { // 最新の操作が演算子入力の場合、キューをまとめて表示 display.value = operationQueue.join(" "); } }
この例は「演算子の優先順位を考慮せずに左から順に計算していく」パターンです。
例えば、5 + 3 * 2 と入力すれば、結果は 16 ではなく 5 + 3 = 8 → 8 * 2 = 16（最終結果16）になりますが、「3 * 2 が先」という通常の算数ルールには合致しない点もあります。
しかし、業務で単純に左から計算すれば良いという要件もあるので、実装方針として覚えておくと便利です。
実務での活用方法
ECサイトでの料金計算
商品の単価と購入数量から合計金額を算出するシステムは、ECサイトにとって基本的な機能です。
JavaScript電卓を導入すれば、ユーザーが商品ページやカートページで数量を変更するたびに、リアルタイムで合計額が更新されるようにできます。
入力ミスが減り、購入者が計算の手間から解放されるでしょう。
見積もりフォームへの組み込み
見積もりフォームの中で、オプションの数やサービスの種類に応じて費用を算出したり、複雑な料金テーブルを反映させたりするケースがあります。
ボタン操作だけでなく、ラジオボタンやチェックボックスと連動させれば、より柔軟な計算ロジックを構築可能です。
給与やローンのシミュレーション
ローン計算や給与シミュレーションなど、ユーザーがいくつかのパラメータを入力すると毎月の返済額を自動算出してくれる仕組みも、JavaScript電卓の発展形と言えます。
計算結果をグラフ表示するなど、可視化してユーザーが理解しやすい画面にする工夫も考えられます。
社内業務の効率化ツール
社内ポータルにJavaScript電卓を置いておけば、ちょっとした計算をしたいときにExcelや専用ソフトを開かなくても済みます。
イベント管理や在庫集計、集計業務のサポートなど、簡易的な計算ツールを作るだけでも業務がスムーズになるでしょう。
普段からブラウザでアクセスできる環境なら、大きなメリットがあります。
複雑な計算ロジックを扱う場合は、小数点の丸め誤差や演算精度に注意してください。
JavaScriptの浮動小数点演算は、ときどき意図しない結果になることがあります。
使いやすい電卓を作るコツ
入力制限を明確にする
数値のみの入力欄や、先述の小数点の制御など、入力できる文字を絞ることで予期せぬエラーを防ぐことができます。
たとえば、すでに小数点を含む数値に再度小数点を追加する動作を禁止することで、計算処理がシンプルになり、ユーザーにとってもミスを減らすことができるでしょう。
演算の優先順位やエラー処理を整理する
乗除を先に計算するのか、左から順に演算するのか、あるいは括弧を使うのかなど、要件に合わせた演算ロジックをはっきり決めておくと、実装時の混乱が減ります。
ゼロ除算をした場合の対応、数値が極端に大きい場合の表示形式など、例外的なケースにもきちんと対処しましょう。
UIテストを繰り返す
数字ボタンや演算子の配置、画面への結果表示が直感的かどうか、繰り返しテストしてみることが大切です。
意外と、ボタンを押した後にどのタイミングで結果が表示されるかなど、細かい仕様が使い勝手に大きく影響します。
たとえば、即時に部分的な結果を表示するとユーザーが混乱するかもしれませんし、逆に即時反映の方が好まれるケースもあります。
スマホ対応を忘れない
スマートフォンで電卓機能を使うケースも多いため、画面サイズが小さくても押しやすいボタン配置にする、文字サイズを大きめにするなどの工夫が必要です。
CSSのメディアクエリを活用して、横幅の狭い画面ではボタンを縦並びに変えるなど、レスポンシブなデザインを取り入れると良いでしょう。
トラブルシューティングのポイント
ログを活用する
JavaScriptで何らかのバグが出るときは、console.log() を使って変数の値や計算過程をこまめに確認する方法が有効です。
演算前や演算後でどのような値が入っているのかをチェックするだけでも、ロジック上の抜けやミスをすぐに見つけられます。
浮動小数点の誤差
JavaScriptでは、0.1 + 0.2 が 0.30000000000000004 となる有名な問題があるように、浮動小数点演算の誤差が必ずしも人間の感覚どおりにはなりません。
計算結果を Math.round() などで丸めたり、小数点以下の桁数を統一したりするなど、誤差を最小限に抑える工夫を施しておきましょう。
大きな数値への対応
非常に大きな数値を扱う場合、標準的なNumber型ではオーバーフローを起こしたり、表現できる精度に限界があることに注意してください。
もし業務上、億単位やそれ以上の大きな値を扱うなら、途中で桁数を丸める処理を追加するとか、JavaScriptのBigIntを活用する選択肢も検討が必要です。
コードの可読性を重視
電卓のロジックは一見単純そうに見えても、追加機能をどんどん増やしていくと複雑になりがちです。
コールバックのネストや条件分岐が多くなると混乱しやすいので、計算処理を別の関数に切り出すなど、適宜コードを整理すると良いでしょう。
定期的に不要な変数やコメントを整理して、可読性を保つようにしておくと、後々のメンテナンスが楽になります。
高度な応用例
数学ライブラリとの連携
四則演算だけでなく、三角関数や対数など専門的な計算が必要な場合は、JavaScript用の数学ライブラリを活用する方法があります。
例えば Math オブジェクトの標準的な関数を使うだけでも、Math.sin() や Math.sqrt()、Math.log() などある程度はカバーできます。
ただし、これらの機能をユーザーがどう使いやすいボタンや入力方法で操作するかは、UI設計の工夫が求められます。
メモリ機能やヒストリ表示
一度計算した結果を保存しておき、別の画面で履歴を見られるようにすると、より便利な電卓ツールになります。
Web Storage API（localStorage や sessionStorage）を使えば、ページをリロードしても履歴を保持できるので、ユーザーが前回の計算結果を再確認できる利点があります。
業務用の見積もりツールなどでは、計算履歴が残っていると後から修正したり比較したりするのに便利です。
フロントエンドフレームワークの導入
ReactやVue、Angularといったフロントエンドフレームワークを使って電卓を実装する例も多くみられます。
コンポーネント単位で状態を管理したり、双方向データバインディングを活用することで、大規模化しても整合性を保ちやすいのが魅力です。
ただし、初心者にとっては最初に学習コストがかかるかもしれません。
まずは生のJavaScriptで仕組みを理解し、その後必要に応じてフレームワークを導入するのも手順としてはわかりやすいでしょう。
まとめ
ここまで、JavaScript電卓の基本的な仕組みから応用方法までをかなり詳しく解説しました。
初心者の方でも、HTML・CSS・JavaScriptを組み合わせれば、自由自在に電卓機能を作れます。
電卓の実装は、単に四則演算を行うだけではありません。
多彩なUIの工夫やエラー処理、さらに業務アプリケーションへの応用など、学ぶポイントは盛りだくさんです。
実務では、見積もりフォームへの導入やECサイトの合計金額表示など、使いどころもたくさんあるため、しっかり押さえておくと今後のプロジェクトで役立つでしょう。
特に大事なのは、入力制限や計算誤差への対策をきちんと行うことです。
JavaScriptならではの浮動小数点の取り扱いなどの注意点を踏まえながら、堅実な実装を心がけると、ユーザーが安心して使える電卓ツールが完成します。
みなさんも、まずはシンプルな電卓から試してみてください。
慣れてきたら機能を追加し、どのようにUIを改善すればわかりやすくなるか、さまざまな試行錯誤をすることで、JavaScriptのスキルアップにもつながるはずです。