JavaScriptの演算子
演算子はJavaScriptに何の操作を実行するかを指示する記号です。毎日+で加算していますが、JSの演算子は算術だけではありません。代入、比較、論理評価もすべて演算子に依存しています。このレッスンでは、最もよく使う演算子を一挙にカバーします。
算術演算子
| 演算子 | 意味 | 例 |
|---|---|---|
+ |
加算 | 5 + 3 → 8 |
- |
減算 | 5 - 3 → 2 |
* |
乗算 | 5 * 3 → 15 |
/ |
除算 | 6 / 3 → 2 |
% |
剰余 | 7 % 3 → 1 |
** |
べき乗 | 2 ** 3 → 8 |
++ |
インクリメント | x++ または ++x |
-- |
デクリメント | x-- または --x |
剰余演算子%は特に便利で、奇数/偶数の判定やループでの折り返しなどに使われます。**はES2016で追加されたべき乗演算子で、Math.pow()と同等ですがより簡潔です。
前置と後置の++ / --の違い：前置は変更してから返し、後置は返してから変更します。同じ行に複数の++を連結しないでください — 読めない謎かけのようになります。
実例：算術演算子の基礎
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>算術演算子</title>
</head>
<body>
<h3>算術演算子デモ</h3>
<pre id="output"></pre>
<script>
var out = document.getElementById('output');
var a = 17, b = 5;
var lines = [];
lines.push('a = ' + a + ', b = ' + b);
lines.push('a + b = ' + (a + b));
lines.push('a - b = ' + (a - b));
lines.push('a * b = ' + (a * b));
lines.push('a / b = ' + (a / b));
lines.push('a % b = ' + (a % b));
lines.push('a b = ' + (a b));
var x = 10;
lines.push('');
lines.push('x = 10');
lines.push('x++ = ' + (x++) + ' （後置：古い値を返し、xは' + x + 'に）');
lines.push('++x = ' + (++x) + ' （前置：先に変更、xは' + x + 'に）');
out.textContent = lines.join('\n');
</script>
</body>
</html>
代入演算子
=は代入であり、数学的な「等しい」ではありません。これは初心者にとって最もよくある落とし穴の一つで、if (x = 5)はエラーにならず、xに5を代入して5（truthy）を返すため、条件は常にtrueになります。
複合代入は省略記法です：
| 省略記法 | 等価 |
|---|---|
x += 5 |
x = x + 5 |
x -= 3 |
x = x - 3 |
x *= 2 |
x = x * 2 |
x /= 4 |
x = x / 4 |
x %= 3 |
x = x % 3 |
実例：代入演算子
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>代入演算子</title>
</head>
<body>
<h3>代入演算子デモ</h3>
<pre id="output"></pre>
<script>
var out = document.getElementById('output');
var lines = [];
var score = 80;
lines.push('初期スコア = ' + score);
score += 10;
lines.push('score += 10 → ' + score);
score -= 25;
lines.push('score -= 25 → ' + score);
score *= 2;
lines.push('score *= 2 → ' + score);
score /= 3;
lines.push('score /= 3 → ' + score.toFixed(1));
score %= 30;
lines.push('score %= 30 → ' + score.toFixed(1));
out.textContent = lines.join('\n');
</script>
</body>
</html>
比較演算子
| 演算子 | 意味 |
|---|---|
== |
緩い等価（型変換を行う） |
=== |
厳密等価（型変換なし） |
!= |
緩い不等価 |
!== |
厳密不等価 |
> |
大なり |
< |
小なり |
>= |
以上 |
<= |
以下 |
⚠️ ==と===の落とし穴：これはJavaScriptで最も有名な落とし穴です。==は暗黙的に型変換を行い、"5" == 5はtrueになります！一方===は型と値の両方が一致する必要があり、"5" === 5はfalseです。型変換が特に必要な場合を除き、常に===を使いましょう。同様に、!=の代わりに!==を使います。
実例：==と===の落とし穴
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>==と===</title>
</head>
<body>
<h3>緩い等価と厳密等価</h3>
<pre id="output"></pre>
<script>
var out = document.getElementById('output');
var lines = [];
lines.push('"5" == 5 → ' + ("5" == 5));
lines.push('"5" === 5 → ' + ("5" === 5));
lines.push('');
lines.push('0 == false → ' + (0 == false));
lines.push('0 === false → ' + (0 === false));
lines.push('');
lines.push('"" == false → ' + ("" == false));
lines.push('"" === false → ' + ("" === false));
lines.push('');
lines.push('null == undefined → ' + (null == undefined));
lines.push('null === undefined → ' + (null === undefined));
lines.push('');
lines.push('5 != "5" → ' + (5 != "5"));
lines.push('5 !== "5" → ' + (5 !== "5"));
out.textContent = lines.join('\n');
</script>
</body>
</html>
どうですか？0 == falseと"" == falseがどちらもtrueです — まったく直感に反します。りんごとオレンジを比較するようなもので、==は「どちらも果物だから近い」と言い、===は「同じではない」と言います。===を坚守すれば、バグの半分を防げます。
論理演算子
| 演算子 | 意味 | 説明 |
|---|---|---|
&& |
AND | 両側がtruthyのときのみtrue |
|| |
OR | どちらかがtruthyのときtrue |
! |
NOT | 値を反転させる |
&&と||には短絡評価という便利な機能があります。&&は最初のfalsy値で停止し、||は最初のtruthy値で停止します — 残りは評価されません。これは簡潔な条件代入によく使われます：
<script>
var name = userInput || '名無し';
</script>
実例：論理演算子と短絡評価
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>論理演算子</title>
</head>
<body>
<h3>論理演算子デモ</h3>
<pre id="output"></pre>
<script>
var out = document.getElementById('output');
var lines = [];
var age = 20;
var hasTicket = true;
lines.push('age = ' + age + ', hasTicket = ' + hasTicket);
lines.push('age >= 18 && hasTicket → ' + (age >= 18 && hasTicket));
lines.push('age >= 18 || hasTicket → ' + (age >= 18 || hasTicket));
lines.push('!hasTicket → ' + (!hasTicket));
lines.push('');
lines.push('--- 短絡評価 ---');
lines.push('1 && "hello" → ' + (1 && "hello"));
lines.push('0 && "hello" → ' + (0 && "hello"));
lines.push('1 || "hello" → ' + (1 || "hello"));
lines.push('0 || "hello" → ' + (0 || "hello"));
lines.push('');
var username = '';
var displayName = username || 'ゲスト';
lines.push('空文字 || "ゲスト" → ' + displayName);
out.textContent = lines.join('\n');
</script>
</body>
</html>
文字列との+演算子
+が文字列に出会うと、結合演算子になります。片方が文字列であれば、もう片方も文字列に変換されて結合されます。
<script>
"Hello" + " " + "World" // "Hello World"
"数値: " + 42 // "数値: 42"
3 + 4 + "px" // "7px"（3+4=7が先に計算され、その後結合）
"px" + 3 + 4 // "px34"（左から右へ："px"+3="px3"、その後+4）
</script>
"px" + 3 + 4が"px7"ではなく"px34"になるのは、古典的な面接の落とし穴です。+は左から右に評価され、左側が文字列になると、その後のすべてが結合になります。
三項演算子の概要
三項演算子はif...elseの省略記法で、構文は条件 ? 値1 : 値2です。
<script>
var status = age >= 18 ? '成人' : '未成年';
</script>
条件がtruthyなら値1を返し、そうでなければ値2を返します。シンプルな条件では三項演算子が適していますが、ネストしないでください — a ? b ? c : d : eは混乱の元です。詳細な使い方はレッスン10で扱います。
演算子の優先順位
JavaScriptは優先順位に基づいて評価順序を決定し、数学で学んだのと同じルールに従います：乗算と除算は加算と減算の前、括弧が最初です。
<script>
2 + 3 * 4 // 14、20ではない
(2 + 3) * 4 // 20
</script>
一般的な優先順位（高い順）：() → ! → ** → * / % → + - → > < >= <= → == === != !== → && → || → ?: → =。
迷ったら括弧を追加しましょう。括弧は無料ですが、バグは高額です。
📖 まとめ
- 算術演算子は数値計算を処理し、
%（剰余）と**（べき乗）は実践でよく使われる - 複合代入演算子（
+=、-=など）はコードをより簡潔にする - 比較には常に
===と!==を優先し、==の暗黙的型変換によるバグを避ける - 論理演算子
&&と||は短絡評価をサポートし、デフォルト値の代入に便利 +は文字列に出会うと結合演算子になる — 左から右への評価順序に注意- 優先順位に迷ったら括弧を追加する — 文字数を節約するよりも可読性がはるかに重要
❓ よくある質問
"1" + 2 + 3は"15"ではなく"123"になるのですか？+は左から右に評価されます。"1" + 2は文字列"12"を生成し、次に"12" + 3が"123"になります。先に数値を加算したい場合は括弧を使います："1" + (2 + 3)は"15"になります。0 == falseはtrueなのですか？==は比較の前に型変換を行います。0とfalseの両方が数値0に変換されるため、等しくなります。これが===が推奨される理由で、型変換を行わないため0 === falseはfalseです。x++と++xの違いは何ですか？x++は増加前の古い値を返し、++xは増加後の新しい値を返します。例えば、var a = 5; var b = a++;はa=6、b=5になりますが、var a = 5; var b = ++a;はa=6、b=6になります。📝 演習
- 3桁の数値（例：371）を入力として受け取り、
%と/を使って百の位、十の位、一の位を抽出して表示するプログラムを書いてください。 if...elseを使わずに、三項演算子を1行で使って年変数yearがうるう年かどうかを判定し、結果をisLeapに代入してください（ヒント：4で割り切れて100で割り切れない、または400で割り切れる）。- 以下の式の結果を予測し、ブラウザのコンソールで検証してください：
[] == false、[] == ![]、null == 0。理由を説明してください — 説明できない場合は、==の暗黙的型変換ルールを復習してから、===を坚定して使いましょう。