JavaScript

A quick, beginner-friendly page that shows how JavaScript does adding, subtracting, multiplying, dividing, remainders, and powers—plus when + joins strings, what happens with divide-by-zero, and how to avoid common decimal gotchas.

算術演算子 (Arithmetic operator)

+
左辺と右辺の和（加算）を求める、または文字列を結合する。

JavaScript

myVal = 5 + 8;
// 5 足す 8 の結果を変数 myVal に代入。

myStr = "Hello," + "JavaScript";
// 文字列「Hello,」と「JavaScript」を結合して変数 myStr に代入。
-
左辺と右辺の差（減算）を求める、または符号を反転する。

JavaScript

myVal = 5 - 8;
// 5 引く 8 の結果を変数 myVal に代入。

myNum = -myNum;
// 変数 myNum の値を反転（値が 8 の場合 -8、-8 の場合 8）。
*
左辺と右辺の積（乗算）を求める。

JavaScript

myVal = 5 * 8;
// 5 かける 8 の結果を変数 myVal に代入。

myVal = myVal * 5;
// 変数 myVal かける 5 の結果を変数 myVal に代入。
/
左辺と右辺の商（除算）を求める。

JavaScript

myVal = 8 / 2;
// 8 割る 2 の結果を変数 myVal に代入。

myVal = myNum / myNum2;
// 「変数 myNum」割る「変数 myNum2」の結果を変数 myVal に代入。
%
左辺÷右辺の剰余を求める。

JavaScript

myVal = 12 % 5;
// 12 割る 5 の余りを変数 myVal に代入（myVal の値は 2）。

myNum = myVal % 5;
// 変数 myVal 割る 5 の余りを変数 myNum に代入。
++
値に 1 を加算する（x++ は x=x+1 と同様）。インクリメント。

JavaScript

myVal = i++;
// 変数 myVal に変数 i の値を代入してから変数 i に 1 を加算。

myVal = ++i;
// 変数 i に 1 を加算してから変数 myVal に代入。
--
値から 1 を減算する（x-- は x=x-1 と同様）。デクリメント。

JavaScript

myVal = i--;
// 変数 myVal に変数 i の値を代入してから変数 i から 1 を減算。

myVal = --i;
// 変数 i から 1 を減算してから変数 myVal に代入。

Sample source

x と y に入れた数字をもとにそれぞれの計算（演算）を行います。

x =
y =
文字列として連結
x + y =
x - y =
x * y =
x / y =
x % y =
++x =
--y =

フォームに入力された値は文字列として扱われるため、Number() で数値に変換しておく。

HTML

<script>
	function myCal() {
		const xRaw = document.myForm.myX.value;
		const yRaw = document.myForm.myY.value;

		// まず「文字として連結」の結果（+ は文字列が混ざると連結）
		document.myForm.myStr.value = xRaw + yRaw;

		// 数へ変換（空や数字でない時は NaN）
		const x = Number(xRaw);
		const y = Number(yRaw);

		const show = v => (Number.isFinite(v) ? String(v) : "");

		document.myForm.plus.value  = show(x + y);
		document.myForm.minus.value = show(x - y);
		document.myForm.mul.value   = show(x * y);
		document.myForm.div.value   = show(x / y);
		document.myForm.rem.value   = show(x % y);

		let xi = x;
		let yd = y;
		xi = xi + 1;  // ++xi と同じ
		yd = yd - 1;  // --yd と同じ
		document.myForm.inc.value = show(xi);
		document.myForm.dec.value = show(yd);
	}
</script>

<form name="myForm">
    x = <input type="text" name="myX" size="8"><br>
    y = <input type="text" name="myY" size="8"><br>
    <input type="button" value="演算する" onclick="myCal()">
    <hr>
    文字列として連結 <input type="text" name="myStr" size="8"><br>
    x + y = <input type="text" name="plus" size="8"><br>
    x - y = <input type="text" name="minus" size="8"><br>
    x * y = <input type="text" name="mul" size="8"><br>
    x / y = <input type="text" name="div" size="8"><br>
    x % y = <input type="text" name="rem" size="8"><br>
    ++x   = <input type="text" name="inc" size="8"><br>
    --y   = <input type="text" name="dec" size="8">
</form>

算術演算子の一覧

+
足し算（片方が文字列だと連結）
-
引き算（数として計算）
*
かけ算
/
わり算（0 で割ると Infinity / -Infinity、0/0 は NaN）
%
剰余（余り）。負の数は左側の符号に引きずられます
**
べき乗（例：2 ** 3 は 8）
+x
単項プラス（数値化の近道）
-x
単項マイナス（符号反転）
++/--
インクリメント/デクリメント（式の評価タイミングに注意）

文字列と数値で動きが変わるところ

+
片方が文字列なら「連結」。数として足したいときは Number() や 単項+ で数に直す
- * / %
文字っぽくても数に直してから計算される（数に直せないと NaN）

小数は誤差に注意（例：0.1 + 0.2 が 0.3 にならない）。表示は toFixed() が便利

BigInt と Number は一緒に計算できない（混ぜると TypeError）

FAQ

「2」と「3」を足したら「23」になります
+ は片方が文字列だと連結になります。数として足すなら Number("2") + Number("3") や +"2" + +"3" を使います。
0 で割るとどうなる？
1/0 は Infinity、-1/0 は -Infinity、0/0 は NaN です。表示前に Number.isFinite() でチェックすると親切です。
% は余り？負の数は？
JavaScript の % は剰余です。符号は左側の数に依存します（例：-7 % 5 === -2）。
i++ と ++i の違い
どちらも 1 を足しますが、式の値として使ったときのタイミングが違います。i++ は「使ってから足す」、++i は「足してから使う」。
** と Math.pow() の違い
基本は ** でOK。2 ** 3 と Math.pow(2, 3) は同じ意味です。
0.1 + 0.2 が 0.3 にならない
二進小数の誤差です。表示は toFixed()、計算は整数にスケールするなどの回避策があります。

よくあるエラー早見表

ReferenceError: x is not defined
変数宣言を忘れた → let/const で宣言
TypeError: Cannot mix BigInt and other types
BigInt と Number を混ぜた → どちらかに統一
結果が空欄（NaN / Infinity）
入力が数値でない、または 0 除算 → Number() で変換、Number.isFinite() で確認
"2" + "3" が "23"
+ が連結 → 先に数値化してから加算
意図せず 1 増える/減る
前置/後置の取り違え → 素直に i = i + 1; で書く