JavaScriptで計算するには？基本的な演算子の使い方から実践例まで初心者向けに解説

フロントエンド開発•2025/2/15

はじめに

JavaScriptはWebブラウザ上で動作するプログラミング言語として広く利用されています。
ただし、ブラウザだけでなくサーバーサイドなどさまざまな場所で使われる言語に成長してきました。
そのため、「JavaScriptで計算をしたい」という需要は意外に多いのではないでしょうか。

皆さんの中には、「JavaScriptはUIを操作するためだけのものでは？」と思っている方もいるかもしれません。
しかし四則演算や数値の丸め、小数点の扱いなど、実務シーンでよく登場する計算ロジックをJavaScriptで書くケースは多々あります。

本記事では、初心者の方でもわかりやすいように、JavaScriptを使った計算処理の基礎から応用までを紹介します。
また、実務に結びつきやすい例も交えながら説明していきますので、学習の参考にしてください。

この記事を読むとわかること

JavaScriptにおける基本的な演算子の種類と使い方
四則演算や演算子の実務での活用イメージ
Mathオブジェクトを活用した高度な計算方法
よく使う変数の扱いとスコープの基本
ブラウザやサーバーサイドでの計算の実用例

ここに挙げたポイントを理解することで、JavaScriptで必要な計算ロジックを自作できるようになり、実際の現場でも役立ちやすい知識を得ることができるでしょう。

JavaScriptの計算とは何か

JavaScriptで計算と聞くと、単純に数値を足し算・引き算するといったイメージかもしれません。
しかし実際には文字列との連結や比較演算、さらに条件分岐で数値を評価するなど、多種多様な使い方が存在します。

特にWebアプリケーションでは、画面に表示するデータをJavaScriptでリアルタイムに計算したり、ユーザーが入力した値を整形してサーバーに送信したりといったシーンが多くあります。
これらは直接的な数値演算だけでなく、文字列の操作や型変換も含まれてきますので、計算の概念をしっかり押さえておくことが重要です。

一方で、JavaScriptには型の変換が柔軟すぎて、思わぬバグを生むこともあります。
たとえば、文字列を足そうとすると連結になり、数値を文字列として扱うと意図せず結果が変わることがあります。
こうした挙動を把握しながら計算ロジックを組むことが大事なので、この記事でしっかり理解を深めていきましょう。

四則演算の基礎

JavaScriptでも、他の多くの言語と同様に 四則演算 (足し算、引き算、掛け算、割り算)が基本中の基本です。
初めて学ぶ方も多いでしょうから、簡単に見ていきます。

足し算

足し算は+演算子を使います。
次のサンプルコードは、2つの数値を足して結果を表示する例です。


const num1 = 5;
const num2 = 3;
const result = num1 + num2;
console.log(result); // 8

数値を足すだけなら単純ですが、JavaScriptの+演算子は文字列を連結するときにも使われます。
たとえば、文字列と数値を+で結合すると文字列連結が優先される点に注意しましょう。


const a = "5";
const b = 3;
console.log(a + b); // "53"

上の例では"5"が文字列であるため、3を文字列に変換して連結しています。
このように意図せず文字列連結になるケースがあるので、計算結果が文字列として扱われていないかをチェックすることが大切です。

引き算

引き算は-演算子を使います。
足し算との違いとしては、引き算では文字列連結といった特殊な挙動はありません。


const num1 = 10;
const num2 = 4;
const result = num1 - num2;
console.log(result); // 6

なお、もし文字列の形で数値が与えられていた場合は、JavaScriptが暗黙的に数値に変換してから計算を行います。
たとえば"10" - "4"は、JavaScriptが内部的にどちらも数値に変換するので結果は6になります。

掛け算

掛け算は*演算子です。
こちらも暗黙の型変換が起きる点は引き算と似ています。


const num1 = 6;
const num2 = 7;
const result = num1 * num2;
console.log(result); // 42

実務では、単価×数量のような場面でよく登場します。
たとえばECサイトで商品価格と個数を掛け合わせて合計金額を求めるといった使い方があります。

割り算

割り算は/演算子を使います。
このとき、割り算の結果が小数になる場合もありますが、JavaScriptの場合は小数点以下も含む浮動小数点数として計算します。


const num1 = 10;
const num2 = 3;
const result = num1 / num2;
console.log(result); // 3.3333333333333335

上の例で示したように小数点以下が長々と表示される場合があります。
これがいわゆる浮動小数点数の丸め誤差につながることも多いので、後述するMathオブジェクトなどを使った丸めが有効になるケースもあります。

