LESSON 04 · 約35分

イベントとstateで、操作に応える

ボタンから状態を更新し、snapshotと更新関数の違いを確かめます。

コードを試す前に

01のVite reactテンプレート（JavaScript/JSX）を使います。特記のないApp.jsxは、そのレッスンだけで動く独立した例です。例同士を連結しないでください。

短い学習用の例です。各App.jsxは独立した例で、順に追記して一つの完成品にする形式ではありません。ファイル名、依存関係、未定義部分の前提は注記に記載します。問題内の抜粋や空欄は、そのまま実行するための完成コードではありません。

開発環境の準備を確認する →

このレッスンでわかること

イベントへ関数を渡してstateを更新できる
同じイベント内のsnapshotと関数型更新を説明できる

クリックされたら実行する

onClickにはhandleClickという関数を渡します。handleClick()と書くと描画中に呼び出してしまいます。useStateは現在の値と更新用の関数を返します。通常の変数を代入し直すだけでは、Reactに次の表示を要求できません。

stateは、その描画のsnapshot

setCountを呼んでも、そのイベントハンドラー内のcountが即座に別の値へ変わるわけではありません。countが0の描画でsetCount(count + 1)を2回呼ぶと、どちらも「1にする」という更新です。前の更新結果から計算したいときはsetCount(n => n + 1)を使います。

Hooksを呼ぶ場所と、純粋な更新

このコースで使うuseState・useEffectなどのHooksは、コンポーネントか独自Hookのトップレベルで呼びます。条件分岐やイベント内に置きません。更新関数の中では通信や別の値の変更をせず、次の状態を返します。開発時のStrict Modeが純粋さを確かめるため追加実行しても、結果が壊れない設計にします。

1増やす・2増やす・リセット

src/App.jsx

import { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  function addTwo() {
    setCount(n => n + 1);
    setCount(n => n + 1);
  }

  return (
    <main>
      <h1>学習回数</h1>
      <p aria-live="polite">{count}回</p>
      <button type="button" onClick={() => setCount(n => n + 1)}>1増やす</button>
      <button type="button" onClick={addTwo}>2増やす</button>
      <button type="button" onClick={() => setCount(0)}>リセット</button>
    </main>
  );
}

aria-liveは表示の変化を支援技術へ伝えるための指定です。保存機能はなく、再読み込みで0に戻ります。

TRY IT YOURSELF

カウンターの更新を比べる

1増やす、2増やす、リセットを順に押す
addTwoだけをsetCount(count + 1)の2回呼び出しに変え、予想を書いてから試す
関数型更新へ戻し、両者の違いを自分の言葉で説明する
0未満にならない「1減らす」を追加する

できたらOK：2増やすが常に直前の値より2増え、負数にならず、リセットが動く

QUICK CHECK

理解を確かめよう

公式資料でもう少し詳しく

ここまで読めたら、ひとつ前進。