インクリメント・デクリメント 可視化教材
では、インクリメント/デクリメントの動きを視覚的に理解できる教材風解説。
ここでは、文字と矢印で「増えるタイミング」をアニメ風に表現します。JavaScriptの実行結果も同時に見れるようにしています。
1️⃣ 後置 num++ の動き
let num = 5;
console.log("値を返す前: num =", num);
console.log("console.log(num++):", num++);
console.log("値を返した後: num =", num);
動きイメージ（矢印で表示）
[ num = 5 ] ---> console.log(num++) // 出力 5
[ num = 6 ] // ここで num が 1 増える
- ポイント：後置は「表示（返す）」→「増える」
2️⃣ 前置 ++num の動き
let num = 5;
console.log("console.log(++num):", ++num);
動きイメージ
[ num = 5 ]
++num ---> num を 1 増やす
[ num = 6 ] ---> console.log に 6 を出力
- ポイント：前置は「増える」→「表示（返す）」
3️⃣ 繰り返し処理でのアニメ風表示
for (let i = 0; i < 3; i++) {
console.log("ループ回数:", i, "→ i++ 後の値:", i+1);
}
動きイメージ
i = 0 ---> i++
i = 1 ---> i++
i = 2 ---> i++
ループ終了
- 矢印で増加が見えるので、数字の変化がイメージしやすい
4️⃣ デクリメント -- の動き
後置 num--
let num = 3;
console.log(num--); // 出力 3
console.log(num); // 出力 2
[ num = 3 ] ---> console.log(num--) // 出力 3
[ num = 2 ] // ここで num が 1 減る
前置 --num
let num = 3;
console.log(--num); // 出力 2
[ num = 3 ]
--num ---> num を 1 減らす
[ num = 2 ] ---> console.log に出力
- 前置は減る→表示、後置は表示→減る
5️⃣ 練習問題（確認用）
let a = 7;
let b = a++; // 後置
let c = ++a; // 前置
console.log(a); // ?
console.log(b); // ?
console.log(c); // ?
答え：
a = 8
b = 7
c = 8
後置は「代入前の値」、前置は「増えた後の値」が返ることを確認！
💡 まとめの図イメージ（頭の中で描こう）
後置 num++ : [表示] → [増える]
前置 ++num : [増える] → [表示]
後置 num-- : [表示] → [減る]
前置 --num : [減る] → [表示]