色変わり石

「色変わり石」

ミッション：箱をクリックするたびに赤と青が交互に切り替わる装置をつくろう！

コードを写そう

HTMLタブに下のコードを貼り付けてください。

<div id="stone"></div>

CSSタブに下のコードを貼り付けてください。

#stone {
  width: 100px;
  height: 100px;
  background: red;
  cursor: pointer;
  transition: background 0.3s;
}

JSタブに下のコードを貼り付けてください。

const stone = document.querySelector('#stone');
let isRed = true;

stone.addEventListener('click', function() {
  if (isRed) {
    stone.style.background = 'blue';
    isRed = false;
  } else {
    stone.style.background = 'red';
    isRed = true;
  }
});

箱をクリックするたびに赤と青が交互に切り替わることを確認してください。

コードを読み解こう

let isRed = true：今の色を黒板に書く

let isRed = true;

「今が赤かどうか」を isRed という黒板に書いておきます。最初は赤なので true（はい、赤です）にしています。

true / false は「はい / いいえ」を表す特別な値です。0 や 'hello' のような数字や文字列とは違い、2択の状態を管理するときに使います。

if / else で色を分ける

if (isRed) {
  // 今が赤のとき → 青にする
  stone.style.background = 'blue';
  isRed = false;
} else {
  // 今が赤でないとき → 赤にする
  stone.style.background = 'red';
  isRed = true;
}

if (isRed) は「もし isRed が true なら」という意味です。

• 今が赤（isRed = true）のとき：青に変えて isRed = false に書き直す
• 今が赤でない（isRed = false）のとき：赤に変えて isRed = true に書き直す

色を変えたあと isRed の値も必ず書き直しているので、次にクリックしたときに正しく判定できます。

改造しよう

ミッション：赤と青を別の色に変えよう

stone.style.background = 'blue';  ← ここと
stone.style.background = 'red';   ← ここを変える

'blue' や 'red' の部分を好きな色の英語名に変えてみましょう。

例：'green'、'orange'、'purple'

自己チェック

• [ ] 箱をクリックするたびに色が切り替わる
• [ ] let isRed で今の色を管理している
• [ ] if / else を使っている