第38章：`"use client"` の意味（必要な時だけ！）🎮✨

この章のゴール🎯

Next.js（App Router）で 「ここだけブラウザで動く部品にしたい！」 を指定できるようになる🧠✨
useState / クリック処理 / window など “ブラウザ専用” が必要なときだけ "use client" を付けられるようになる🎮🪄

まず大前提：App Routerは「Server Component がデフォルト」🧊

App Routerでは、何も書かないと Server Component（サーバー側） として動きます🍵 つまり、ブラウザにJSを送らなくても描画できる のが基本なんだよね✨

でも…👇 ボタンをクリックして数を増やす！みたいな “操作” はブラウザ側の仕事🎮 そのときに必要なのが "use client" です！💡

`"use client"` ってなに？📝

✅ ひとことで

そのファイルを 「Client Component（ブラウザで動く部品）」 にする合図だよ📣🌈

✅ 超重要ルール（これだけ覚えて！）🔒

"use client" は ファイルの一番上 に書く（1行目付近！）⬆️
そのファイルは ブラウザ用JSが配信される（＝ちょっと重くなる可能性）📦
Server → Client はOK（サーバー部品からクライアント部品を呼べる） Client → Server はNG（クライアント部品からサーバー部品を import できない）🙅‍♀️

図でイメージ：Server と Client の関係🧊🎮

`"use client"` が必要なとき ✅（だいたいこれ）🎮

次のどれかが出たら「クライアントだ！」って思ってOK🙆‍♀️✨

useState を使いたい（状態を持つ）🔢
onClick / onChange みたいな イベント がある🖱️
useEffect を使う（初回だけ処理したい等）⏳
window / document / localStorage など ブラウザAPI を使う🌐
ブラウザ前提のライブラリ（UI系とか）を使う📚

`"use client"` がいらないとき ✅（付けないのが正解）🧊

ただ表示するだけの見た目コンポーネント🖼️
サーバーで fetch して結果を表示するだけ🍵
重い処理や秘密情報（DB接続など）を扱う🔐 👉 これは サーバー側に置く のが安全だよ！

実例：カウンターボタンを作ろう➕➖🎮

1) `components/Counter.tsx` を作る（クライアント部品）✨

"use client";

import { useState } from "react";

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

  return (
    <div style={{ display: "grid", gap: 8 }}>
      <p>カウント：{count} 🧮</p>
      <button onClick={() => setCount((c) => c + 1)}>
        ＋ ふやす ➕
      </button>
    </div>
  );
}

2) `app/page.tsx` で呼ぶ（サーバー部品から呼ぶのはOK）🧊➡️🎮

import { Counter } from "@/components/Counter";

export default function Page() {
  return (
    <main style={{ padding: 24 }}>
      <h1>トップページ🏠</h1>
      <p>下のボタンはブラウザ側で動くよ🎮</p>
      <Counter />
    </main>
  );
}

✅ これで「ページ全体はServer」「必要な部分だけClient」になって、軽くて強い構成になるよ〜！💪✨

もう1つ例：`localStorage` を読みたいとき📦

localStorage はブラウザにしかないので、クライアント部品が必要だよ🌐

"use client";

import { useEffect, useState } from "react";

export function NameFromStorage() {
  const [name, setName] = useState<string>("");

  useEffect(() => {
    const v = localStorage.getItem("name") ?? "";
    setName(v);
  }, []);

  return (
    <div>
      <p>保存された名前：{name || "（まだないよ）"} 🐣</p>
      <button onClick={() => localStorage.setItem("name", "はなこ")}>
        名前を保存する💾
      </button>
    </div>
  );
}

よくあるミス集（ここで詰まりやすい）🪤😵

"use client" を 途中に書いちゃう 👉 先頭に置く！（importより上に！）⬆️
なんでもかんでも "use client" を付けちゃう 👉 ページ全体がクライアントになると JSが増えやすい 📦💦 “操作が必要な部品だけ” に付けるのがコツ✨

ミニ練習🎓✨（5〜10分）

✅ 目標：「いいね👍」ボタンを作ってページに置く

components/LikeButton.tsx を作る（"use client" + useState）
app/page.tsx に <LikeButton /> を置く
押した回数を表示する（例：いいね 3 👍）

ヒント👇

count を useState(0) で持つ
onClick で setCount(count + 1)

まとめ🌸

App Routerは Server Componentがデフォルト🧊
操作・状態・ブラウザAPIが必要なら そのファイルに "use client" 🎮
必要なところだけクライアント化すると、軽くて気持ちいい✨🚀

次の章（Propsの型）に行くと、Client/Serverどっちでも安全に渡せる書き方がキレイにまとまっていくよ〜🧷😊

この章のゴール🎯​

まず大前提：App Routerは「Server Component がデフォルト」🧊​

"use client" ってなに？📝​

✅ ひとことで​

✅ 超重要ルール（これだけ覚えて！）🔒​

図でイメージ：Server と Client の関係🧊🎮​

"use client" が必要なとき ✅（だいたいこれ）🎮​

"use client" がいらないとき ✅（付けないのが正解）🧊​

実例：カウンターボタンを作ろう➕➖🎮​

1) components/Counter.tsx を作る（クライアント部品）✨​

2) app/page.tsx で呼ぶ（サーバー部品から呼ぶのはOK）🧊➡️🎮​

もう1つ例：localStorage を読みたいとき📦​

よくあるミス集（ここで詰まりやすい）🪤😵​

ミニ練習🎓✨（5〜10分）​

まとめ🌸​