いっしー@Webエンジニア
Webツールプログラミング言語プログラミング学習ITニュースIT用語辞典ポートフォリオ

【JavaScript】算術演算子の書き方と使い方の基本

プログラミング初心者向けに、JavaScriptでの数値計算の基本となる「算術演算子」を解説します。足し算(+)や引き算(-)などの四則演算から、割り算の余り(%)、インクリメント(++)まで、豊富なサンプルコードで説明。テストの平均点計算のような実践例を通して、計算処理の基礎をマスターできます。

作成日: 更新日:

開発環境

  • OS: Windows10
  • Editor: Visual Studio Code
  • JavaScript: ES6以降

JavaScriptの算術演算子とは

JavaScriptにおける算術演算子とは、足し算や引き算といった、数学的な計算を行うための記号のことです。プログラムの中で数値を使った計算をしたいときに使用します。

主に以下の種類があります。

  • 加算 (+) 2つの数値を足し算します。

    1let result = 10 + 5; // resultは15になります

  • 減算 (-) 左の数値から右の数値を引き算します。

    1let result = 10 - 5; // resultは5になります

  • 乗算 (*) 2つの数値を掛け算します。記号は × ではなくアスタリスク * を使います。

    1let result = 10 * 5; // resultは50になります

  • 除算 (/) 左の数値を右の数値で割り算します。記号は ÷ ではなくスラッシュ / を使います。

    1let result = 10 / 5; // resultは2になります

  • 剰余 (%) 割り算をしたときの「余り」を求めます。例えば、10を3で割ると商は3で余りは1になるため、結果は1となります。

    1let result = 10 % 3; // resultは1になります

  • べき乗 (**) 左の数値を右の数値の回数だけ掛け合わせます（累乗）。例えば 2 ** 3 は、2を3回掛ける 2 * 2 * 2 と同じ意味になります。

    1let result = 2 ** 3; // resultは8になります

サンプルコード

このセクションでは、JavaScriptにおける基本的な数値計算、つまり「算術演算」について学習します。足し算や引き算など、プログラミングで数値を扱う際の基礎となる操作を見ていきましょう。

javascript/chapter05/index.html

このHTMLファイルは、これから見ていく13個のJavaScriptファイル（script01.jsからscript13.js）を読み込むためのものです。<script>タグのsrc属性でファイル名を指定し、defer属性によってHTMLの読み込みを妨げずにスクリプトを実行できるようにしています。

1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>JavaScriptチュートリアル</title>
7  </head>
8
9  <body>
10    <h1>JavaScriptチュートリアル</h1>
11    <script src="./script01.js" defer></script>
12    <script src="./script02.js" defer></script>
13    <script src="./script03.js" defer></script>
14    <script src="./script04.js" defer></script>
15    <script src="./script05.js" defer></script>
16    <script src="./script06.js" defer></script>
17    <script src="./script07.js" defer></script>
18    <script src="./script08.js" defer></script>
19    <script src="./script09.js" defer></script>
20    <script src="./script10.js" defer></script>
21    <script src="./script11.js" defer></script>
22    <script src="./script12.js" defer></script>
23    <script src="./script13.js" defer></script>
24  </body>
25</html>

javascript/chapter05/script01.js

これは「単項プラス演算子」と呼ばれるもので、数値の前に+をつけます。数値が正の数であることを明示的に示すために使いますが、通常は省略されます。console.logは、コンソール（開発者ツールなどで確認できる出力画面）に結果を表示する命令です。

1// 正数
2let result = +3;
3console.log("正数の計算結果:", result);  // 3

javascript/chapter05/script02.js

これは「単項マイナス演算子」です。数値の前に-をつけることで、その数値を負の数にします。

1// 負数
2let result = -3;
3console.log("負数の計算結果:", result);  // -3

javascript/chapter05/script03.js

+演算子を使って、2つの数値を足し算（加算）しています。

1// 加算
2let result = 2 + 3;
3console.log("加算の計算結果:", result);  // 5

javascript/chapter05/script04.js

-演算子を使って、左の数値から右の数値を引き算（減算）しています。

1// 減算
2let result = 5 - 2;
3console.log("減算の計算結果:", result);  // 3

javascript/chapter05/script05.js

*（アスタリスク）演算子を使って、2つの数値を掛け算（乗算）しています。

1// 乗算
2let result = 4 * 2;
3console.log("乗算の計算結果:", result);  // 8

javascript/chapter05/script06.js

/（スラッシュ）演算子を使って、左の数値を右の数値で割り算（除算）しています。

1// 除算
2let result = 10 / 2;
3console.log("除算の計算結果:", result);  // 5