比較演算子と論理演算子

JavaScriptの計算では、値の大小比較や真偽値の判定が必要になる場合がよくあります。
たとえば、条件分岐を使って「もし値が一定以上なら〜」と処理を切り替えるときなどです。
ここでは、四則演算の次に押さえておきたい比較演算子と論理演算子を解説します。

比較演算子の種類

===：厳密等価演算子（型も含めて一致する場合にtrue）
!==：厳密不等価演算子（型も含めて一致しない場合にtrue）
==：等価演算子（型が異なっても値が一致すればtrueになる）
!=：不等価演算子（型が異なっても値が一致しなければtrueになる）
>：大なり
<：小なり
>=：以上
<=：以下

とくに注意したいのが、==や!=は型変換が起きるために予期せぬ結果になるケースがあるという点です。
通常は===や!==を使うほうが安全なので、実務でもそちらがよく使われます。

比較演算子のサンプルコード

次の例では、数値が10以上かどうかを判定しています。
結果が真であればメッセージを表示する流れです。


const threshold = 10;
const value = 12;

if (value >= threshold) {
  console.log("値は10以上です");
} else {
  console.log("値は10未満です");
}

このように条件式の中で比較演算子を使い、結果に応じて処理を分けるケースはよくあります。

論理演算子の種類

&&：論理積（AND）
||：論理和（OR）
!：論理否定（NOT）

これらの論理演算子は、比較演算子と組み合わせて複数の条件をまとめたいときなどによく使われます。


const num = 15;
// numが10以上かつ20以下の場合のみtrue
if (num >= 10 && num <= 20) {
  console.log("numは10以上20以下です");
}

こうした論理演算子との組み合わせも含めて覚えておくと、計算ロジックの幅が広がります。

代入演算子や複合代入演算子

JavaScriptには、変数に値を代入するための演算子や、代入と演算を同時に行う複合代入演算子があります。
計算結果を変数に上書きしていくような場面ではよく使われるので、簡単におさえておきましょう。

代入演算子

最も基本的なのが=です。
例：let a = 10;

複合代入演算子

+=
-=
*=
/=
%=（剰余）
**=（累乗）

次のように書くことで、計算と代入をまとめて行えます。


let count = 0;
count += 5; // count = count + 5と同義
console.log(count); // 5

count *= 2; // count = count * 2
console.log(count); // 10

複合代入演算子は、コードを簡潔にまとめたいときに便利です。
ただ、可読性を考慮して使いすぎに注意することも大切です。

Mathオブジェクトを使った高度な計算

四則演算だけなら基本の演算子で事足りますが、JavaScriptにはMathオブジェクトという便利な組み込みオブジェクトが用意されています。
これを使うと、小数点以下の切り捨てや切り上げ、乱数の生成など、さまざまな高度な計算が可能になります。

Mathオブジェクトの代表的なメソッド

Math.floor(x)：小数点以下を切り捨て
Math.ceil(x)：小数点以下を切り上げ
Math.round(x)：小数点以下0.5以上なら切り上げ、未満なら切り捨て
Math.random()：0以上1未満の乱数を返す
Math.abs(x)：xの絶対値を返す
Math.pow(x, y)：xのy乗を返す（x ** yと同じ機能）
Math.max(a, b, c, ...)：複数値の中の最大値を返す
Math.min(a, b, c, ...)：複数値の中の最小値を返す

数値の丸めに関する注意点

JavaScriptは浮動小数点数を扱うため、計算の誤差が生じることがあります。
たとえば、0.1 + 0.2は理論上0.3ですが、実際には0.30000000000000004のように微妙な差が出ることがあるのです。

これを回避するために、整数に変換してから計算し、最後に小数点を入れ直すというテクニックを使う場合もあります。
たとえば、お金の計算など厳密さが求められる場面で活用されます。


function addWithPrecision(a, b) {
  // 2つの数値に100を掛けて整数にし、足し算してから再度100で割る
  // たとえば 10.25 + 0.75 => (1025 + 75) / 100 => 11
  return (Math.round(a * 100) + Math.round(b * 100)) / 100;
}

console.log(addWithPrecision(10.25, 0.75)); // 11

上の例では100倍して丸めたうえで計算しているため、小数点以下の誤差を抑えた結果を得ることができます。
すべてのケースを完全に解決するわけではありませんが、お金の計算のように桁が限られている場合には有効な方法です。

文字列との連携：テンプレートリテラル

