お前だけ変われ

「お前だけ変われ」

ミッション：並んでいる星の中から、クリックした1個だけが大きくなる装置をつくろう！

コードを写そう

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

<div id="stage">
  <span class="emoji">⭐</span>
  <span class="emoji">⭐</span>
  <span class="emoji">⭐</span>
  <span class="emoji">⭐</span>
  <span class="emoji">⭐</span>
</div>

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

.emoji {
  font-size: 40px;
  cursor: pointer;
  transition: font-size 0.2s;
}

.shining {
  font-size: 70px;
}

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

const stage = document.querySelector('#stage');

stage.addEventListener('click', function(event) {
  event.target.classList.toggle('shining');
});

絵文字をクリックすると、クリックした1個だけが大きくなることを確認してください。

コードを読み解こう

event.target：「誰がクリックされたか」を受け取る

stage.addEventListener('click', function(event) {
  event.target.classList.toggle('shining');
});

「ハートを召喚せよ」では event.clientX / event.clientY でクリックした座標を受け取りました。今回は event.target でクリックされた要素そのものを受け取っています。

event.target は「クリックされた要素」を指すので、それに対して classList.toggle('shining') を実行すると、クリックされた1個だけが変化します。

イベントを stage に付けている理由

5個それぞれに addEventListener を付けることもできますが、今回は外側の stage に1つ付けています。

stage の中をクリックすると、そのクリックは stage にも伝わります。stage でまとめて受け取り、event.target で「どれがクリックされたか」を調べることで、1つのイベントで5個全員のクリックに対応できます。

改造しよう

ミッション：変身後の見た目を変えよう

.shining {
  font-size: 70px;  ← 変える
}

色や回転など、好きなスタイルに変えてみましょう。

例：

.shining {
  font-size: 70px;
  color: gold;
}

自己チェック

• [ ] クリックした1個だけが大きくなる
• [ ] 他の絵文字は変化しない
• [ ] event.target を使っている