動きをつけよう

プロフィールカードの見た目はバッチリ — でも、ただそこにあるだけです。クリックしても、つついても、何も起きません。それは HTML が構造、Tailwind がスタイルだから。**動き(ビヘイビア)**は JavaScript の仕事です。

初心者に誰も教えてくれない秘密はこれです。vibe coding では JavaScript を暗記しません。何が起きてほしいかを説明すれば、AI がコードを書いてくれます。動きは、たった一文です:

「いいねボタンをクリックしたら、ハートの横の数字が1増える。」

このプロンプトを AI に渡すと、こんな小さなコードが返ってきます:

const btn = document.getElementById("like-btn");
btn.addEventListener("click", () => {
  likes = likes + 1;
  count.textContent = likes;
});

これだけです。毎回、たった3つの動き:

1. 要素を見つける(getElementById)
2. イベントを待ち受ける(addEventListener("click", ...))
3. 何かを変える(textContent、クラス、なんでも)

見つける、待ち受ける、変える。あなたが今まで使ってきたほぼすべての Web サイトのインタラクション — ドロップダウン、ダークモードの切り替え、いいねボタン — は、このパターンのバリエーションです。

このレッスンでは、カードにいいねカウンターを追加します。終わる頃には、ハートをクリックして、自分がコントロールする数字が増えていくのを見られるはず。それこそが、ページがアプリになる瞬間です。