javascript/chapter05/script07.js

%（パーセント）演算子を使って、割り算の余り（剰余）を計算しています。この例では、9を4で割ると商が2で余りが1になるため、結果は1となります。

1// 剰余 (余り)
2let result = 9 % 4;
3console.log("9 を 4 で割った余りの計算結果:", result);  // 1

javascript/chapter05/script08.js

**（アスタリスク2つ）演算子を使って、べき乗を計算します。左の数値を右の数値の回数だけ掛け合わせる計算です。この例では、2の3乗（2 * 2 * 2）を計算しています。

1// べき乗
2let result = 2 ** 3;
3console.log("2 の 3 乗の計算結果:", result);  // 8

javascript/chapter05/script09.js

割り算の結果に小数点以下が含まれる場合、その小数点以下を切り捨てたい場合があります。その際にはMath.floor()という関数を使います。この例では、7を2で割った結果である3.5の小数点以下を切り捨て、3を求めています。

1// 切り捨て除算
2let result = Math.floor(7 / 2);
3console.log("7 を 2 で割った切り捨て除算の計算結果:", result);  // 3

javascript/chapter05/script10.js

プログラミングでは、数値を0で割ることは数学的に定義されていません。JavaScriptで数値を0で割ると、エラーにはならずInfinityという特別な値が返されます。これは「無限大」を意味します。

1// 0で割るとどうなる？
2let divisionByZero = 5 / 0;
3console.log("5 / 0:", divisionByZero);  // Infinity

javascript/chapter05/script11.js

数値と文字列など、数値として計算できない値同士で算術演算を行うと、結果はNaN（Not a Number）という特別な値になります。これは「数値ではない」ことを意味します。

1// 数値ではないものを演算すると NaN になる
2let invalidOperation = 5 * "abc";
3console.log("5 * 'abc':", invalidOperation);  // NaN

javascript/chapter05/script12.js

「インクリメント演算子（++）」は数値を1増やし、「デクリメント演算子（--）」は数値を1減らすためのものです。変数の後ろに置くか（後置）、前に置くか（前置）で、値が評価されるタイミングが異なります。

  • 後置（num++）の場合、その行の処理では元の値が使われ、その後に値が1増えます。
  • 前置（++num）の場合、まず値が1増え、その新しい値がその行の処理で使われます。 デクリメントも同様のルールです。
1// インクリメント（++）とデクリメント（--）
2let num = 10;
3console.log("初期値:", num);  // 10
4
5// 後置インクリメント
6console.log("num++:", num++); // 10（出力後に +1）
7console.log("インクリメント後のnum:", num);  // 11
8
9// 前置インクリメント
10console.log("++num:", ++num); // 12（+1してから出力）
11
12// 後置デクリメント
13console.log("num--:", num--); // 12（出力後に -1）
14console.log("デクリメント後のnum:", num);  // 11
15
16// 前置デクリメント
17console.log("--num:", --num); // 10（-1してから出力）

javascript/chapter05/script13.js

これは、これまで学んだ算術演算子を使った実践的な練習問題です。5科目の点数をそれぞれ変数に代入し、+演算子で合計点を計算しています。次に、計算した合計点を科目数の5で割ることで、平均点を算出しています。このように、基本的な演算を組み合わせることで、さまざまな計算処理を実現できます。

1// 学校のテストの平均点を計算する練習問題
2// 数学: 85点、英語: 78点、理科: 92点、社会: 74点、国語: 88点の5科目の点数が与えられています。
3// これらの点数の合計と平均を計算する。
4
5let math = 85;
6let english = 78;
7let science = 92;
8let socialStudies = 74;
9let nationalLanguage = 88;
10
11let totalScore = math + english + science + socialStudies + nationalLanguage;
12let averageScore = totalScore / 5;
13
14console.log("合計点は", totalScore, "点です。"); // 合計点は 417 点です。
15console.log("平均点は", averageScore, "点です。"); // 平均点は 83.4 点です。

おわりに

今回は、JavaScriptで数値計算を行うための基本的な「算術演算子」について学びました。足し算の+や掛け算の*といった四則演算に加え、割り算の余りを求める%や、数値を1ずつ増減させる++や--といった便利な使い方を確認しました。テストの平均点を計算する例で見たように、これらの基本的な演算子を組み合わせることで、実用的なプログラムを作成できます。ここで学んだ計算処理はあらゆるプログラムの土台となりますので、ぜひ実際にコードを書いてマスターしてください。

【JavaScript】算術演算子の書き方と使い方の基本 | いっしー@Webエンジニア