JavaScriptでは計算結果を文字列に組み込んで表示したいことがあります。
たとえば「計算結果はXXXです」といった文言を作りたい場面です。

従来の方法では以下のように+を使って連結していました。


const num = 10;
console.log("計算結果は" + num + "です。");

しかし、この方法は可読性が下がりやすいというデメリットがあります。
そこで、テンプレートリテラルを使うと、より自然に変数を差し込めます。


const num = 10;
console.log(`計算結果は${num}です。`);

テンプレートリテラルを使うと、文字列の中に${}を使ってJavaScriptの式を埋め込むことができます。
計算式そのものを埋め込むことも可能なので、下記のように直接演算を書いてしまうケースもあります。


console.log(`5 + 3 の結果は ${5 + 3} です。`);

このように、計算結果を文字列へ反映しやすい仕組みがある点もJavaScriptの特長です。

配列の要素を計算する方法

実務では、配列に格納された数値を合計したり、平均値を出したりするといった場面が少なくありません。
JavaScriptで配列の要素を計算する方法をいくつか紹介します。

forループを使った合計の算出

最もシンプルな方法は、ループを回してひとつずつ足していく形です。


const scores = [80, 90, 75, 88];
let total = 0;

for (let i = 0; i < scores.length; i++) {
  total += scores[i];
}

console.log(total); // 合計値

この方法は初歩的ですが、処理の流れが明確なため、初心者にも理解しやすいでしょう。

Array.prototype.reduceを使った合計の算出

JavaScriptでは、配列のメソッドreduceを使うと、より少ないコードで合計値を求められます。


const scores = [80, 90, 75, 88];
const total = scores.reduce((acc, current) => acc + current, 0);
console.log(total); // 合計値

reduceは、配列を左から右へとたどりながら、 累積値 (acc) と 現在の要素 (current) を使って一つの値を作り上げていく仕組みです。合計値以外にも、最大値や最小値の算出など、さまざまな計算に応用できます。

平均値の計算例

配列内の平均値を求めたい場合、合計を出して要素数で割る手順になります。


const scores = [80, 90, 75, 88];
const total = scores.reduce((acc, current) => acc + current, 0);
const average = total / scores.length;
console.log(average); // 83.25

さらに小数点以下を丸めたいなら、先ほど紹介したMath.floorやMath.roundを適宜組み合わせましょう。

実務における活用シーン：フロントエンド

実務では、たとえばフォーム入力の値を使った計算ロジックをフロントエンド側で実装することが多々あります。

金額計算：ECサイトで商品の購入金額をリアルタイムで表示
税率計算：消費税やサービス料の自動計算
日付演算：日付の差分や日数カウント（厳密にはDateオブジェクトや外部ライブラリを使う）

特に金額計算は、小数点以下を正しく扱う必要があるので、Math.roundなどのメソッドと組み合わせることが多いです。

金額計算で浮動小数点の誤差が出る場合は、あらかじめ数値を整数化しておく工夫が必要です。
たとえば100倍または1000倍して計算するなどで誤差を最小限に抑えます。

UI上でリアルタイムに再計算する例を挙げると、ユーザーが数量を入力するたびにJavaScriptで計算して合計金額を画面に反映する、といった実装が該当します。
これにより、ユーザーに対して即座に結果を見せることができるので、わかりやすい操作性を提供できます。

実務における活用シーン：サーバーサイド

JavaScriptは、Node.jsを使うことでサーバーサイドでも実行できます。
たとえば、APIサーバーをNode.jsで立ち上げ、受け取った数値を使って計算した結果をレスポンスとして返すといったシーンがあります。

在庫管理システム：商品数を減算し、余った数量を返す
勤怠管理：労働時間の合計を算出し、時間外労働の計算を行う
データ集計：データベースから取得した複数の項目を加算して合計金額を出す

これらはいずれも、JavaScriptの計算ロジックをサーバーサイドに組み込み、最終結果のみをクライアントに返す形です。
フロントエンドでもサーバーサイドでも、同じくJavaScriptで計算できるのは大きな利点と言えます。

小数点の扱い：実務での注意点

先述の通り、JavaScriptは浮動小数点数を扱う際に誤差が発生するケースがあります。
この問題は、金額のように厳密さが必要な領域では特に注意を要します。

最初に思い浮かぶ方法は、整数として計算し、後から小数点を挿入する方法です。
たとえば、以下のように税率や割引率などを扱う場面を考えてみます。


