このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。
【JavaScript入門】インクリメントとデクリメント
インクリメントとデクリメント
JavaScript では、変数の値を 1 増やしたり減らしたりする操作が非常に多く登場します。この操作を簡略化するために用意されているのが「インクリメント（++）」と「デクリメント（--）」という演算子です。たとえば、変数 num に対して「num++」と書くと、num の値が 1 増加します。同様に「num--」で 1 減少します。これらの記述は「num = num + 1」や「num = num - 1」を省略した形です。さらに、演算式の中で使うときには、前置か後置かによって実行順が変化する点に注意が必要です。
１．インクリメントとデクリメント
| 演算子 | 意味 | 例の書き換え |
|---|---|---|
++ | インクリメント（1を足す） | num++ は num = num + 1 と同じ。 |
-- | デクリメント（1を引く） | num-- は num = num - 1 と同じ。 |
- 後置型： 変数の後ろに「++」や「--」を書く（例：
num++） - 前置型： 変数の前に「++」や「--」を書く（例：
++num）
後置型では「変数の値を使ってから1を足す・引く」、前置型では「先に1を足す・引くしてから変数の値を使う」という挙動の違いがあります。
２．後置型と前置型の動き
- 後置型（
num++）
１．式の中で一度、現在のnumの値を使う。
２．使い終わった後で、numに 1 を足す（または引く） - 前置型（
++num）
１．先にnumを 1 増やす（または減らす）
２．式の中で、変化後のnumの値を使う。
３．サンプルコード（HTML + JavaScript）
以下の例を「myIncrementDecrementExample.html」というファイル名で保存し、ブラウザで実行してください。コンソールの出力を観察すると、後置型と前置型の違いがわかります。
【myIncrementDecrementExample.html】
<html lang="ja">
<head>
<meta charset="utf-8">
<title>myIncrementDecrementExample.html</title>
</head>
<body>
<h1>インクリメントとデクリメント演算子のサンプル</h1>
<p>ブラウザの開発者ツール(コンソール)を開いて結果を確認してください。</p>
<script>
// 1. 後置型インクリメント（num++）
let num = 12;
console.log('初期値 num:', num);
console.log('計算式で num++ を使う:', 5 + num++);
console.log('計算後の num:', num);
console.log('もう一度 num++ を計算式で使う:', num++);
console.log('計算後の num:', num);
// 2. 前置型インクリメント（++num）
let num2 = 5;
console.log('初期値 num2:', num2);
console.log('計算式で ++num2 を使う:', 10 + ++num2);
console.log('計算後の num2:', num2);
console.log('もう一度 ++num2 を計算式で使う:', ++num2);
console.log('計算後の num2:', num2);
// 3. デクリメント演算子の例
let count = 3;
console.log('初期値 count:', count);
// 後置型
console.log('count-- の結果:', count--);
console.log('count-- 実行後:', count);
// 前置型
console.log('--count の結果:', --count);
console.log('count の最終値:', count);
</script>
</body>
</html>実行結果
デバッグコンソールの出力
初期値 num: 12
計算式で num++ を使う: 17 // (5 + 12) を使い、num は 13 に変化
計算後の num: 13
もう一度 num++ を計算式で使う: 13
計算後の num: 14
初期値 num2: 5
計算式で ++num2 を使う: 10 + (先に1加算して6) → 16
計算後の num2: 6
もう一度 ++num2 を計算式で使う: 7
計算後の num2: 7
初期値 count: 3
count-- の結果: 3
count-- 実行後: 2
--count の結果: 1
count の最終値: 1まとめ
- インクリメント（++）：変数に対して 1 を足す。
- デクリメント（--）：変数に対して 1 を引く。
- 後置型（num++ / num--）： 式の評価後に変数の値を変更。
- 前置型（++num / --num）：先に変数の値を変更してから式を評価。
単独で使うと混乱はありませんが、式の中に混ざっているときには計算順序を理解していないと、思わぬ結果になることがあります。コードを読みやすく保つためにも、インクリメント・デクリメントを式の中に組み込みすぎないよう注意してください。