【JavaScript】四則演算と計算の基本｜算術演算子・Math・小数計算の注意点まで解説

この記事で学べること

• 算術演算子（+, -, *, /, %, **）の使い方と優先順位
• 代入演算子（+=, -= など）とインクリメント・デクリメント
• Mathオブジェクト（round, floor, ceil, random など）
• 数値の型変換（Number, parseInt, parseFloat）と落とし穴
• 浮動小数点問題（0.1 + 0.2）の原因と対策
• 消費税計算・パーセント計算・数値フォーマットなど実務パターン
• NaN・Infinity・0除算などよくあるミス

// 加算（足し算）
console.log(10 + 3);   // 13
console.log(5 + 2.5); // 7.5

// 減算（引き算）
console.log(10 - 3);   // 7
console.log(5 - 8);   // -3（負の数もOK）

// 乗算（掛け算）
console.log(10 * 3);   // 30
console.log(4 * 0.5); // 2

// 除算（割り算）
console.log(10 / 3);   // 3.3333333333333335
console.log(10 / 2);   // 5

ポイント：JavaScriptの除算は整数同士でも小数の結果を返します。他の言語（Java, C など）のように切り捨てにはなりません。整数の結果が必要な場合は Math.floor() や Math.trunc() を使います。

// 剰余（余り）の基本
console.log(10 % 3);  // 1  （10 ÷ 3 = 3 余り 1）
console.log(15 % 5);  // 0  （割り切れる）
console.log(7 % 2);   // 1  （奇数）
console.log(8 % 2);   // 0  （偶数）

// 偶数・奇数の判定に使える
function isEven(num) {
  return num % 2 === 0;
}

console.log(isEven(4));  // true
console.log(isEven(7));  // false

// べき乗（累乗）
console.log(2 ** 3);   // 8    （2の3乗）
console.log(3 ** 2);   // 9    （3の2乗）
console.log(10 ** 0);  // 1    （何でも0乗は1）
console.log(4 ** 0.5); // 2    （平方根と同じ）

// Math.pow() と同じ結果
console.log(Math.pow(2, 3)); // 8

// 乗算・除算は加算・減算より先に計算される
console.log(2 + 3 * 4);     // 14（3 * 4 = 12 → 2 + 12 = 14）
console.log((2 + 3) * 4);   // 20（括弧が最優先）

// べき乗は乗算より優先される
console.log(2 * 3 ** 2);     // 18（3 ** 2 = 9 → 2 * 9 = 18）

// 迷ったら括弧を使って明示するのがベスト
const result = (100 - 20) * (1 + 0.1);
console.log(result); // 88（税込み計算の例）

let score = 100;

score += 10;  // score = 100 + 10 → 110
score -= 20;  // score = 110 - 20 → 90
score *= 2;   // score = 90 * 2  → 180
score /= 3;   // score = 180 / 3 → 60
score %= 7;   // score = 60 % 7  → 4
score **= 3;  // score = 4 ** 3  → 64

console.log(score); // 64

let a = 5;
let b = 5;

// 後置（postfix）: 現在の値を返してからインクリメント
console.log(a++); // 5（先に5を返し、その後 a が 6 になる）
console.log(a);   // 6

// 前置（prefix）: インクリメントしてから値を返す
console.log(++b); // 6（先に b が 6 になり、6を返す）
console.log(b);   // 6

// デクリメントも同様
let c = 10;
c--;
console.log(c); // 9

// forループでよく使われる
for (let i = 0; i < 3; i++) {
  console.log(i); // 0, 1, 2
}

注意：前置と後置の違いは「式の中で使うとき」に影響します。単独で i++ と書く場合（forループなど）は前置・後置どちらでも結果は同じです。

// 四捨五入
console.log(Math.round(2.7));  // 3
console.log(Math.round(2.3));  // 2
console.log(Math.round(2.5));  // 3（.5は切り上げ）

// 切り捨て（負の数に注意）
console.log(Math.floor(2.9));   // 2
console.log(Math.floor(-2.1));  // -3（小さい方へ丸める）

// 切り上げ
console.log(Math.ceil(2.1));   // 3
console.log(Math.ceil(-2.9));  // -2（大きい方へ丸める）

// 整数部分のみ（0方向）
console.log(Math.trunc(2.9));   // 2
console.log(Math.trunc(-2.9));  // -2

// 引数から最大値・最小値を取得
console.log(Math.max(10, 5, 20, 3));  // 20
console.log(Math.min(10, 5, 20, 3));  // 3

// 配列の最大値・最小値（スプレッド構文）
const scores = [85, 92, 78, 95, 60];
console.log(Math.max(...scores)); // 95
console.log(Math.min(...scores)); // 60

