JavaScript | インクリメント・デクリメント演算子

JavaScript JavaScript
2020.07.05
スポンサーリンク

は、ブラウザ上で 数字が増減して矢印で動きが見えるデモ を作ります。
HTML + JavaScript で、前置・後置の違いをリアルタイムで確認できる簡単な教材です。

See the Pen A demo showing numbers fluctuating with arrows indicating movement by MONO365 -Color your days- (@monoqlo365) on CodePen. 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>インクリメント・デクリメント デモ</title>
<style>
  body { font-family: sans-serif; padding: 20px; }
  .box { margin: 20px 0; }
  .num { font-size: 2em; display: inline-block; width: 50px; text-align: center; }
  .arrow { font-size: 2em; display: inline-block; width: 50px; text-align: center; }
  button { margin: 5px; padding: 5px 10px; font-size: 1em; }
</style>
</head>
<body>

<h1>インクリメント/デクリメント デモ</h1>

<div class="box">
  <strong>後置 num++</strong><br>
  <span>値: </span><span id="postIncNum" class="num">5</span>
  <span class="arrow">→</span>
  <span id="postIncResult" class="num">?</span><br>
  <button onclick="postIncrement()">num++ を実行</button>
</div>

<div class="box">
  <strong>前置 ++num</strong><br>
  <span>値: </span><span id="preIncNum" class="num">5</span>
  <span class="arrow">→</span>
  <span id="preIncResult" class="num">?</span><br>
  <button onclick="preIncrement()">++num を実行</button>
</div>

<div class="box">
  <strong>後置 num--</strong><br>
  <span>値: </span><span id="postDecNum" class="num">3</span>
  <span class="arrow">→</span>
  <span id="postDecResult" class="num">?</span><br>
  <button onclick="postDecrement()">num-- を実行</button>
</div>

<div class="box">
  <strong>前置 --num</strong><br>
  <span>値: </span><span id="preDecNum" class="num">3</span>
  <span class="arrow">→</span>
  <span id="preDecResult" class="num">?</span><br>
  <button onclick="preDecrement()">--num を実行</button>
</div>

<script>
let postInc = 5;
let preInc = 5;
let postDec = 3;
let preDec = 3;

function postIncrement() {
  document.getElementById("postIncResult").textContent = postInc++;
  document.getElementById("postIncNum").textContent = postInc;
}

function preIncrement() {
  document.getElementById("preIncResult").textContent = ++preInc;
  document.getElementById("preIncNum").textContent = preInc;
}

function postDecrement() {
  document.getElementById("postDecResult").textContent = postDec--;
  document.getElementById("postDecNum").textContent = postDec;
}

function preDecrement() {
  document.getElementById("preDecResult").textContent = --preDec;
  document.getElementById("preDecNum").textContent = preDec;
}
</script>

</body>
</html>
HTML

✅ 使い方

  1. 上のコードを increment_demo.html として保存
  2. ブラウザで開く
  3. ボタンを押すと 前置/後置の動き が矢印付きで表示される
    • 左側：現在の変数の値
    • 右側：console.log に出力される値（返される値）
  4. 数字の増減のタイミングを視覚的に確認できる

💡 ポイント：

  • 後置 → 出力後に増減
  • 前置 → 増減後に出力
  • デクリメントも同じルールで減るだけ

See the Pen A demo showing numbers fluctuating with arrows indicating movement #2 by MONO365 -Color your days- (@monoqlo365) on CodePen.

✅ 特徴

  1. ボタンを押すと 矢印が左右に動くアニメーション
  2. 左側の数字：変数の「現在の値」
  3. 右側の数字：console.log に出力される「返される値」
  4. 前置・後置の違いを視覚的に確認できる

💡 ポイント：

  • 後置 num++ は「返す → 増える」
  • 前置 ++num は「増える → 返す」
  • デクリメントも同じルールで「減る」だけ
前へ
12345
スポンサーリンク
タイトルとURLをコピーしました