全員変身

「全員変身」

ミッション：ボタンを1回押すだけで、並んでいる絵文字が全員いっきに大きくなる装置をつくろう！

コードを写そう

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

html

<button id="btn">全員変身！</button>
<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タブに下のコードを貼り付けてください。

css

.emoji {
  font-size: 40px;
  transition: font-size 0.3s;
}

.transformed {
  font-size: 70px;
}

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

const btn = document.querySelector('#btn');
const emojis = document.querySelectorAll('.emoji');

btn.addEventListener('click', function() {
  emojis.forEach(function(emoji) {
    emoji.classList.toggle('transformed');
  });
});

ボタンを押すと全員が大きくなり、もう一度押すと元に戻ることを確認してください。

コードを読み解こう

`querySelectorAll`：まとめて複数の要素を取得する

const emojis = document.querySelectorAll('.emoji');

querySelector は1個だけ取得しますが、querySelectorAll は同じクラス名が付いた要素を全部まとめて取得します。.emoji というクラスが付いた要素が5個あるので、5個まとめて取得できます。

`forEach`：取得した全員に同じ操作をする

emojis.forEach(function(emoji) {
  emoji.classList.toggle('transformed');
});

forEach は「全員に対して同じ処理をする」命令です。emojis の中にいる一人ひとりを順番に emoji と呼びながら、classList.toggle('transformed') を実行します。

for 文とやっていることは似ていますが、forEach は「取得した要素のリストを1つずつ処理する」ときに使います。

改造しよう

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

.transformed の中身を変えると変身後の見た目を自由に変えられます。

css

.transformed {
  font-size: 70px;  ← サイズを変える
}

例えば色を加えてみましょう。.transformed の中に追加してください。

css

color: orange;

自己チェック

[ ] ボタンを押すと全員の絵文字が大きくなる
[ ] もう一度押すと全員元に戻る
[ ] querySelectorAll を使っている
[ ] forEach を使っている