JavaScriptの数値・計算入門【初心者向け】

JavaScript 数値と計算の基本

「計算結果がおかしい」「文字列と数値の違いがわからない」——そんな悩みを解決します。JavaScriptの数値（number）は整数も小数も同じ型で扱います。

他のプログラミング言語（Java・C言語など）では整数型（int）と浮動小数点型（float/double）が別々ですが、JavaScriptでは number 型1つで両方を扱います。これはシンプルですが、小数の計算で予期しない結果になることがあるので注意が必要です。

四則演算

console.log(10 + 3);  // 13（足し算）
console.log(10 - 3);  // 7（引き算）
console.log(10 * 3);  // 30（掛け算）
console.log(10 / 3);  // 3.333...（割り算）
console.log(10 % 3);  // 1（余り）
console.log(2 ** 10); // 1024（べき乗）

変数を使った計算

let price = 1000;
let tax   = 0.1;
let total = price * (1 + tax);
console.log(total); // 1100

変数を使うと、値を変更するだけで計算結果が変わるので便利です。税率が変わっても tax の値を変えるだけで対応できます。

代入演算子

計算と代入を同時に行う省略記法もあります。

let score = 0;
score += 10; // score = score + 10 と同じ → 10
score -= 3;  // score = score - 3 と同じ → 7
score *= 2;  // score = score * 2 と同じ → 14

🔗 あわせて配列入門もチェックしてみましょう。

Mathオブジェクト：便利な数学関数

Math.round(3.7);   // 4（四捨五入）
Math.floor(3.9);   // 3（切り捨て）
Math.ceil(3.1);    // 4（切り上げ）
Math.abs(-5);      // 5（絶対値）
Math.max(1, 5, 3); // 5（最大値）
Math.min(1, 5, 3); // 1（最小値）
Math.random();     // 0以上1未満のランダムな数

1〜10のランダムな整数を作る

const random = Math.floor(Math.random() * 10) + 1;
console.log(random); // 1〜10のランダムな整数

📖 詳しくはスコープとはで解説しています。

文字列と数値の変換

フォームの入力値は文字列として取得されます。計算するには数値に変換する必要があります。

// 文字列 → 数値
const str = '42';
console.log(Number(str));    // 42
console.log(parseInt(str));  // 42（整数）
console.log(parseFloat('3.14')); // 3.14（小数）

// 数値 → 文字列
const num = 42;
console.log(String(num));    // '42'
console.log(num.toString()); // '42'

👉 変数の基本も参考にしてください。

よくある間違い

• 文字列と数値の混同：prompt() やHTMLの入力値は文字列です。計算する前に Number() や parseInt() で数値に変換しましょう。変換せずに + を使うと文字列連結になります。
• 小数の計算誤差：0.1 + 0.2 は 0.30000000000000004 になります。これはコンピュータの浮動小数点の仕組みによるもので、バグではありません。toFixed(2) で桁数を指定して表示しましょう。
• NaN（Not a Number）：数値に変換できない文字列を計算すると NaN になります。Number.isNaN() でチェックできます。typeof NaN は "number" を返すので注意してください。
• parseIntの基数指定忘れ：parseInt("08") は一部の古い環境で8進数として解釈されることがあります。parseInt("08", 10) のように基数10を明示しましょう。
• 比較演算子の罠：NaN === NaN は false です。NaNかどうかの判定には必ず Number.isNaN() を使いましょう。

📖 JavaScript入門で基礎を確認できます。

🔗 文字列操作入門で文字列と数値の変換を学べます。

浮動小数点の罠

0.1 + 0.2 は 0.3 にならず 0.30000000000000004 になります。これはJavaScriptだけでなく、ほとんどのプログラミング言語で起きる現象です。コンピュータは2進数で小数を表現するため、10進数の0.1を正確に表現できないのが原因です。

対処法は以下の通りです。

• toFixed()：表示する桁数を指定する（(0.1 + 0.2).toFixed(1) → "0.3"）
• 整数で計算する：金額計算では円単位（整数）で計算してから表示時に変換する
• Math.round()：四捨五入して丸める

実践例：BMI計算機

function calcBMI(height, weight) {
  // 身長をcmからmに変換
  const heightM = height / 100;
  const bmi = weight / (heightM * heightM);
  return Math.round(bmi * 10) / 10; // 小数第1位まで
}

console.log(calcBMI(170, 60)); // 20.8
console.log(calcBMI(160, 55)); // 21.5

このように、Math.round()と掛け算・割り算を組み合わせると、任意の桁数で四捨五入できます。

NaN と Infinity

• NaN（Not a Number）— 数値に変換できない結果。Number.isNaN() で判定。NaN === NaN は false になるので、比較演算子では判定できません。
• Infinity — 0で割ると発生。isFinite() で判定。1 / 0 は Infinity、-1 / 0 は -Infinity になります。

🔗 変数の基本・条件分岐・ループ・Mathオブジェクト・JavaScript入門も参考にしてください。

実践例：ランダムなパスワード生成

Math.random()と文字列操作を組み合わせて、簡単なパスワード生成器を作ってみましょう。

function generatePassword(length) {
  const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
  let password = '';
  for (let i = 0; i < length; i++) {
    const index = Math.floor(Math.random() * chars.length);
    password += chars[index];
  }
  return password;
}

console.log(generatePassword(8)); // 例: 'k3m9x2p7'

まとめ

数値の扱いを覚えると、計算機やゲームなど幅広いプログラムが作れます。特にゲーム開発ではスコア計算・タイマー・ランダム生成など、数値操作が頻出します。レッスンでさらに実践的な使い方を学んでみましょう。