JavaScript | 基礎構文：数値・演算 – インクリメント・デクリメント

インクリメント・デクリメントを一言でいうと

インクリメント・デクリメントは、
数値を「1 だけ増やす」または「1 だけ減らす」ための専用の記号 です。

++ がインクリメント（＋1）
-- がデクリメント（−1）

たとえば、

count++;  // count = count + 1 と同じ意味
count--;  // count = count - 1 と同じ意味

count++;  // count = count + 1 と同じ意味
count--;  // count = count - 1 と同じ意味

のように使います。

ここが重要です。
++ / -- は、特に ループ（for 文など）で「カウンタを 1 ずつ増やす」場面で頻出 します。
ただし、前に付けるか（++i）、後ろに付けるか（i++）で「その式の値」が変わる ので、ここをしっかり理解しておくことが大事です。

基本のかたち：i++ と i–

いちばん素直な使い方

まずは一番シンプルなパターンから。

let i = 0;

i++; // i を 1 増やす
console.log(i); // 1

i++; // さらに 1 増やす
console.log(i); // 2

i--; // 1 減らす
console.log(i); // 1

let i = 0;

i++; // i を 1 増やす
console.log(i); // 1

i++; // さらに 1 増やす
console.log(i); // 2

i--; // 1 減らす
console.log(i); // 1

これは次の書き方とまったく同じ意味です。

i = i + 1; // インクリメント
i = i - 1; // デクリメント

i = i + 1; // インクリメント
i = i - 1; // デクリメント

ただ、i++ や i-- のほうが短く、for 文の中などで見慣れた形になります。

ループでの典型的な使い方

for (let i = 0; i < 5; i++) {
  console.log(i);
}

for (let i = 0; i < 5; i++) {
  console.log(i);
}

この i++ は、「ループ 1 回終わるごとに i を 1 増やす」という意味です。
i = i + 1 と書いても同じですが、i++ が慣習的に使われます。

ここが重要です。
「1 ずつ増えるカウンタ」を書くときに、i++ はほぼ反射的に出てくる形にしておくと、ループの書き方・読み方が一気に楽になります。

前置（++i）と後置（i++）の違い（ここが一番大事）

「変数自体」はどちらも同じように増える

まず押さえておきたいのは、
++i も i++ も、「変数 i を 1 増やす」という点では同じ です。

let i = 0;

i++;
console.log(i); // 1

++i;
console.log(i); // 2

let i = 0;

i++;
console.log(i); // 1

++i;
console.log(i); // 2

どちらも「i の中身」を増やしています。

違うのは「その式の値」としてどう扱われるか

本当に重要なのはここです。

++i（前置）
変数を 1 増やしてから、その値を式の結果として使う

i++（後置）
今の値を式の結果として先に使い、その後で変数を 1 増やす

具体例を見てみましょう。

例1：前置 ++i

let i = 0;

let x = ++i;

console.log("i:", i); // 1
console.log("x:", x); // 1

let i = 0;

let x = ++i;

console.log("i:", i); // 1
console.log("x:", x); // 1

ここでは、

1. ++i → i を 1 増やして、その新しい値（1）を式の値とする
2. その値が x に代入される

なので、i も x も 1 になります。

例2：後置 i++

let i = 0;

let x = i++;

console.log("i:", i); // 1
console.log("x:", x); // 0

let i = 0;

let x = i++;

console.log("i:", i); // 1
console.log("x:", x); // 0

この場合は、

1. i++ →「いまの i の値（0）」を式の値とする
2. その 0 が x に代入される
3. そのあとで、i が 1 増えて 1 になる

という順番です。

つまり、

前置（++i） → 増やしてから使う
後置（i++） → 使ってから増やす

という違いがある、ということです。

ここが重要です。
「変数自体」はどちらでも増える。
でも、“その場で式の値として何が渡されるか” は前置と後置で違う。
代入や関数呼び出しなど、「式の結果が重要な場所」で使うときに、この違いが効いてきます。

インクリメント・デクリメントと代入・関数呼び出し

代入との組み合わせ

let i = 5;

let a = i++;   // a に「5」が入り、その後 i は 6 になる
let b = ++i;   // i を 7 にして、その「7」が b に入る

console.log("i:", i); // 7
console.log("a:", a); // 5
console.log("b:", b); // 7

let i = 5;

let a = i++;   // a に「5」が入り、その後 i は 6 になる
let b = ++i;   // i を 7 にして、その「7」が b に入る

console.log("i:", i); // 7
console.log("a:", a); // 5
console.log("b:", b); // 7

この順番を追えるかどうかが、前置／後置理解の鍵です。

関数に渡すとき

function show(value) {
  console.log("value:", value);
}

let i = 10;

show(i++); // value: 10（渡したあとで i は 11）
show(++i); // i は 12 になってから渡される → value: 12

function show(value) {
  console.log("value:", value);
}

let i = 10;

show(i++); // value: 10（渡したあとで i は 11）
show(++i); // i は 12 になってから渡される → value: 12

実際の開発では、
「読みやすさ」の観点から、こういう書き方はあまりおすすめしません。

たとえば、次のほうが格段に分かりやすいです。

let i = 10;

show(i);   // 10
i++;

