JavaScript: JavaScriptの演算子
最終更新：2026-10-13
演算子はJavaScriptに何の操作を実行するかを指示する記号です。毎日+で加算していますが、JSの演算子は算術だけではありません。代入、比較、論理評価もすべて演算子に依存しています。このレッスンでは、最もよく使う演算子を一挙にカバーします。
1. 算術演算子
| 演算子 | 意味 | 例 |
|---|---|---|
+ |
加算 | 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()と同等ですがより簡潔です。
前置と後置の++ / --の違い：前置は変更してから返し、後置は返してから変更します。同じ行に複数の++を連結しないでください — 読めない謎かけのようになります。
▶ サンプル：算術演算子の基礎
▶ 試してみよう2. 代入演算子
=は代入であり、数学的な「等しい」ではありません。これは初心者にとって最もよくある落とし穴の一つで、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 |
▶ サンプル：代入演算子
▶ 試してみよう3. 比較演算子
| 演算子 | 意味 |
|---|---|
== |
緩い等価（型変換を行う） |
=== |
厳密等価（型変換なし） |
!= |
緩い不等価 |
!== |
厳密不等価 |
> |
大なり |
< |
小なり |
>= |
以上 |
<= |
以下 |
⚠️ ==と===の落とし穴：これはJavaScriptで最も有名な落とし穴です。==は暗黙的に型変換を行い、"5" == 5はtrueになります！一方===は型と値の両方が一致する必要があり、"5" === 5はfalseです。型変換が特に必要な場合を除き、常に===を使いましょう。同様に、!=の代わりに!==を使います。
▶ サンプル：==と===の落とし穴
▶ 試してみようどうですか？0 == falseと"" == falseがどちらもtrueです — まったく直感に反します。りんごとオレンジを比較するようなもので、==は「どちらも果物だから近い」と言い、===は「同じではない」と言います。===を坚守すれば、バグの半分を防げます。
4. 論理演算子
| 演算子 | 意味 | 説明 |
|---|---|---|
&& |
AND | 両側がtruthyのときのみtrue |
|| |
OR | どちらかがtruthyのときtrue |
! |
NOT | 値を反転させる |
&&と||には短絡評価という便利な機能があります。&&は最初のfalsy値で停止し、||は最初のtruthy値で停止します — 残りは評価されません。これは簡潔な条件代入によく使われます：
<script>
var name = userInput || '名無し';
</script>
▶ サンプル：論理演算子と短絡評価
▶ 試してみよう5. 文字列との+演算子
+が文字列に出会うと、結合演算子になります。片方が文字列であれば、もう片方も文字列に変換されて結合されます。
<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"になるのは、古典的な面接の落とし穴です。+は左から右に評価され、左側が文字列になると、その後のすべてが結合になります。
6. 三項演算子の概要
三項演算子はif...elseの省略記法で、構文は条件 ? 値1 : 値2です。
<script>
var status = age >= 18 ? '成人' : '未成年';
</script>
条件がtruthyなら値1を返し、そうでなければ値2を返します。シンプルな条件では三項演算子が適していますが、ネストしないでください — a ? b ? c : d : eは混乱の元です。詳細な使い方はレッスン10で扱います。
7. 演算子の優先順位
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。理由を説明してください — 説明できない場合は、==の暗黙的型変換ルールを復習してから、===を坚定して使いましょう。
