コンテンツにスキップ

Chapter 7: State

Props だけでは「表示内容を外から渡す」ことしかできません。ユーザーの操作によって変化する値を扱うためには State（ステート） が必要です。この章では useState フックを使い，ボタンを押すとカウントが増えるシンプルな例を通して State の基本を身につけます。

まずはボタンを配置する

Chapter 6 の HomePage にボタンを追加してみましょう。

index.html
function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];

  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
      <button>Like</button>
    </div>
  );
}

イベントを受け取る

React では onClick などのイベント名をキャメルケースで指定し，ハンドラ関数を渡します。

index.html
function HomePage() {
  function handleClick() {
    console.log('increment like count');
  }

  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Like</button>
    </div>
  );
}

ブラウザでボタンを押すと，コンソールにログが出力されます。次は表示を変化させてみましょう。

useState で状態を持つ

React の Hooks のひとつである useState を使うと，コンポーネント内に値を保持できます。

index.html
function HomePage() {
  const [likes, setLikes] = React.useState(0);
  // ...
}
  • 1つ目の値 likes は現在の状態
  • 2つ目の関数 setLikes は状態を更新するための関数

初期値として 0 を渡しているので，初回レンダー時は likes が 0 になります。

UI に状態を反映させる

状態は JSX の中で {} を使って参照できます。

index.html
function HomePage() {
  const [likes, setLikes] = React.useState(0);

  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Likes ({likes})</button>
    </div>
  );
}

続いて，ボタンをクリックしたときに setLikes で値を更新します。

index.html
function HomePage() {
  const [likes, setLikes] = React.useState(0);

  function handleClick() {
    setLikes(likes + 1);
  }

  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Likes ({likes})</button>
    </div>
  );
}

これでボタンを押すたびに likes が増え，UI に反映されるようになりました。

Tip

setLikes へ新しい値を渡すと React は再レンダーを行い，UI が最新の値に更新されます。複数回まとめて呼び出される場合でも，React が最適化してくれます。

Props と State の違いを整理する

種類 どこで定義するか 誰が変更するか 使いどころ
Props 親コンポーネント 親コンポーネント データの受け渡し
State 当のコンポーネント 当のコンポーネント ユーザー操作で変化する値

State を子コンポーネントに渡したいときは Props として渡します（「State のリフトアップ」と呼ばれるテクニックにつながります）。

学びを深めるためのリンク

これで React の三本柱（Component / Props / State）が揃いました。次の章では，これらの知識を Next.js へ橋渡ししていきます。