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

生徒

「Next.jsって、ボタンを押したり入力したりできますか？」

先生

「できます。そのために使うのがClient Componentsです。」

生徒

「Server Componentsとは何が違うんですか？」

先生

「画面の操作やイベントを扱えるのがClient Componentsです。具体例を見ながら説明しますね。」

1. Next.js Client Componentsとは何か

Next.jsのClient Componentsとは、ブラウザ上で動作し、ユーザーの操作に反応できるコンポーネントです。クリック、入力、マウス操作など、人が画面で行う行動をプログラムで受け取れます。たとえるなら、Server Componentsは「印刷されたチラシ」、Client Componentsは「リモコン付きのおもちゃ」です。操作できるかどうかが大きな違いになります。

Client Componentsを使うときは、ファイルの先頭に"use client"と書く必要があります。これが「この部品は操作できるよ」という目印になります。

2. イベントハンドリングとは

イベントハンドリングとは、「何かが起きたときに処理をすること」です。ボタンを押した、文字を入力した、チェックを入れた、これらすべてがイベントです。 Next.jsではReactの仕組みを使って、イベントを簡単に扱えます。難しく考えず、「操作をきっかけに動く仕組み」と覚えてください。

3. ボタンのクリックイベントを扱う

もっとも基本的なのが、ボタンを押したときの処理です。ここでは、文字が変わるシンプルな例を見てみます。


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

export default function ClickSample() {
  const [text, setText] = useState("まだ押されていません");

  return (
    <div>
      <p>{text}</p>
      <button onClick={() => setText("ボタンが押されました")}>
        押してみる
      </button>
    </div>
  );
}

（画面に文字が表示され、ボタンを押すと表示内容が変わります）

4. 入力フォームのイベントを扱う

次は、文字を入力したときのイベントです。フォームは、名前入力や検索など、よく使われる場面です。入力内容をそのまま画面に表示してみましょう。


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

export default function InputSample() {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <p>入力された名前：{name}</p>
    </div>
  );
}

（文字を入力すると、その内容がすぐ下に表示されます）

5. チェックボックスで状態を切り替える

チェックボックスは、オンとオフを切り替える操作です。状態が変わるたびに表示を切り替えることができます。これは設定画面などでよく使われます。


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

export default function CheckSample() {
  const [checked, setChecked] = useState(false);

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={checked}
          onChange={() => setChecked(!checked)}
        />
        同意する
      </label>
      <p>{checked ? "同意済み" : "未同意"}</p>
    </div>
  );
}

（チェックを入れると表示が切り替わります）

6. Client Componentsを使うべき場面

Client Componentsは便利ですが、何でも使えばよいわけではありません。画面に表示するだけならServer Componentsで十分です。クリック、入力、切り替えなど、人の操作が必要なときにClient Componentsを使います。役割を分けることで、Next.jsの性能を活かせます。

7. Server Componentsとの役割の違い

Server Componentsは、データを取得して表示するのが得意です。 Client Componentsは、画面操作と状態管理が得意です。たとえるなら、Server Componentsは料理人、Client Componentsは接客係です。それぞれの役割を理解することで、無理のない構成になります。