【JavaScript】算術演算子による数値計算処理の完全ガイド

2026年1月22日

概要

プログラムにおいて数値計算は最も基本的かつ重要な処理の一つです。

JavaScriptには、足し算や引き算などの四則演算に加え、割り算の余りを求める「剰余」や、数値を累乗する「べき乗」を行うための専用演算子が用意されています。

本記事では、これら6種類の算術演算子の正確な挙動と、実務で使用する際のコード実装例を解説します。

仕様（入出力）

入力: 定義された2つの数値データ
出力:
1. 加算、減算、乗算、除算、剰余、べき乗の計算結果
2. ブラウザコンソールへのログ出力

基本の使い方

JavaScriptでの計算は、以下の演算子記号を数値の間に記述して行います。

算術演算子一覧

演算子	意味	記述例	結果の例 (a=10, b=3)
`+`	加算（足し算）	`a + b`	`13`
`-`	減算（引き算）	`a - b`	`7`
`*`	乗算（掛け算）	`a * b`	`30`
`/`	除算（割り算）	`a / b`	`3.333...`
`%`	剰余（割り算の余り）	`a % b`	`1`
`**`	べき乗（累乗）	`a ** b`	`1000` (10の3乗)

コード全文（HTML / JavaScript）

HTML (index.html)

計算結果を確認するためのコンソール誘導画面です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript演算子デモ</title>
    <script src="calc-demo.js" defer></script>
</head>
<body>
    <div class="container">
        <h1>演算結果の確認</h1>
        <p>計算結果はブラウザのデベロッパーツール（コンソール）に出力されます。</p>
        <p>F12キーを押して「Console」タブを開いてください。</p>
    </div>
</body>
</html>

JavaScript (calc-demo.js)

主要な6つの演算子を使用した計算ロジックです。可読性を高めるため、計算式と結果をセットで出力します。

/**
 * 算術演算子のデモンストレーション関数
 */
const performCalculations = () => {
    // 計算に使用する数値
    const numA = 8;
    const numB = 3;

    console.log(`--- 計算開始: A=${numA}, B=${numB} ---`);

    // 1. 加算 (Addition)
    const sum = numA + numB;
    console.log('加算 (+):', sum);

    // 2. 減算 (Subtraction)
    const difference = numA - numB;
    console.log('減算 (-):', difference);

    // 3. 乗算 (Multiplication)
    const product = numA * numB;
    console.log('乗算 (*):', product);

    // 4. 除算 (Division)
    const quotient = numA / numB;
    console.log('除算 (/):', quotient);

    // 5. 剰余 (Modulus) - 割り算の余り
    // 用途: 偶数・奇数の判定や、ループ処理での特定タイミングの検知など
    const remainder = numA % numB;
    console.log('剰余 (%):', remainder);

    // 6. べき乗 (Exponentiation) - ES2016で追加
    // Math.pow(numA, numB) と同等
    const power = numA ** numB;
    console.log('べき乗 (**):', power);
};

// 計算を実行
performCalculations();

カスタムポイント

変数の変更:numA と numB の値を変更して、小数の場合や負の数の場合にどのような結果になるか試してみてください。
画面表示への変更:現在は console.log を使用していますが、document.body.innerHTML += … などを使用すれば、計算結果をWebページ上に直接表示させることも可能です。

注意点

浮動小数点数の誤差:JavaScriptの仕様上、小数を含む計算（例: 0.1 + 0.2）は正確に 0.3 にならず、0.30000000000000004 のような僅かな誤差が生じることがあります。正確な金額計算などが必要な場合は注意が必要です。
文字列の結合:+ 演算子は、片方が文字列の場合「連結」として機能します（例: 10 + “20” は “1020” になります）。数値計算を行う場合は、確実に数値型であることを保証する必要があります。
ゼロ除算:数値を 0 で割ると、エラーではなく Infinity（無限大）という特別な値が返されます。意図しない挙動の原因となるため、分母が0にならないようチェックすることが望ましいです。

応用

複合代入演算子の活用

変数の値を更新しながら計算する場合、短縮記法を使用できます。

let score = 100;

// score = score + 50 と同じ意味
score += 50; 
console.log(score); // 150

// score = score * 2 と同じ意味
score *= 2;
console.log(score); // 300

まとめ

これらの演算子はプログラミングの基礎中の基礎ですが、「文字列との結合」や「小数の誤差」といったJavaScript特有の落とし穴も存在します。特に剰余演算子（%）は、特定の間隔で処理を実行したり、数値を範囲内に収めたりするロジックで頻繁に使用されるため、その挙動を正しく理解しておくことが重要です。

よかったらシェアしてね！