【JavaScript入門】数値計算を行う演算子

 JavaScript には、数値を計算して新たな値を得るための演算子が多数用意されています。日常的に使う加減乗除はもちろん、余りを求める演算子や累乗を求める演算子などもそろっており、プログラムの中で数値を自在に操作できます。また、JavaScript では整数と小数を区別せず同じ Number 型で扱うため、一部の言語とは計算の挙動が異なる部分もあります。ここでは、代表的な数値演算子の使い方や注意点をまとめます。

1.単項演算子

値ひとつを変換したり、符号を反転させたりする演算子です。

演算子説明例の意味
+値を数値化する。+'1'文字列 '1' を数値 1 に変換
-値を数値化し、正負を反転する。-1数値 1 を数値 -1 に変換

2.算術演算子

 2 つの値を使って加減乗除などを行います。JavaScript では / で割り算をするとき、小数が発生する場合は小数点以下もそのまま計算されます(整数のまま切り捨てはしません)。

演算子説明例の意味
+加算演算子。足し算。3 + 23 足す 2 で 5
-減算演算子。引き算。3 - 23 引く 2 で 1
/除算演算子。割り算。3 / 23 割る 2 で 1.5
*乗算演算子。掛け算。3 * 23 かける 2 で 6
%剰余演算子。割り算の余り。3 % 23 割る 2 の余り 1
**べき乗演算子。左辺を右辺の回数だけ掛ける(累乗)。3 ** 23 の 2乗で 9
  • 累乗 (**) は、たとえば 1.1 ** 10 のように書くと、約 2.59374246… となります。
  • 剰余 (%) は、数値をグループ分けしたり偶数・奇数を調べるときに重宝します。

3.剰余演算子の活用

 剰余演算子 % を使うと、割り算の余りが求まります。以下の例で 2 で割った余りを見ると、偶数か奇数かがすぐわかります。

整数計算結果偶奇
00 % 20偶数
11 % 21奇数
22 % 20偶数
33 % 21奇数
44 % 20偶数
55 % 21奇数

4.小数点以下を処理する関数

 JavaScript の組み込み Math オブジェクトには、小数点以下を切り捨てたり、切り上げたり、四捨五入したりする関数があります。小数点以下をそのまま使わず、整数化したいときに利用します。

方法説明
Math.trunc(n)小数点以下を切り捨てる (ES6 以降)。Math.trunc(34.56) → 34
Math.round(n)四捨五入する。Math.round(34.56) → 35
Math.floor(n)小数点以下を切り捨てる。Math.floor(34.56) → 34
Math.ceil(n)小数点以下を切り上げる。Math.ceil(34.56) → 35

5.演算子の優先順位と丸括弧

 演算子には優先順位があり、先に * / % などが処理され、次に + - などが処理されます。同じ優先順位の場合は左から右へ計算します。

10 - 3 * 2 + 6
  ↓
10 - 6 + 6
  ↓
4 + 6
  ↓
10

ここでは 3 * 2 が先に計算されます。

(10 - 3) * (2 + 6)
  ↓
7 * 8
  ↓
56

6.特殊な数値: NaN と Infinity

数値の演算結果が正しく計算できない状況では、以下の特殊な値が生まれます。

  • NaN (Not-A-Number):
    例えば 0 / 0 のように定義されない計算を行うと NaN になる。NaN 同士を演算しても必ず NaN。
    判定には Number.isNaN() が便利。
  • Infinity / -Infinity:
    例えば 1 / 0Infinity-1 / 0-Infinity となる。
    それぞれ Number.POSITIVE_INFINITYNumber.NEGATIVE_INFINITY と同値。

7.サンプルHTML: 演算子の動作確認

 ファイル名を「arithmeticOperatorsSample.html」として、ブラウザで開き、コンソールを確認してください。

【arithmeticOperatorsSample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>arithmeticOperatorsSample.html</title>
</head>
<body>
  <h1>数値計算を行う演算子のサンプル</h1>
  <p>ブラウザの開発者ツール(コンソール)を開き、結果を確認してください。</p>
  <script>
    // 1. 単項演算子
    console.log('+"1" →', +"1");  // 文字列 "1" を数値 1 に変換
    console.log('-10  →', -10);   // 数値 10 を -10 に

    // 2. 加減乗除と剰余、累乗
    console.log('3 + 2 =', 3 + 2);
    console.log('3 - 2 =', 3 - 2);
    console.log('3 / 2 =', 3 / 2);
    console.log('3 * 2 =', 3 * 2);
    console.log('3 % 2 =', 3 % 2);
    console.log('3 ** 2 =', 3 ** 2);

    // 3. 小数点以下の処理
    console.log('Math.trunc(34.56) =', Math.trunc(34.56));
    console.log('Math.round(34.56) =', Math.round(34.56));
    console.log('Math.floor(34.56) =', Math.floor(34.56));
    console.log('Math.ceil(34.56) =', Math.ceil(34.56));

    // 4. 計算順序の違い (演算子優先順位)
    let val1 = 2 + 3 * 4 + 5;    // 2 + 12 + 5 → 19
    let val2 = (2 + 3) * (4 + 5);// 5 * 9 → 45
    console.log('2 + 3 * 4 + 5 =', val1);
    console.log('(2 + 3) * (4 + 5) =', val2);

    // 5. NaN と Infinity
    console.log('0 / 0 =', 0 / 0);         // NaN
    console.log('1 / 0 =', 1 / 0);         // Infinity
    console.log('-1 / 0 =', -1 / 0);       // -Infinity
    console.log('Number.isNaN(0/0) =', Number.isNaN(0/0));
  </script>
</body>
</html>

実行結果

デバッグコンソールの出力

+"1" → 1
-10  → -10
3 + 2 = 5
3 - 2 = 1
3 / 2 = 1.5
3 * 2 = 6
3 % 2 = 1
3 ** 2 = 9
Math.trunc(34.56) = 34
Math.round(34.56) = 35
Math.floor(34.56) = 34
Math.ceil(34.56) = 35
2 + 3 * 4 + 5 = 19
(2 + 3) * (4 + 5) = 45
0 / 0 = NaN
1 / 0 = Infinity
-1 / 0 = -Infinity
Number.isNaN(0/0) = true

まとめ

 JavaScript の数値演算子は、他の多くの言語と似たような記法を使うため、初心者でも直感的に操作できます。ただし、

  • / の除算が小数で返る
  • 累乗演算子 ** が使える
  • NaNInfinity などの特殊な値の扱いがある
    といった点は、JavaScript 特有の注意ポイントです。

 また、計算順序に関しては演算子の優先順位を理解したうえで、必要に応じて () を使い、コードの可読性を上げましょう。こうした基本的な数値演算の仕組みをしっかり押さえれば、さまざまな場面での数値処理がよりスムーズに実装できます。