LESSON 04 · 約25分

stateで、操作に反応する画面へ

イベントとstateをつなぎ、必要な状態だけを持たせます。

コードを試す前に

まずはコードを読んで考えましょう。Next.jsのコードを実行する演習は、05で環境を作ってから戻って試せます。02の通常のJavaScriptはブラウザーのコンソールでも実行できます。

短い学習用の例です。各例は段階ごとの独立した例であり、全コードを一つのプロジェクトへ順に上書きして完成する形式ではありません。必要なファイル・依存関係・前提条件は注記に記載しています。

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

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

useStateとイベントハンドラーを使える
propsとstateの役割の違いを説明できる

stateは画面が覚える値

propsが外からの入力なら、stateはコンポーネントが保持する状態です。更新関数を呼ぶとReactが表示を計算し直します。普通の変数を代入し直すだけでは、Reactに更新を知らせられません。

必要最小限の状態を置く

完了した件数のように既存データから計算できる値までstateにすると、値の食い違いを生みます。複数の部品が同じ状態を使うときは、近い共通の親に置いてpropsで渡すところから始めましょう。

操作と副作用を分ける

クリックの処理はイベントハンドラーへ。useEffectは外部システムとの同期が必要なときに検討します。計算した表示値をstateへコピーするために、毎回Effectを足す必要はありません。App Routerでstateを使う部品にはClient境界が必要です。

読了ボタンを作る

app/ui/read-button.jsx

'use client'

import { useState } from 'react'

export default function ReadButton() {
  const [isRead, setIsRead] = useState(false)

  return (
    <button
      type="button"
      aria-pressed={isRead}
      onClick={() => setIsRead((value) => !value)}
    >
      {isRead ? '読了しました' : '読了にする'}
    </button>
  )
}

このstateはブラウザーの再読み込みをまたいで保存されません。保存は別の設計です。

TRY IT YOURSELF

カウンターに変更する

stateの初期値を0にする
ボタンで1増えるようにする
0へ戻すボタンを追加する

できたらOK：クリック時に表示が変わり、再読み込みすると初期値に戻る

QUICK CHECK

理解を確かめよう

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

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