ボタンを押すと変わる：stateとイベントを学ぼう

たける ボタンをおすと数字が増えるやつ、作りたいです！ゲームのスコアみたいな。

りこ それが `useState`（ユーズ・ステート）。Reactが「今の数字」を覚えておいて、変わったら画面を自動で書きかえてくれるしくみだよ。

ふつうの変数だと、画面は変わらない

まず、なぜ特別なしくみが必要かを見てみましょう。

// ❌ これはうまくいかない
function Counter() {
  let count = 0   // ふつうの変数

  return (
    <div>
      <p>カウント：{count}</p>
      <button onClick={() => { count = count + 1 }}>+1</button>
    </div>
  )
}

このコードはボタンをおしても、画面の数字は変わりません。Reactは「変わったよ」と教えてもらわないと、画面を書きかえないからです。

useState を使う

そこで useState です。Reactに「この数字を覚えておいて、変わったら画面を書きかえてね」とお願いします。

import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>カウント：{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(count - 1)}>-1</button>
      <button onClick={() => setCount(0)}>リセット</button>
    </div>
  )
}

const [count, setCount] = useState(0) には、3つの意味がつまっています。

onClick={() => setCount(count + 1)} は「ボタンがおされたら、今の数字に1を足してね」という意味です。setCount で数字を変えると、画面が自動で書きかわります。

たける `setCount` を呼ぶだけで、画面が変わるんですね！自分で「書きかえて」って言わなくていいの楽です。

りこ そう。前に素のJavaScriptで `document.getElementById` を書いたのを覚えてる？あれが要らなくなる。これがReactのうれしいところ。

条件で見た目を変える

useState は数字だけでなく、「はい・いいえ」のような true / false（本当・うそ）も覚えられます。これを使うと、見た目を切りかえられます。

import { useState } from 'react'

function SecretBox() {
  const [isOpen, setIsOpen] = useState(false)  // さいしょは「閉じている」

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? '📦 とじる' : '🎁 あける'}
      </button>

      {isOpen && <p>🌟 あたり！</p>}
    </div>
  )
}

• !isOpen … 「今の反対」。開いていれば閉じ、閉じていれば開く
• {isOpen ? 'A' : 'B'} … isOpenが本当なら A、うそなら B を表示（三項演算子）
• {isOpen && <p>...</p>} … isOpenが本当のときだけ表示する

やってみよう：いいねボタン

覚えたことを使って、「いいね！」ボタンを作ってみましょう。数字（likes）と、おしたかどうか（liked）の2つを覚えます。

import { useState } from 'react'

function LikeButton() {
  const [likes, setLikes] = useState(0)
  const [liked, setLiked] = useState(false)

  const handleClick = () => {
    if (liked) {
      setLikes(likes - 1)   // もうおしてあったら、取り消す
      setLiked(false)
    } else {
      setLikes(likes + 1)   // まだなら、いいねする
      setLiked(true)
    }
  }

  return (
    <button onClick={handleClick}>
      {liked ? '❤️' : '🤍'} {likes}
    </button>
  )
}

ゲームのスコア・いいねの数・買い物カゴの中身。世の中のアプリの「変わる数字」は、ほとんどこの useState で作られています。

まとめ

• ふつうの変数を変えても画面は変わらない → useState を使う
• const [count, setCount] = useState(0) … 今の値・変える関数・さいしょの値
• setCount(...) で値を変えると、画面が自動で書きかわる
• true / false を使って、見た目を切りかえられる（? : や &&）

次の第10回からは、いよいよ「作って楽しいアプリ」。まずはおみくじ＆ガチャを作ります！