// 0以上1未満のランダムな小数
console.log(Math.random()); // 例: 0.7234...

// 0〜9 の整数
console.log(Math.floor(Math.random() * 10));

// 1〜10 の整数
console.log(Math.floor(Math.random() * 10) + 1);

// min〜max の整数を生成する汎用関数
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

console.log(getRandomInt(1, 100)); // 1〜100のランダムな整数

// 絶対値
console.log(Math.abs(-5));   // 5
console.log(Math.abs(5));    // 5

// 平方根
console.log(Math.sqrt(9));   // 3
console.log(Math.sqrt(2));   // 1.4142135623730951

// べき乗（** 演算子と同じ）
console.log(Math.pow(2, 10)); // 1024

// 円周率
console.log(Math.PI); // 3.141592653589793

// 円の面積を求める
const radius = 5;
const area = Math.PI * radius ** 2;
console.log(area); // 78.53981633974483

// Number(): 厳密な変換（数値以外が含まれるとNaN）
console.log(Number('123'));    // 123
console.log(Number('12.5'));   // 12.5
console.log(Number('12px'));   // NaN（数値以外を含む）
console.log(Number(''));      // 0（空文字は0）
console.log(Number(true));    // 1
console.log(Number(false));   // 0
console.log(Number(null));    // 0

// parseInt(): 先頭から整数として解析
console.log(parseInt('12px'));    // 12（先頭の数値部分を取得）
console.log(parseInt('12.9'));    // 12（小数点以下は切り捨て）
console.log(parseInt('abc'));     // NaN
console.log(parseInt('0xFF', 16)); // 255（16進数）

// parseFloat(): 先頭から小数として解析
console.log(parseFloat('12.5px')); // 12.5
console.log(parseFloat('3.14'));   // 3.14

// 文字列 + 数値 => 文字列結合（足し算にならない！）
console.log('5' + 3);    // "53"（文字列結合）
console.log('10' + 20);  // "1020"（文字列結合）

// -, *, / は文字列を自動で数値に変換する
console.log('5' - 3);    // 2（数値として計算）
console.log('10' * 2);   // 20（数値として計算）
console.log('20' / 4);   // 5（数値として計算）

注意：+ 演算子だけが文字列結合と加算の両方の意味を持ちます。フォーム入力値（常に文字列）を計算に使う場合は、必ず Number() や parseInt() で数値に変換してから計算しましょう。

const input = '42';

// 単項+演算子で数値に変換
console.log(+input);       // 42（数値）
console.log(+'3.14');     // 3.14
console.log(+true);        // 1
console.log(+'abc');      // NaN

// 計算時の活用例
const price = '1000';
const tax = '0.1';
console.log(+price * (1 + +tax)); // 1100

console.log(0.1 + 0.2); // 0.30000000000000004
console.log(0.1 + 0.2 === 0.3); // false！

// 他にも誤差が出る例
console.log(0.1 + 0.7); // 0.7999999999999999
console.log(1.1 + 2.2); // 3.3000000000000003

0.30000000000000004
false
0.7999999999999999
3.3000000000000003

重要：これはJavaScript固有の問題ではなく、IEEE 754浮動小数点数を使うほぼすべてのプログラミング言語（Python, Java, C, Ruby など）で発生します。

const result = 0.1 + 0.2;

// toFixed() は文字列を返す
console.log(result.toFixed(1));  // "0.3"（文字列）
console.log(result.toFixed(2));  // "0.30"

// 数値として使いたい場合は Number() で変換
console.log(Number(result.toFixed(1))); // 0.3（数値）

// 金額表示に便利
const price = 19.999;
console.log(price.toFixed(2)); // "20.00"

// NG: 小数のまま計算すると誤差が出る
console.log(0.1 + 0.2); // 0.30000000000000004

// OK: 整数にしてから計算
console.log((1 + 2) / 10); // 0.3（正確）

// 金額計算の例（円単位で計算）
function addPrice(a, b) {
  // 小数を整数に変換して計算し、最後に戻す
  return (Math.round(a * 100) + Math.round(b * 100)) / 100;
}

console.log(addPrice(0.1, 0.2)); // 0.3（正確）

ポイント：ECMAScript提案中の Decimal 型が将来的に追加される可能性がありますが、現時点では整数化して計算する方法が最も安全です。金額計算が多いプロジェクトでは decimal.js などのライブラリの導入も検討しましょう。

// 消費税計算（税率10%）
function calcTax(price, taxRate = 0.1) {
  const tax = Math.floor(price * taxRate);
  return {
    price,
    tax,
    total: price + tax
  };
}