function calcPriceWithTax(price, taxRate) {
  // ここではpriceやtaxRateを100倍してから計算する方法をとる
  // たとえばprice=500の場合、500 * 100 = 50000として扱う
  // taxRate=0.08の場合、0.08 * 100 = 8として扱う
  const intPrice = Math.round(price * 100);
  const intTaxRate = Math.round(taxRate * 100);

  // 税額を計算し、最後に10000で割る
  const intTaxAmount = (intPrice * intTaxRate) / 100; // (50000 * 8) / 100 = 4000
  // 税込価格を元に戻して返す
  const finalAmount = (intPrice + intTaxAmount) / 100; // (50000 + 4000) / 100 = 540
  return finalAmount;
}

console.log(calcPriceWithTax(500, 0.08)); // 540

このように倍数を掛け合わせてから計算し、最後に元に戻すことで誤差が起こりにくくなります。
ただし、この方法にも限界があるため、どうしても高精度が必要な場合には任意精度ライブラリを使うケースもあります。

型変換に気をつける

JavaScriptの計算において型変換は大きな落とし穴です。
数値と文字列を混ぜてしまうと、意図しない型変換が発生することがあります。
それを防ぐために、明示的に数値へ変換したり、文字列を意識して扱ったりするのがポイントです。

`Number()`関数や`parseInt()`、`parseFloat()`の活用

数値らしき文字列をしっかり数値に変換してから演算にかけることで、思わぬ連結やNaNの発生を回避できます。


const priceString = "300";
const quantityString = "2";
const total = Number(priceString) * Number(quantityString);
console.log(total); // 600

また、小数点を含む文字列の場合にparseInt()を使うと切り捨てられ、parseFloat()を使うと浮動小数点として認識するので、用途に応じて使い分けが必要です。

変数の扱いとスコープ

計算結果を格納するための変数や定数を管理するうえで、スコープの理解は欠かせません。
スコープを誤って把握していると、想定外の値の上書きが起きることもあります。

let・const・varの違い

let：再代入が可能で、ブロックスコープを持つ
const：再代入不可能で、ブロックスコープを持つ
var：再代入が可能で、関数スコープしか持たない（ブロックスコープではない）

現在のJavaScriptコードでは、基本的にletとconstが推奨されます。
再代入の必要がない値はconst、そうでなければletを使うというのが一般的です。

ブロックスコープの例

ブロックスコープとは、{}（ブロック）の中でのみ有効な変数領域のことです。


{
  let x = 10;
  console.log(x); // 10
}
// ここではxは定義されていない
console.log(x); // ReferenceError: x is not defined

このスコープ構造を理解していないと、計算ロジックで使っている変数が想定外のタイミングで寿命を迎えている（または逆に、関数外から参照できてしまう）といった不具合が発生する可能性があります。

演算子の優先順位

JavaScriptに限らず、多くの言語には演算子の優先順位が存在します。
たとえば四則演算でも「掛け算や割り算が足し算や引き算より先に評価される」といったルールがあります。


const result = 10 + 2 * 3;
console.log(result); // 16 (2 * 3が先に計算されて10 + 6)

「足し算を先に計算したい」などの意図があるときは、括弧で明示的に優先順を変える必要があります。


const result = (10 + 2) * 3;
console.log(result); // 36

演算子の優先順位は複雑になりがちなので、重要なロジックでは積極的に括弧を入れて可読性を上げるとよいでしょう。

NaNとInfinity

JavaScriptの計算結果には、NaN（Not a Number）やInfinityが出力されるケースがあります。
これらを正しく理解しておくと、デバッグで困ったときに役立ちます。

NaN（Not a Number）

parseInt("abc")などのように、数値に変換できない文字列を無理やり数値に変換した結果や、0で割るなどの演算で出る可能性があります。
NaNかどうかをチェックするには、Number.isNaN()が使えます。


const val = Number("abc");
console.log(val); // NaN
console.log(Number.isNaN(val)); // true

Infinity（∞）と-Infinity

非常に大きな数値を扱ったり、0で割ったりした場合にInfinityや-Infinityが出ます。
これも異常系なので、想定していない計算結果にならないよう注意が必要です。

大きな数値を扱うBigInt

JavaScriptは、伝統的に数値を64ビット浮動小数点で表現してきました。
そのため、整数を扱う場合にも2^53 - 1が最大安全整数の範囲となり、これを超えると正確に扱えませんでした。

しかし、最近のJavaScriptではBigInt型が導入されており、超巨大な整数を正確に扱えるようになっています。
BigIntを扱うには、末尾にnをつけるのが特徴的です。