i++;
show(i);   // 12

let i = 10;

show(i);   // 10
i++;

i++;
show(i);   // 12

ここが重要です。
「++ を他の式の中に混ぜ込む」と、人間から見て一気に読みにくくなる。
“その式の結果” に使うより、「行として分けて素直に increment する」ほうが安全で理解もしやすいです。

ループとインクリメント／デクリメント

for 文での i++ は「お約束の形」

for (let i = 0; i < 5; i++) {
  console.log(i);
}

for (let i = 0; i < 5; i++) {
  console.log(i);
}

ここで使われている i++ は「後置」です。

実は ++i にしても動きは同じです。

for (let i = 0; i < 5; ++i) {
  console.log(i);
}

for (let i = 0; i < 5; ++i) {
  console.log(i);
}

for 文の「3つ目の部分」（i++ のところ）は、
「そのループの最後に実行される式」であり、
その式の“値”は使われない からです。

そのため、

i++ でも ++i でも、「毎回 i を 1 増やす」という点で違いがありません。

while 文での使い方

while でも、インクリメント・デクリメントはよく使います。

let i = 0;

while (i < 5) {
  console.log(i);
  i++;  // 1ずつ増やす
}

let i = 0;

while (i < 5) {
  console.log(i);
  i++;  // 1ずつ増やす
}

または逆方向にカウントダウンするデクリメント。

let i = 5;

while (i > 0) {
  console.log(i);
  i--; // 1ずつ減らす
}

let i = 5;

while (i > 0) {
  console.log(i);
  i--; // 1ずつ減らす
}

ここが重要です。
ループと組み合わせるときは、「式の値」として ++ / — を使うのではなく、
「単に 1 ずつ増減させる文」として使う、という意識で書くと読みやすくなります。
for のカウンタや while の末尾など、「1 ずつ進める場所」に出てくるのが自然な姿です。

インクリメント／デクリメントでやりがちな危険な書き方

同じ変数に対して複数回 ++ する式

let i = 0;

let x = i++ + i++;
console.log(i, x); // 2, 1 か ？（挙動の理解が難しくなる）

let i = 0;

let x = i++ + i++;
console.log(i, x); // 2, 1 か ？（挙動の理解が難しくなる）

こういう書き方は、
仕様として動きは決まっていますが、人間にとって非常に分かりづらい です。

実務では、こうするくらいなら、

let i = 0;

let x = i;
i++;
x = x + i;
i++;

let i = 0;

let x = i;
i++;
x = x + i;
i++;

または計算を少し分けたほうが、圧倒的に安全で読みやすいです。

if の条件の中で ++ する

let i = 0;

if (i++ < 5) {
  // ...
}

let i = 0;

if (i++ < 5) {
  // ...
}

ぱっと見て、「比較に使われているのは増える前の i なのか後なのか」が一瞬で分かる人は少ないです。

こういうときは素直に分けます。

let i = 0;
const current = i;
i++;

if (current < 5) {
  // ...
}

let i = 0;
const current = i;
i++;

if (current < 5) {
  // ...
}

ここが重要です。
「書けるけど読みにくい書き方」は、なるべく避けるのが中長期的に賢い選択です。
特に ++ / — は、“式の中に埋め込まず、単独の行で使う” を基本スタイルにしたほうが、バグも減るし理解も早くなります。

インクリメント・デクリメントのまとめとおすすめの使い方

インクリメント（++）は「＋1」、デクリメント（--）は「−1」。
i++ も ++i も、「変数 i を 1 増やす」という点では同じ。

前置（++i）は「増やしてから、その値を式として使う」。
後置（i++）は「今の値を式として使ってから、その後で増やす」。

ループのカウンタなど、「式の値を使わない場所」ではどちらでも実質同じだが、慣習的に i++ がよく使われる。

複雑な式の中で ++ / — を使うと、挙動が読みにくくなりがちなので、
基本は「1 行に 1 回」「単独の文としてインクリメント／デクリメントする」書き方を心がけると安全。

ここが重要です。
インクリメント・デクリメントは「1 ずつ増減する」というとても素朴な記号ですが、
前置／後置を混ぜて“トリッキーな式”を書こうとすると、一気に罠になります。
まずはループやカウンタ更新で素直に i++ / i-- を使い、
“式の値としてどう振る舞うか” はゆっくり実験しながら体で覚えていく、という順番が一番おすすめです。

もし練習してみたくなったら、次のコードを自分の手で書いて、結果を予想してから実行してみてください。

let i = 0;

console.log("A:", i++); // ?
console.log("B:", i);   // ?

console.log("C:", ++i); // ?
console.log("D:", i);   // ?

let x = 5;
let y = x++ + ++x;      // y と x はいくつになるか予想してみる

console.log("x:", x);
console.log("y:", y);

let i = 0;

console.log("A:", i++); // ?
console.log("B:", i);   // ?

console.log("C:", ++i); // ?
console.log("D:", i);   // ?

let x = 5;
let y = x++ + ++x;      // y と x はいくつになるか予想してみる

console.log("x:", x);
console.log("y:", y);

自分の予想と実際の結果を比べてみると、
「前置／後置が式の中でどう評価されるか」という感覚が、かなりクリアになってくるはずです。