先生と生徒の会話形式で理解しよう

生徒

「Next.jsでuseStateやuseEffectって、いつ使うんですか？」

先生

「それらはClient Componentsという仕組みと深く関係しています。」

生徒

「Client Componentsって何ですか？難しそうです…」

先生

「大丈夫です。まずは身近な例えで、ゆっくり説明していきましょう。」

1. Next.jsとは何かを超かんたんに理解しよう

Next.jsは、WebサイトやWebアプリを作るための道具です。画面に文字を表示したり、ボタンを押したら動きが変わったりする仕組みを、まとめて作りやすくしてくれます。パソコンを触ったことがない人でも、「ページを表示する役割」と「画面を動かす役割」がある、と考えるとイメージしやすくなります。 Next.jsはこの役割を分けて考えるのが特徴です。

2. Server ComponentsとClient Componentsの違い

Next.jsにはServer ComponentsとClient Componentsがあります。Server Componentsは、画面の元になる文章や情報を先に用意する係です。一方でClient Componentsは、ブラウザの中で動いて、画面をリアルタイムに変える係です。たとえば「ボタンを押したら文字が変わる」といった動きは、Client Componentsで担当します。

3. Client Componentsで「useState」が必要な理由

useStateは、画面の状態を覚えておくための仕組みです。状態とは「今どうなっているか」という情報のことです。電気のスイッチがオンかオフかを覚えておくようなイメージです。ボタンを押した回数や、表示している文字を変えたいときにuseStateを使います。


"use client";
import { useState } from "react";

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

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

（画面に数字が表示され、ボタンを押すたびに数字が1ずつ増えます）

4. 「use client」と書く意味を理解しよう

Client Componentsでは、ファイルの一番上に「use client」と書きます。これは「この部品はブラウザ側で動かします」という合図です。書かないと、useStateやuseEffectは使えません。初心者のうちは「動きがある画面＝use clientが必要」と覚えて大丈夫です。

5. Client Componentsで「useEffect」を使う理由

useEffectは、画面が表示されたあとに何かをしたいときに使います。たとえば「ページを開いたらメッセージを表示する」「時間がたったら動かす」といった処理です。これはServer Componentsではできない、ブラウザならではの動きです。


"use client";
import { useEffect, useState } from "react";

export default function Message() {
  const [text, setText] = useState("");

  useEffect(() => {
    setText("画面が表示されました");
  }, []);

  return <p>{text}</p>;
}

（ページを開くと「画面が表示されました」という文字が表示されます）

6. useStateとuseEffectを組み合わせる考え方

useStateは「状態を覚える箱」、useEffectは「きっかけで動く仕組み」と考えると分かりやすいです。画面が表示された、ボタンが押された、といった出来事をきっかけに状態を変えます。 Client Componentsでは、この組み合わせがとてもよく使われます。


"use client";
import { useEffect, useState } from "react";

export default function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setSeconds((s) => s + 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);

  return <p>{seconds}秒経過</p>;
}

（画面に秒数が表示され、1秒ごとに数字が増えていきます）

7. Client Componentsを使う場面の具体例

入力フォーム、ボタン操作、表示の切り替えなどはClient Componentsが向いています。逆に、ただ文章を表示するだけのページはServer Componentsで十分です。無理に全部Client Componentsにする必要はありません。

8. 初心者がつまずきやすいポイント

useStateやuseEffectを使おうとしてエラーが出る場合、多くは「use client」を書き忘れています。また、Client Componentsはブラウザで動くため、動きがある処理だけに使うのが基本です。役割を意識すると、Next.jsの仕組みが理解しやすくなります。


"use client";
import { useState } from "react";

export default function Toggle() {
  const [show, setShow] = useState(true);

  return (
    <div>
      <button onClick={() => setShow(!show)}>切り替え</button>
      {show && <p>表示されています</p>}
    </div>
  );
}

（ボタンを押すと、文字の表示と非表示が切り替わります）