const bigNumber = 9007199254740992n; // 2^53より大きい整数
console.log(bigNumber + 10n); // 9007199254741002n

BigIntと通常の数値型（Number）は混在させられないというルールがあるため、用途に応じてBigIntを使うかどうかを検討しましょう。
たとえば暗号通貨の取引量や極端に大きいカウンターを扱う場面で重宝されます。

実務でのコード設計ポイント

実務では、計算にまつわるロジックをテストしやすい形で書いておくことが大切です。
以下のようなポイントを押さえておくと、バグを減らし、保守性を上げることができます。

1つの関数は1つの責務に絞る

たとえば「消費税を計算する関数」「割引を計算する関数」というように、責務を明確にする。

丸めや小数点の扱い方針を共有

プロジェクト全体で「小数点以下は何桁まで扱うか」などを取り決めておく。

例外処理の検討

NaNやInfinityが起きた場合にどう対処するか（エラーを返すか、0を返すかなど）。

また、フロントエンドとサーバーサイドの両方で同じ計算をする場合、二重管理にならないように注意する必要があります。
できるだけ共通の関数にまとめるか、サーバーサイドで計算して結果を返す形に統一するとミスが減ります。

コード例：簡単な計算アプリ

ここでは、ブラウザ上で商品価格と個数を入力し、合計金額を表示する簡単なサンプルを示します。
あくまで一例ですが、計算の流れがイメージしやすいかもしれません。


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>計算サンプル</title>
</head>
<body>
  <label for="price">価格:</label>
  <input id="price" type="number" />

  <label for="quantity">個数:</label>
  <input id="quantity" type="number" />

  <p>合計: <span id="total"></span></p>

  <script>
    const priceInput = document.getElementById("price");
    const quantityInput = document.getElementById("quantity");
    const totalDisplay = document.getElementById("total");

    function updateTotal() {
      const price = Number(priceInput.value);
      const quantity = Number(quantityInput.value);

      // 不正な値には0を代入
      const validPrice = Number.isNaN(price) ? 0 : price;
      const validQuantity = Number.isNaN(quantity) ? 0 : quantity;

      const total = validPrice * validQuantity;
      totalDisplay.textContent = total;
    }

    priceInput.addEventListener("input", updateTotal);
    quantityInput.addEventListener("input", updateTotal);
  </script>
</body>
</html>

上記コードでは、priceInputとquantityInputのinputイベントをフックし、リアルタイムに合計金額を計算してtotal要素へ表示しています。
Number.isNaN()で不正な値をチェックすることで、計算エラーをある程度防ぐ仕組みになっています。

よくあるトラブルと対処法

JavaScriptの計算において、初心者がつまずきやすいトラブルをいくつか挙げてみます。

文字列と数値の混在による文字列連結
- 対処法：明示的にNumber()で変換する、テンプレートリテラルを活用する
浮動小数点の誤差
- 対処法：整数化してから計算、またはMath.roundなどで適切に丸める
演算子の優先順位の誤解
- 対処法：括弧を使って計算順序を明確にする
型の違いによる比較結果の不一致
- 対処法：===や!==を使って厳密な比較を行う
NaNやInfinityの扱い
- 対処法：Number.isNaN()や条件分岐を使ってエラー処理を適切に行う

これらをクリアすれば、基本的な数値計算でのトラブルはある程度回避できるでしょう。

数値入力を受け付ける場合、type="number"のHTML要素を使うことで、入力段階からエラーを減らす工夫もあります。
ただし、ブラウザによっては厳密に入力を制限しない場合もあるため、JavaScript側でチェックすることも重要です。

まとめ

JavaScriptを使った計算は、Web開発においてさまざまなシーンで必要になります。
四則演算をはじめとした演算子の使い方を押さえ、Mathオブジェクトを活用できるようになるだけでも、業務での実装に大きく役立つでしょう。

また、浮動小数点数の誤差や型変換といったJavaScript特有のトラップを理解しておくことが大切です。
小数点の厳密さを求める場合は整数化する、文字列であれば明示的に数値へ変換するなど、状況に応じた対策が必要になります。

さらに、実務で使う際にはコードの構造化やスコープの理解、変数宣言の方法などをしっかり押さえることで、保守性の高いコードが書けるようになります。
フロントエンドでもサーバーサイドでもJavaScriptを使う機会は増えていますので、ぜひ本記事の内容を踏まえて計算ロジックを自分のプロジェクトに取り入れてみてください。