1. Next.jsのClient Componentsとは何か

Next.jsのClient Componentsとは、ブラウザ側で動く部品のことです。ブラウザとは、パソコンやスマートフォンで見る画面そのものだと考えてください。ボタンを押した瞬間に画面が変わる、文字が動く、色が変わる、といった動きは、このClient Componentsが担当します。

アニメーションとは「画面の変化をなめらかに見せる動き」のことです。パラパラ漫画のように、少しずつ状態を変えることで動いているように見せています。

2. アニメーションにClient Componentsが必要な理由

Next.jsにはServer ComponentsとClient Componentsがあります。 Server Componentsは、画面を作る設計図をサーバー側で準備します。そのため、ユーザーが操作した瞬間の変化には向いていません。

一方でClient Componentsは、ユーザーの操作をその場で受け取り、すぐに画面を変えられます。アニメーションは「今クリックされた」「今スクロールされた」という情報が必要なので、Client Componentsが必須になります。

3. useStateを使った基本的なアニメーション例


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

export default function FadeText() {
  const [visible, setVisible] = useState(true);

  return (
    <div>
      <button onClick={() => setVisible(!visible)}>
        表示を切り替える
      </button>
      <p style={{ opacity: visible ? 1 : 0 }}>
        フェードする文字
      </p>
    </div>
  );
}

ボタンを押すと、文字が表示されたり消えたりして、動きがあるように見えます。

useStateとは「今の状態を覚えておく箱」です。この箱の中身が変わると、画面も一緒に変わります。

4. ボタン操作で動くアニメーションの仕組み


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

export default function MoveBox() {
  const [x, setX] = useState(0);

  return (
    <div>
      <button onClick={() => setX(x + 20)}>
        右に動かす
      </button>
      <div style={{ transform: `translateX(${x}px)` }}>
        ■
      </div>
    </div>
  );
}

ボタンを押すたびに、四角が右へ少しずつ移動します。

transformは「位置を変える命令」です。 Client Componentsだからこそ、クリックのたびに動きを更新できます。

5. スクロールに反応するアニメーション


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

export default function ScrollMessage() {
  const [show, setShow] = useState(false);

  useEffect(() => {
    const onScroll = () => {
      if (window.scrollY > 100) {
        setShow(true);
      }
    };
    window.addEventListener("scroll", onScroll);
  }, []);

  return show ? <p>スクロールされました</p> : null;
}

画面を下にスクロールすると、文字が表示されます。

useEffectは「ある動作が起きたときに処理する仕組み」です。スクロールのような動きはClient Componentsでしか扱えません。