console.log(calcTax(1980));
// { price: 1980, tax: 198, total: 2178 }

// 軽減税率8%の場合
console.log(calcTax(1980, 0.08));
// { price: 1980, tax: 158, total: 2138 }

// パーセント計算
function calcPercent(part, total) {
  return Math.round((part / total) * 100 * 10) / 10;
}

console.log(calcPercent(75, 200));  // 37.5
console.log(calcPercent(1, 3));    // 33.3

// 割引計算
function discount(price, percent) {
  return Math.floor(price * (1 - percent / 100));
}

console.log(discount(3000, 20)); // 2400（20%オフ）
console.log(discount(3000, 15)); // 2550（15%オフ）

// min以上max以下のランダムな整数
function randomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// サイコロ（1〜6）
console.log(randomInt(1, 6));

// パスワード生成風（ランダムな4桁）
console.log(randomInt(1000, 9999));

// 配列からランダムに1つ選ぶ
const fruits = ['りんご', 'みかん', 'ぶどう', 'バナナ'];
const index = randomInt(0, fruits.length - 1);
console.log(fruits[index]);

// toLocaleString() でカンマ区切り
console.log((1234567).toLocaleString()); // "1,234,567"

// 通貨フォーマット（日本円）
const yen = (29800).toLocaleString('ja-JP', {
  style: 'currency',
  currency: 'JPY'
});
console.log(yen); // "¥29,800"

// 小数点付き通貨（米ドル）
const usd = (1234.5).toLocaleString('en-US', {
  style: 'currency',
  currency: 'USD'
});
console.log(usd); // "$1,234.50"

// パーセント表示
const rate = (0.156).toLocaleString('ja-JP', {
  style: 'percent',
  minimumFractionDigits: 1
});
console.log(rate); // "15.6%"

// NaN が発生するケース
console.log(0 / 0);             // NaN
console.log(Number('abc'));     // NaN
console.log(parseInt('hello')); // NaN
console.log(Math.sqrt(-1));     // NaN

// NaN の厄介な性質: 自分自身と等しくない
console.log(NaN === NaN);  // false！
console.log(NaN == NaN);   // false！

// NaN の判定には isNaN() または Number.isNaN() を使う
console.log(isNaN(NaN));            // true
console.log(isNaN('abc'));          // true（暗黙の型変換あり）
console.log(Number.isNaN(NaN));     // true
console.log(Number.isNaN('abc')); // false（より厳密）

// NaN が伝播する（NaN を含む計算結果はすべて NaN）
console.log(NaN + 5);   // NaN
console.log(NaN * 10);  // NaN

ベストプラクティス：NaN チェックには Number.isNaN() を使いましょう。グローバルの isNaN() は引数を暗黙的に数値変換するため、isNaN("abc") が true を返す等の意図しない挙動があります。

// 0以外の数値を0で割るとInfinity
console.log(10 / 0);   // Infinity
console.log(-10 / 0);  // -Infinity
console.log(0 / 0);    // NaN（0÷0は不定形）

// Infinity の性質
console.log(Infinity + 1);        // Infinity
console.log(Infinity * 2);        // Infinity
console.log(Infinity - Infinity); // NaN
console.log(1 / Infinity);        // 0

// 有限数チェック
console.log(isFinite(100));       // true
console.log(isFinite(Infinity));  // false
console.log(isFinite(NaN));       // false

// 意図しない型変換の例
console.log('5' + 3);       // "53"（文字列結合）
console.log('5' - 3);       // 2（数値の引き算）
console.log(true + 1);      // 2（true => 1）
console.log(false + 1);     // 1（false => 0）
console.log(null + 5);      // 5（null => 0）
console.log(undefined + 5); // NaN（undefined => NaN）
console.log('' + 0);       // "0"（文字列結合）
console.log('' - 0);       // 0（空文字 => 0）

対策：フォーム入力やAPIレスポンスの値を計算に使う前に、必ず Number() で明示的に変換し、Number.isNaN() でチェックしましょう。暗黙の型変換に頼らない安全なコードを書く習慣が重要です。

この記事のポイント

• 算術演算子は優先順位を理解し、迷ったら括弧を使う
• 代入演算子（+=など）で変数の更新をシンプルに書ける
• Mathオブジェクトで四捨五入・乱数・絶対値などの計算が可能
• 型変換は明示的に行い、「文字列+数値」の罠に注意する
• 浮動小数点問題は整数化して計算する方法で回避する
• NaN・Infinityの挙動を理解し、Number.isNaN() でチェックする