JavaScriptのインクリメントとデクリメントをやさしく解説
ちょっとずつ進むことって、プログラミングでも大事。たった「1」を増減させるだけなのに、書き方で結果が変わるからこそ、ここを丁寧に理解しておくと後で必ず楽になります。
基本の考え方
- インクリメント（
++）: 数値を1増やす - デクリメント（
--）: 数値を1減らす
let x = 10;
x++; // x は 11 になる
x--; // x は 10 に戻る
- ポイント: 変数の値を「1だけ」変えたいときの省略記法。
x = x + 1をx++で短く書けます。
前置と後置の違い（ここが一番の山場）
- 前置:
++x/--x（先に変えて、その値を使う） - 後置:
x++/x--（先に元の値を使って、あとで変える）
例1：代入での違いを目で追う
let a = 5;
let b = a++; // 後置：b に 5 を入れてから、a が 6 になる
// 現在：a = 6, b = 5
let c = ++a; // 前置：a を 7 にしてから、その 7 を c に入れる
// 現在：a = 7, b = 5, c = 7
- 理解のコツ: 「後置は“今の値を渡してから変える”」「前置は“変えてから渡す”」。
例2：関数呼び出しに渡すとき
function show(v) { console.log(v); }
let n = 3;
show(n++); // 3 が表示される（表示後に n は 4 になる）
show(++n); // 5 が表示される（先に 4→5 にしてから渡す）
よく使う場面（実用）
- ループのカウンタ
for (let i = 0; i < 3; i++) {
console.log(i);
}
// 出力: 0, 1, 2
- 配列の順番にアクセス
let arr = ['A', 'B', 'C'];
let i = 0;
console.log(arr[i++]); // 'A' を表示して i は 1 へ
console.log(arr[i++]); // 'B' を表示して i は 2 へ
console.log(arr[i]); // 'C' を表示（ここでは増やしてない）
- インラインでカウントしながら使う
let count = 0;
console.log(`訪問回数: ${count++}回`); // 今回は 0 を表示、次回から 1
console.log(`訪問回数: ${count}回`); // 1 を表示
初心者がつまずきやすいポイントと避け方
- 複雑な式の中で後置を使いすぎない: 読みづらさの原因になります。まずは「代入」と「表示（利用）」を分ける。
// NG（読みづらい）
let ans = (++x) + (y++) - (z--);
// OK（段階を分けて安全に）
x++;
let temp = y;
y++;
ans = x + temp - z;
z--;
- 前置・後置は“単独利用”なら差はない:
i++;と++i;は行単体で使うなら同じ。違いが出るのは「その場で値を使う（代入・引数・比較）」とき。 - 数値以外には使えない: 文字列やオブジェクトには基本的に使わない。
nullやundefinedに対して使うとエラーやNaNの原因になる。 - 浮動小数点は1ずつでも誤差が気になることがある: 通常は問題ないが、金額計算などは整数で扱うか、桁管理を意識する。
手を動かして理解するミニ演習（答え付き）
演習1：前置・後置の結果を当てる
- 問題:
let a = 1; let b = a++ + ++a;のあと、aとbは？let x = 5; let y = x-- + x--;のあと、xとyは？
- 答え:
- 計算過程: 最初 a=1。
a++は「1を使ってから a=2」、次の++aは「a=3 にして 3 を使う」。 - 結果:
b = 1 + 3 = 4、その時点のa = 3
- 計算過程: 最初 x=5。
x--は「5を使ってから x=4」、次のx--は「4を使ってから x=3」。 - 結果:
y = 5 + 4 = 9、その時点のx = 3
- 計算過程: 最初 a=1。
演習2：配列を順番に出力（後置インクリメント）
- 問題:
arr = ['red','green','blue']を順に表示し、最後に「合計3件」と表示するコードを書いてください。 - 解答例:
const arr = ['red', 'green', 'blue'];
let i = 0;
console.log(arr[i++]); // red
console.log(arr[i++]); // green
console.log(arr[i++]); // blue
console.log(`合計${i}件`); // 合計3件
演習3：for文で偶数だけを数える
- 問題: 0 から 10 までの偶数を表示してください。
- 解答例（インクリメントを2ずつ進める）：
for (let i = 0; i <= 10; i += 2) {
console.log(i);
}
- 別解（1ずつ進めてチェック）：
for (let i = 0; i <= 10; i++) {
if (i % 2 === 0) console.log(i);
}
実務でのコツ
- 読みやすさ優先: チーム開発では「前置/後置の違いで迷いそうなら分けて書く」が安全。
- ループ条件はわかりやすく:
for (let i = 0; i < n; i++)の形は慣例的で読みやすい。 - 副作用を最小化: 値を使う場所で同時に変える（後置）と、意図が伝わりづらいことがある。まずは「使う」「変える」を分離するとバグが減る。