ヒント集

もし画面の文字も「ダークX」に変わった

見ているコードは正しい。文字を元に戻して確認②へ。

もし画面の文字が変わらない

別のファイルを見ている。同じ名前の部品が2つある（components/ModeToggle.tsxとcomponents/header/mode-toggle.tsxなど）か、使われていない古い部品。ヘッダーのファイルの import 行の部品名を Ctrl+クリックして、実際に読み込まれている方を開き直す。

もしどこを変えても画面が全く変わらない

npm run devが止まっている、または別のフォルダのプロジェクトを開いている。VS Code のターミナルを見る。動いていればブラウザで Ctrl+Shift+R（キャッシュを消して読み直す）。

もしonClick={handleToggle} のように関数名が書いてある

飛んだ先の関数の1行目に足す。

console.log("押された");

もしonClick={() => setTheme(…)} のように中身が直接書いてある

{ } で囲んで1行足す。

onClick={() => { console.log("押された"); setTheme(今の中身); }}

もし押すと Console に「押された」と出る

クリックは届いている。原因は関数の中身かその先（12 なら確認③〜⑤、15 なら確認④、18 なら確認④〜⑤、06 なら確認③）。このページの確認④も見る。

もし押しても何も出ない

クリックが関数に届いていない。確認③へ。

もしボタンを押す前（ページを開いただけ）で「押された」が出る

onClick={関数()} の形になっている。確認③の1つ目。

もしConsole に赤いエラーがたくさん出ている

確認③の「赤いエラー」の行。

もしonClick={toggle()} のように、関数名のあとに () が付いている

() を付けると「画面を描いた瞬間に1回だけ実行して、その結果を onClick に入れる」意味になる。押したときには何も起きない。

onClick={() => toggle()}

もしonclick（小文字）や onPress になっている

React は onClick（C が大文字）だけを見る。小文字だと何も起きない（Console に黄色い警告が出ることがある）。

もし<Button（大文字）で、Button が自作の部品

F12 で Button の定義を開く。受け取った onClick を中の <button> に渡していないと、何も起きない。

export function Button({ children, ...props }: React.ComponentProps<"button">) {
  return <button {...props}>{children}</button>;
}

もしボタンに disabled が付いている／className に pointer-events-none がある

押せない状態。F12 → Elements でボタンのタグを見て、disabled が付いていないか確かめる。

もしif (!mounted) return <Button disabled … /> のような行がある（ダークモードでよくある形）

画面が表示されたら mounted を true にする useEffect が無い／間違っていると、ずっと「押せない仮のボタン」のまま。

const [mounted, setMounted] = useState(false);
useEffect(() => {
  setMounted(true);
}, []);

もし透明な要素がボタンの上にかぶさっている

F12 の左上の矢印アイコンを押してから、画面のボタンをクリック。Elements で選ばれたのが button ではなく div などなら、それがかぶさっている。

className="relative z-50 今のclassName"

もしこのボタンだけでなく、ページのほかのボタンも全部反応しない＋ Console に赤いエラー

エラーで React が画面を動かせていない。赤いエラーの1行目を読む。「Hydration failed」「did not match」なら <html> に suppressHydrationWarning を足す／描画中に Date.now()・Math.random()・localStorage を使っていないか見る。「… is not defined」ならその名前の import が足りない。

もしボタンが <form> の中にあり、type が書いていない

form の中のボタンは押すと送信＝ページが読み直され、一瞬で元に戻るので「反応しない」ように見える。ボタンに type="button" を足す。

もしボタンが <Link> や <a> の中にある

ページ移動が先に起きる。ボタンを Link の外に出す。

もしボタンが、並び替え（19）でドラッグできるカードの中にある

ドラッグの仕組み（dnd-kit の {...listeners} など）がカード全体に付いていると、押した瞬間を「ドラッグ開始」として取られ、中のボタンのクリックが届かない。listeners をつかむボタン（ハンドル）だけに付ける（19 の確認③）。

もし「Event handlers cannot be passed to Client Component props」というエラー

ボタンがあるファイルの1行目に "use client"; が無い。1行目に足す（新しいファイルを作るのではない）。

もしquestions.push(…)・.splice(…)・q.title = … のように、今の配列やオブジェクトを直接変えてから set している

React は「新しい配列が来たら描き直す」。同じ配列の中身を変えただけだと、変わっていないと判断して描き直さない。コピーしてから変える（18 の確認④）。

もしquestions.filter(…) を書いただけで、set していない

filter は新しい配列を作るだけで、元の配列は変わらない。setQuestions(questions.filter(…)) のように set に渡す。

もしset した直後の console.log で、古い値が出る

正常。set は「次に描き直すときに新しい値にする」予約なので、同じ関数の中ではまだ古い値が見える。画面が変わっていれば問題ない。

もしset しているのに画面が変わらない

画面が map している配列と、書き換えている配列が別のもの。map の前の名前（fields.map か questions.map か）と、set している名前を見比べる。

もしボタンに onClick が無い／中身が空・console.log だけ

並び順を覚える箱を作ってつなぐ（無ければ）。

const [sort, setSort] = useState("updated");

onClick={() => setSort("updated")}

もしonClick={() => setSort("updated")} のように、すでに state を変えている

ボタンはつながっている。変えている state の名前と値（例：sortKey と "updatedAt"）をメモして確認②へ。値だけ変わって、並べ替えの計算か map が無いことが多い。

もしonClick={handleSort} など関数に飛び、その中で surveys.sort(…) して setSurveys(surveys) している

sort は元の配列を並べ替えて同じ配列を返すので、同じものを set しても React は描き直さない。コピーしてから並べる：setSurveys([...surveys].sort(…))。比べ方は確認③の2行目を使う。

もしボタンが <Link href="?sort=updated"> や router.push("?sort=…")

URL で並び順を渡す作り。確認④（page.tsx 版）へ。

もし並び替えが <select onChange=…> のプルダウン

onChange={(e) => setSort(e.target.value)} の形か見る。option の value（"updated" など）をメモ。

もしonClick はあるのに押しても何も起きない（console.log も出ない）

共通診断 へ。

もしupdatedAt: Date・updatedAt: "2026-09-30T12:34:56.000Z"（Prisma や API から来たもの）

確認③のコードのまま使える。API（fetch）から来ると Date が文字になるが、toTime がどちらも数字にする。

もし名前が updated_at・modifiedAt・lastUpdated・updateDate など

確認③の updatedAt をその名前に変える。

もし"2026/09/30 12:34" のようなスラッシュの文字

確認③の toTime がそのまま読む。

もし"2026年9月30日" のような日本語の文字

new Date() では読めないので、toTime の7〜8行目で数字の部分を抽出して日付にする。

もし1727650000（10桁＝秒）や 1727650000000（13桁＝ミリ秒）の数字

toTime の3行目が秒をミリ秒にそろえる。

もし{ seconds: …, nanoseconds: … }（Firebase / Firestore）

toTime の4行目（toDate()）で読む。toDate が無いただのオブジェクトなら v.seconds * 1000 に変える。

もしupdatedAt が null のアンケートがある

一度も更新していないもの。確認③の2行目の ?? createdAt で作成日時を代わりに使う。

もしデータに更新日時が無い（console.log に出てこない）

画面に届いていない。確認⑤へ（API や DB の取り出しに足す）。

もしどの場合も（基本の形）

日付を数字にする関数と、並べ替えた配列を作る。

function toTime(v: any): number {
  if (!v) return 0;
  if (typeof v === "number") return v < 1e12 ? v * 1000 : v;
  if (typeof v.toDate === "function") return v.toDate().getTime();
  const t = new Date(v).getTime();
  if (!isNaN(t)) return t;
  const m = String(v).match(/(\d{4})\D+(\d{1,2})\D+(\d{1,2})(?:\D+(\d{1,2})\D+(\d{1,2}))?/);
  return m ? new Date(+m[1], +m[2] - 1, +m[3], +(m[4] ?? 0), +(m[5] ?? 0)).getTime() : 0;
}

const sorted = [...surveys].sort((a, b) => {
  const diff = toTime(a.updatedAt ?? a.createdAt) - toTime(b.updatedAt ?? b.createdAt);
  return sort === "old" ? diff : -diff;
});

{sorted.map((s) => (

もしボタンが「更新順」1つだけ（押したら更新順、押さなければ元の順）

3行目の三項演算子を「更新順のときだけ並べる」形にする。

const sorted = sort === "updated"
  ? [...surveys].sort((a, b) => toTime(b.updatedAt ?? b.createdAt) - toTime(a.updatedAt ?? a.createdAt))
  : surveys;

もしボタンが「作成順」「更新順」「タイトル順」など複数

値ごとに比べ方を変える。

const sorted = [...surveys].sort((a, b) => {
  if (sort === "title") return String(a.title).localeCompare(String(b.title), "ja");
  if (sort === "created") return toTime(b.createdAt) - toTime(a.createdAt);
  return toTime(b.updatedAt ?? b.createdAt) - toTime(a.updatedAt ?? a.createdAt);
});

もし「↑↓」1つのボタンで、押すたびに新しい順／古い順が入れ替わる

state を true / false にする。

const [asc, setAsc] = useState(false);

もし今のコードに a.updatedAt.localeCompare(…) がある

Date 型には localeCompare が無い（エラーの原因）。基本の形の toTime の引き算に置き換える。

もし並びが合っているか目で確かめたい（任意）

一覧に更新日時を表示する。

<p className="text-xs text-gray-500">更新：{new Date(toTime(s.updatedAt ?? s.createdAt)).toLocaleString("ja-JP")}</p>

もしNext.js 15 以上（package.json の next が 15〜）

export default async function Page({ searchParams }: { searchParams: Promise<{ sort?: string }> }) {
  const { sort = "updated" } = await searchParams;

const sorted = [...surveys].sort((a, b) => {
  const diff = toTime(a.updatedAt ?? a.createdAt) - toTime(b.updatedAt ?? b.createdAt);
  return sort === "old" ? diff : -diff;
});

もしNext.js 14 以下

1行目を { searchParams }: { searchParams: { sort?: string } }、2行目を const sort = searchParams.sort ?? "updated"; にする（Promise と await を外す）。

もし部品（<SurveyList surveys={surveys} />）に渡している

並べた配列を渡す：<SurveyList surveys={sorted} />。部品の中は変えなくてよい。

もしPrisma（prisma.survey.findMany(）で取っている

JS で並べる代わりに DB に並べさせてもよい：findMany の { } の中に orderBy: { updatedAt: sort === "old" ? "asc" : "desc" },（asc＝古い順、desc＝新しい順）。

もしSupabase（.from("surveys").select(）で取っている

.order("updated_at", { ascending: sort === "old" }) を select の後ろにつなげる。

もしschema に updatedAt DateTime @updatedAt がある＋ findMany に select: { … } があり updatedAt が入っていない

取り出していないだけ。select に足す。

updatedAt: true,

もしAPI（/api/surveys）が返すデータに更新日時が無い

API のファイルで、返しているオブジェクトを作っている所に updatedAt: s.updatedAt を足す。

もしschema に updatedAt が無い

DB の形を変える作業になる。勝手に変えず、先に社員の方に確認する。OK なら updatedAt DateTime @updatedAt を足して npx prisma migrate dev。

もし設問を編集しても更新日時が変わらない

@updatedAt はその行（アンケート本体）を update したときだけ変わる。設問だけ保存すると本体の日時は古いまま。設問を保存する処理の最後に、本体も更新する。

await prisma.survey.update({ where: { id: surveyId }, data: { updatedAt: new Date() } });

もしonClick={handleSave} → 同じファイルの const handleSave = … か function handleSave に飛ぶ

一番よくある形。このファイルで確認②へ。チェックの関数（確認③）もこのファイルに書く。

もしonClick={() => save(questions)} のように、関数に設問の配列を渡している

飛んだ先の関数は、配列を引数で受け取っている（例：function save(list)）。チェックでは引数の名前（list）を使う。

もし飛んだ先が別のファイル（lib/api.ts・actions.ts など）で、1行目が "use server"

そのファイルはサーバーで動くので alert が使えない（「alert is not defined」になる）。チェックはボタンがあるファイルに書き、呼ぶ前に止める（確認④の最後の形）。

もし飛んだ先が別のファイルで、"use server" は無い（ただの関数）

そのファイルの関数の先頭にチェックを書いてもよい。ボタンのファイルに書いて呼ぶ前に止めてもよい。迷ったらボタンのファイル。

もし飛んだ先が store フォルダ（Zustand の create( の中の save: など）

store の中でも alert は使える。確認④の「Zustand」の形。

もしボタンに onClick が無く、<form onSubmit={handleSubmit(onSubmit)} がある（react-hook-form）

保存の関数は onSubmit。引数 data に入力内容が入っている。確認④の「react-hook-form」の形。

もし<form action={createSurvey}（Server Action）

送信の前に止める。確認④の「form action」の形。

もし{ id, title, type: "radio", choices: [{ id, label }] } のような形

確認③のコードのまま使える。

もし質問文の項目名が title ではない（text・question・label など）

確認③の5行目の q.title をその名前に変える（例：q.text）。

もし種類の値が "radio" ではない（"single"・"multiple"・"select"・"choice" など）

確認③の8行目の "radio" "checkbox" を、自分のデータに出てきた綴りにそろえる（大文字小文字も同じに）。

もし種類が定数で書かれている（QuestionType.Radio・QUESTION_TYPE.RADIO など）

文字の代わりにその定数を書く：q.type === QuestionType.Radio。定数の import が必要（ほかのファイルの import 行をコピー）。

もし種類の項目名が type ではない（kind・questionType など）

q.type をその名前に変える。

もし種類の項目が無い（選択肢の配列があるかどうかで決まっている）

確認③の「種類の項目が無い」の形。

もし選択肢の項目名が choices ではない（options・items・answers など）

確認③の9行目の q.choices をその名前に変える。

もし選択肢が ["はい", "いいえ"] のようにただの文字の並び

確認③の「選択肢がただの文字」の形。

もし選択肢が { id, text } や { value }

確認③の14行目の c.label を c.text や c.value に変える。

もしどの場合も（基本の形）

質問文の空欄と、ラジオ（とチェックボックス）の選択肢の空欄・0個を調べる。

function validate(questions: any[]) {
  const errors: string[] = [];
  questions.forEach((q, i) => {
    const no = i + 1;
    if (String(q.title ?? "").trim() === "") {
      errors.push(`Q${no}：質問文が空欄です`);
    }
    if (q.type === "radio" || q.type === "checkbox") {
      const choices = q.choices ?? [];
      if (choices.length === 0) {
        errors.push(`Q${no}：選択肢がありません`);
      }
      choices.forEach((c, j) => {
        if (String(c.label ?? "").trim() === "") {
          errors.push(`Q${no}：選択肢${j + 1}が空欄です`);
        }
      });
    }
  });
  if (errors.length > 0) {
    alert(errors.join("\n"));
    return false;
  }
  return true;
}

もし選択肢がただの文字の並び（["はい", "いいえ"]）

14行目だけ変える。

        if (String(c ?? "").trim() === "") {

もし種類の項目が無い（選択肢の配列を持っているかで判断）

8行目を変える。

    if (Array.isArray(q.choices)) {

もし選択肢は2つ以上ないとダメにしたい

10〜12行目を変える。

      if (choices.length < 2) {
        errors.push(`Q${no}：選択肢を2つ以上入れてください`);
      }

もし同じ選択肢が2回入っていないかも調べたい（任意）

17行目（選択肢の forEach を閉じた行）の下に足す。

      const labels = choices.map((c) => String(c.label ?? "").trim());
      if (new Set(labels).size !== labels.length) {
        errors.push(`Q${no}：同じ選択肢があります`);
      }

もしtoast（sonner・react-hot-toast）がすでに使われている

21行目の alert(…) を toast.error(errors.join("\n")) に変えてもよい。toast の import はほかのファイルからコピー。課題が「アラート」なら alert のままが確実。

もしforEach ではなく短く書きたい（参考）

some は「1つでも当てはまれば true」。ただし何番がダメか出せないので、この課題では forEach 版をすすめる。

const hasBlank = questions.some((q) =>
  (q.choices ?? []).some((c) => String(c.label ?? "").trim() === "")
);

もしuseState で持っていて、const handleSave = async () => { のような関数

1行足すだけ。

if (!validate(questions)) return;

もし関数が配列を引数で受け取っている（function save(list) {）

questions を引数の名前にする。

if (!validate(list)) return;

もしreact-hook-form（const onSubmit = (data) => {）

入力内容は data の中。

if (!validate(data.questions)) return;

もしZustand の store の中（save: async () => {）

store の中身は get() で取り出す。確認③の関数は store のファイルの create( より上に貼る。

const { questions } = get();
if (!validate(questions)) return;

もし<form action={createSurvey}（Server Action）

送信の前（ブラウザ側）で止める。form のタグに onSubmit を足す。

<form action={createSurvey} onSubmit={(e) => { if (!validate(questions)) e.preventDefault(); }}>

もし保存の関数には触りたくない／関数がサーバー側（"use server"）

ボタンの onClick で、呼ぶ前に止める。

onClick={() => { if (validate(questions)) handleSave(); }}

もしどの場合も

保存を押して失敗した後だけ赤くする。

const [showErr, setShowErr] = useState(false);

if (!validate(questions)) { setShowErr(true); return; }

className={`今のclassName ${showErr && String(c.label ?? "").trim() === "" ? "border-red-500" : ""}`}

もしページ全体が画面の端にくっつく・広がりすぎる

ページの一番外側のタグ。

<main className="mx-auto w-full max-w-5xl px-4 py-6 sm:px-6">

もし横に並んだものが、スマホで押しつぶされる

スマホは縦、広い画面で横。

<div className="flex flex-col gap-4 md:flex-row">

もしカードが何列も並んでいる

列の数を画面幅で変える。

<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">

もし幅が固定（w-[600px] など）ではみ出す

<div className="w-full max-w-[600px]">

もしボタンが横にはみ出す

<div className="flex flex-wrap gap-2">
  <button className="w-full sm:w-auto">

もし長いタイトルや URL がはみ出す

<p className="min-w-0 break-words">

もし見出しがスマホで大きすぎる

<h1 className="text-xl font-bold sm:text-3xl">

もし表がはみ出す

<div className="overflow-x-auto">
  <table>…</table>
</div>

もし画像がはみ出す

<img className="h-auto max-w-full" src={imageUrl} alt="画像" />

もしスマホだけ／PCだけ表示したいものがある

<div className="hidden md:block">PCだけ</div>
<div className="md:hidden">スマホだけ</div>

もしリンクが少ない（3つくらい）

最短：折り返すだけ。

<nav className="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm">

もしリンクが多い・ハンバーガーメニューにしたい

ボタンで開閉する。ヘッダーのファイルに "use client" が無ければ1行目に足す（新しいファイルを作るのではない）。

const [open, setOpen] = useState(false);

<button onClick={() => setOpen(!open)} className="md:hidden" aria-label="メニュー">☰</button>
<nav className={`${open ? "flex" : "hidden"} flex-col gap-2 md:flex md:flex-row`}>
  今のリンク
</nav>

もし入力欄

<input className="w-full rounded border p-2 text-base" />

もし押す場所が小さい

<button className="min-h-11 px-4">

もしfrom "next-themes"

next-themes（ライブラリ）の useTheme。確認②へ。

もしfrom "@/components/theme-provider"・"@/hooks/use-theme"・"@/context/ThemeContext" など、自分のプロジェクトの場所

会社が自作した useTheme の可能性が高い。そのファイルを F12 で開き、中に from "next-themes" があるか見る。あれば next-themes を渡しているだけなので確認②へ。無く、createContext や useState で自作していれば確認⑤へ。

もしimport が2つある／別のファイルでは別の場所から import している

ボタンの useTheme と、layout の ThemeProvider が同じ仕組みでないと届かない。ThemeProvider の import（確認③）と見比べる。片方が next-themes、片方が自作だと動かない。

もしどの場合も

useTheme から取れるものを全部出してみる。

const { theme, resolvedTheme, themes, forcedTheme } = useTheme();
console.log("テーマ", { theme, resolvedTheme, themes, forcedTheme });

console.log("押された");

もし押しても「押された」が出ない

クリックが届いていない。共通診断の確認③ を上から見る。ダークモードで多いのは：onClick={setTheme("dark")}（() => が無い）、mounted の仮のボタンが disabled のまま、自作 Button が onClick を渡していない、の3つ。

もし「押された」は出る。ページを開いたときの表示で theme: undefined・themes: []

ThemeProvider の外で useTheme を使っている。next-themes は ThemeProvider が無いと、setTheme が「何もしない関数」になる。エラーも出ないので「関数は正しいのに動かない」ように見える。確認③へ。

もし「押された」は出る。forcedTheme: "light" のように値がある

テーマが固定されていて、setTheme しても変わらない。確認③の forcedTheme の行。

もし「押された」は出る。押すたびに theme が light / dark に変わるのに、html の class は変わらない

テーマの値は変わっている。html に書き込む設定の問題。F12 → Elements の <html …> を全部見る。data-theme="dark" や style="color-scheme: dark" が変わっていれば確認③の attribute の行。何も変わらなければ ThemeProvider が2つある（確認③）。

もし「押された」は出る。theme: "system" のまま／1回目は何も起きず2回目から変わる

切り替えの式の問題。確認④へ。

もし「押された」は出るが、console.log の「テーマ」の行が出ない

console.log を書いた部品と、ボタンの部品が別。useTheme を使っている部品に書き直す。

もしどこにも <ThemeProvider が無い

layout.tsx で body の中身を囲む（next-themes の ThemeProvider はそのまま layout で使える）。

import { ThemeProvider } from "next-themes";

<html lang="ja" suppressHydrationWarning>
  <body 今の属性>
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      今の body の中身（ヘッダーも children も全部）
    </ThemeProvider>
  </body>
</html>

もし「createContext only works in Client Components」などのエラーが出た（上の形で）

古い next-themes だと layout で直接使えない。components/theme-provider.tsx を作り、1行目に "use client";、2行目以降で next-themes の ThemeProvider を包んで export する（shadcn/ui のダークモードのページと同じ形）。ここだけは新しいファイル。

もし<Providers> や <AppProvider> の中にある（providers.tsx）

layout.tsx で <Providers> が本当に使われているか確認。import だけあってタグで囲んでいないと効かない。

もしThemeProvider はあるが、ヘッダーのタグがその外（上や横）にある

ヘッダーを ThemeProvider の内側に移す。ヘッダーの外では useTheme が効かない。

もしヘッダーが別の layout.tsx（app/(main)/layout.tsx など）にあり、ThemeProvider は app/layout.tsx

一番外の app/layout.tsx が全部を囲んでいればOK。逆（ThemeProvider が内側の layout だけ）だと、外側の layout にあるヘッダーには効かない。

もしattribute が無い、または attribute="data-theme"

html に付くのが class ではなく data-theme になる。CSS が .dark を見ているなら attribute="class" にする。

<ThemeProvider attribute="class" defaultTheme="system" enableSystem>

もしforcedTheme="light"（や "dark"）が付いている

テーマ固定の指定。消す。ページごとに forcedTheme を渡している作りもあるので、全体検索 forcedTheme。

もしthemes={["light", "red", …]} に "dark" が入っていない

使えるテーマの一覧に dark が無いと切り替えられない。"dark" を足す。

もしvalue={{ dark: "…" }} がある

dark のときに付ける class の名前を変えている。その名前が CSS と同じか見る（CSS が .dark なら value は消す）。

もしThemeProvider が2か所にある（layout と providers の両方など）

内側のほうが優先され、外側の設定が効かない。1つにする（中身が同じなら内側を消す）。

もしimport { ThemeProvider } from "@/…" で、中が next-themes ではない自作

確認⑤へ。

もしsetTheme(theme === "dark" ? "light" : "dark")（theme を使っている）

最初の theme は "system"。端末がダークだと、1回目に "dark" を選んでも見た目が変わらない。resolvedTheme（実際の色）で判定する。

setTheme(resolvedTheme === "dark" ? "light" : "dark");

もしsetTheme(!isDark)・setTheme(true) のように true / false を渡している

setTheme は文字（"light"・"dark"・"system"）しか受け取らない。上の形に変える。

もしsetTheme("Dark") のように大文字

html に class="Dark" が付き、CSS の .dark と合わない。小文字にする。

もし関数の中で const [isDark, setIsDark] = useState(false) の set だけしていて、setTheme を呼んでいない

部品の中の state が変わるだけで、html には何も起きない（アイコンだけ変わるのはこれ）。setTheme を呼ぶ行を足す。

setTheme(isDark ? "light" : "dark");

もしDropdownMenu で「ライト」「ダーク」を選ぶ形

項目ごとに onClick を付ける（onSelect でもよい）。

<DropdownMenuItem onClick={() => setTheme("light")}>ライト</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("dark")}>ダーク</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("system")}>端末に合わせる</DropdownMenuItem>

もしcreateContext({ theme: "light", setTheme: () => {} }) のように、中身が空の関数で始まっている

Provider で囲まれていないと、この空の関数が使われ、押しても何も起きない。同じファイルの export function ThemeProvider（または ThemeContext.Provider を返す部品）で、layout の body の中身を囲む（確認③の1つ目と同じ位置）。

もしProvider で囲まれている。state（theme）は変わるが、html に付ける処理が無い

Provider の部品の中に、theme が変わったら html の class を変える処理を足す。

useEffect(() => {
  document.documentElement.classList.toggle("dark", theme === "dark");
}, [theme]);

もし処理はあるが classList.add("dark") だけ

付けるだけで外さない。上の toggle("dark", 条件) の形に。

もし処理はあるが useEffect の最後が []

最初に1回しか動かない。[theme] にする。

もし処理が document.body に付けている

Tailwind の dark: は祖先のどこかに .dark があれば効くので body でも中身は変わる。CSS が html.dark や :root.dark と書いているなら documentElement にする。

もしTailwind v4（CSS に @import "tailwindcss"）で @custom-variant dark が無い

1行足す。

@custom-variant dark (&:is(.dark *));

もしTailwind v3（tailwind.config がある）

config に darkMode: "class"（または ["class"]）があるか。"media" なら "class" に変える。

もしCSS に .dark { --background: … } がある（shadcn/ui）が、部品が bg-white など色を直接書いている

その部品だけ変わらない。bg-white→bg-background、text-black→text-foreground に置き換えるか、dark:bg-gray-900 dark:text-white を足す。

もし用意された CSS が [data-theme="dark"] で書かれている

ThemeProvider を attribute="data-theme" にする（class ではなく data-theme を付ける）。CSS の書き方に合わせるのが正解。

もし用意された CSS が別ファイル（dark.css など）

layout.tsx で import されているか。無ければ import "./dark.css"; を足す（場所に合わせる）。

もしある（入力はできるが絞り込まれない）

その input の value=・onChange=・name= を見てメモし、確認②へ（入力欄はつなぐだけ）。

もしない

確認②で置き方を決める。

もしある

useState で検索語を覚え、配列を filter する。

const [keyword, setKeyword] = useState("");

const filtered = surveys.filter((s) =>
  String(s.title ?? "").toLowerCase().includes(keyword.toLowerCase())
);

<input value={keyword} onChange={(e) => setKeyword(e.target.value)} placeholder="タイトルで検索" className="rounded border px-3 py-2" />

{filtered.length === 0 && <p>見つかりませんでした</p>}
{filtered.map((s) => (

もしない ＋ page.tsx

フォームで URL に ?q=… を付けて送り、page.tsx で受け取って絞り込む。

export default async function Page({ searchParams }: { searchParams: Promise<{ q?: string }> }) {
  const { q = "" } = await searchParams;

const filtered = surveys.filter((s) => String(s.title ?? "").includes(q));

<form>
  <input name="q" defaultValue={q} placeholder="タイトルで検索" className="rounded border px-3 py-2" />
  <button>検索</button>
</form>

{filtered.map((s) => (

もしない ＋ page.tsx 以外の部品

06 の確認②の3つ目と同じ：page.tsx で q を受け取り、q={q} で部品に渡して、部品の中で filter する。検索の form は page.tsx に置く。

もしはい

DB に絞り込ませることもできる（filter の代わり）。

const surveys = await prisma.survey.findMany({
  where: q ? { title: { contains: q } } : undefined,
});

もしfetch("/api/…") で取っている

取ってきた配列を確認②の filter で絞るのが一番簡単（API 側を直す必要はない）。

もしapp の直下に page.tsx・surveys などが並んでいる

app/privacy/page.tsx を作る（app を右クリック →「新しいフォルダー」→ privacy → その中に「新しいファイル」→ page.tsx）。

もしsrc/app になっている

src/app/privacy/page.tsx。

もし(main)・(site)・(public) のようなカッコ付きのフォルダがあり、surveys などはその中

カッコのフォルダは「ルートグループ」で、URL には出ない。一覧画面と同じカッコのフォルダの中に作る：app/(main)/privacy/page.tsx。ヘッダーがそのカッコの中の layout.tsx にあることが多く、外に作るとヘッダーが出ない。

もしカッコのフォルダが2つある（(auth) と (main) など）

ログインしなくても見られるほう（(public) など）か、ヘッダーがあるほう。迷ったら一覧画面と同じほう。

もし[locale]・[lang] のフォルダ（多言語）

app/[locale]/privacy/page.tsx。URL は /ja/privacy のようになる。

もしすでに privacy・policy・privacy-policy フォルダがある

中の page.tsx を開いて、中身を書き換える（新しく作らない）。リンクの href はそのフォルダ名に合わせる。

もしほかのページが page.jsx・page.js

同じ拡張子で作る。JavaScript なので、コードに : string のような型があれば消す（確認②のコードには型は無い）。

もしどの場合も（基本の形）

export const metadata = { title: "プライバシーポリシー" };

export default function PrivacyPage() {
  return (
    <main className="mx-auto max-w-2xl space-y-4 p-6">
      <h1 className="text-2xl font-bold">プライバシーポリシー</h1>
      <h2 className="font-bold">取得する情報</h2>
      <p>アンケートの回答内容と回答日時を取得します。氏名などの入力は求めません。</p>
      <h2 className="font-bold">利用目的</h2>
      <p>回答の集計とグラフ表示のためにのみ利用します。</p>
      <h2 className="font-bold">第三者への提供</h2>
      <p>法令に基づく場合を除き、第三者に提供しません。</p>
    </main>
  );
}

もしほかのページが <Card>・<PageContainer>・<Container> などの部品で包んでいる

同じ部品で包むと見た目がそろう。<main …> の行と </main> をその部品に変え、import 行をほかのページからコピーする。

もしほかのページの1行目に "use client" がある

このページには不要（ボタンも state も無い）。"use client" があると metadata が書けない（エラーになる）ので、付けるなら1行目の metadata を消す。

もしほかのページに export const metadata が無い

1行目は無くてもよい。

もし本文は Markdown や別の文章ファイルで持ちたい

課題としては不要。上の形で十分。

もし「プライバシーポリシー」の文字がすでにあり、href="#" や href=""

href を変えるだけ。

href="/privacy"

もしリンクが配列で書かれている（const links = [{ href: "/surveys", label: "一覧" }, …]）

配列に1行足すだけ。

{ href: "/privacy", label: "プライバシーポリシー" },

もし<Link href=…> が並んでいる

隣のリンクをコピーして、href と文字だけ変える。

<Link href="/privacy" className="隣と同じ">プライバシーポリシー</Link>

もし<a href=…> が並んでいる

<a href="/privacy">プライバシーポリシー</a> を足す。

もしフッターの部品（components/footer.tsx など）がすでにある

そのファイルに上と同じ形で Link を足す。

もしフッターが無い

layout.tsx の {children} の下に足す。

<footer className="mt-10 border-t p-4 text-center text-sm">
  <Link href="/privacy">プライバシーポリシー</Link>
</footer>

もしmiddleware.ts がある

ログインしていない人を /login に送る処理があると、/privacy にも入れない。中の「ログインしなくてよいページの一覧」に足す。

const publicPaths = ["/login", "/privacy"];

もしmiddleware.ts が無い

このケースではない。確認①の置き場所をもう一度見る。

もし.theme-red { --primary: …; --primary-foreground: …; } のように、クラスの中で変数（-- で始まる名前）を決めている

一番よくある形。html に付ければ全部に効く。変数の名前（--primary など）をメモして確認②へ。

もしhtml.theme-red・:root.theme-red で始まっている

必ず html に付ける前提。確認④の関数のまま。

もしbody.theme-red で始まっている

body に付ける前提。確認④の関数の document.documentElement を document.body に変える。

もし.theme-red .btn { background: … }・.theme-red button { … } のように、中の部品の色を直接決めている

クラスはボタンたちの親ならどこに付けてもよい。html に付けるのが確実。

もし.dark.theme-red・.theme-red.dark のように、ダーク用の指定も別にある

html に dark と theme-red の両方が付く前提。確認④の関数は dark を消さないのでそのままでよい。className = …（代入）で付けると dark が消えるので使わない。

もしクラス名が theme- で始まらない（.red・.color-red・.primary-red など）

確認④の "theme-" をその頭の文字に変える（.red のように頭が無いなら確認④の「頭が無い」の形）。

もしCSS が themes.css・colors.css など、globals.css 以外のファイル

そのファイルが読み込まれていないと効かない。layout.tsx（または globals.css の先頭）で import されているか見る。

import "./themes.css";

もし16色のクラス名を、ボタンの名前（ブラック・グレー）と対応させる

CSS の .theme-black .theme-gray … の theme- の後ろ（black・gray …）をメモしておく。ボタンから渡すのはこの文字。

もしbg-primary・text-primary・bg-[var(--primary)]・var(--primary) が使われている

OK。クラスを付ければ変わる。確認③へ。

もしボタンなどが bg-blue-500・bg-black のように色を直接書いている

クラスが付いても変わらない。色を変えたい部品（主なボタン・ヘッダーなど）の色のクラスを、変数を使う形に置き換える。

className="今の色以外のクラス bg-[var(--primary)] text-[var(--primary-foreground)]"

もしCSS に @theme inline { --color-primary: var(--primary); } がある（Tailwind v4 / shadcn/ui）

bg-primary と書ける（上の bg-[var(--primary)] と同じ意味）。

もし今のコードに bg-${color}-500 のような、文字をつなげたクラスがある

Tailwind はこれを作れない（コードの中に完成したクラス名がそのまま書いてあるものしか CSS にしない）。変数の形（上の2つ目）にするか、16色分の完成したクラス名を文字で全部書いた配列を使う。

もしボタンが配列の map で作られている（const colors = [...] → colors.map(…)）

onClick を1か所足すだけ。配列の1件の形を見る（下の2つ）。

もし配列が [{ name: "ブラック", value: "black" }, …] のようにオブジェクト

CSS の theme- の後ろと同じ文字が入っている項目を渡す。

<button key={c.value} onClick={() => changeColor(c.value)} 今の属性>

もし配列の項目に "theme-red" のようにクラス名が丸ごと入っている

確認④の「クラス名が丸ごと来る」の形の関数を使う。

もし配列が ["red", "blue", …] のようにただの文字

onClick={() => changeColor(c)}（c そのもの）。

もし16個のボタンが1つずつ書いてある

それぞれに onClick を付ける。

<Button onClick={() => changeColor("black")} 今の属性>ブラック</Button>

もしonClick はあり、changeTheme("red") のような関数につながっている

その関数の中身を確認④で直す（新しく作らない。関数名はそのまま）。

もしonClick があるのに、押しても関数が動かない（console.log が出ない）

共通診断 へ。

もしボタンではなく <select> や <input type="radio">

onChange を使う：onChange={(e) => changeColor(e.target.value)}。e.target.value は選ばれた option / radio の value。

もし関数が空・console.log だけ・useState に入れるだけ

中身をこの形にする（関数名が違えば今の名前のまま）。

function changeColor(name: string) {
  const root = document.documentElement;
  [...root.classList].forEach((c) => {
    if (c.startsWith("theme-")) root.classList.remove(c);
  });
  root.classList.add(`theme-${name}`);
  localStorage.setItem("themeColor", name);
}

もしボタンから "theme-red" のようにクラス名が丸ごと来る

6行目を変える。

  root.classList.add(name);

もしクラス名に頭が無い（.red・.black）

前の色を外す行（3〜5行目）を、色の一覧で外す形にする。

  colors.forEach((c) => root.classList.remove(c.value));

もし今の関数が document.documentElement.className = … と代入している

代入は class を全部入れ替えるので、dark や next-themes の class が消える（ダークモードが壊れる）。上の classList の形にする。

もし今の関数が useState に入れて、外側の div の className に `theme-${color}` を付けている

その div の中だけ色が変わる。ヘッダーが div の外にある・背景（body）が変わらないなら、state が変わったときに html に付ける。

useEffect(() => {
  changeColor(color);
}, [color]);

もし色が Context や Zustand の store に入っている（useThemeColor()・useSettingsStore など）

ボタンはその set を呼び、html に付ける処理は Provider（または store を使う部品）の useEffect に書く（上の形）。

もしThemeProvider（next-themes）に themes={["red", "blue", …]} がある

setTheme("red") で色も変えられるが、ダークモードと同じ1枠を取り合う（赤にするとダークが外れる）。色は classList の関数、ダークは next-themes と分けるほうが安全。

もしclass は付く（Elements で見える）のに色が変わらない

確認①②に戻る：CSS のクラス名と綴りが違う（theme-Red と theme-red）、CSS ファイルが読み込まれていない、部品が変数を使っていない、のどれか。

もしどの場合も（かんたん）

表示されたときに保存された色を読み直す。一瞬元の色が見えることがあるが、課題としては十分。

useEffect(() => {
  const saved = localStorage.getItem("themeColor");
  if (saved) changeColor(saved);
}, []);

もし一瞬元の色が見えるのをなくしたい（任意）

layout.tsx の <head> に、画面を描く前に動く1行を足す。

<script dangerouslySetInnerHTML={{ __html: `const c = localStorage.getItem("themeColor"); if (c) document.documentElement.classList.add("theme-" + c);` }} />

もしヘッダーが2か所ある・色のボタンが設定画面にしか無い

useEffect をヘッダー（全ページに出る部品）に書く。設定画面にだけ書くと、そのページを開くまで色が戻らない。

もし色のクラスの中に --chart-1 などもある ＋ グラフが var(--chart-1) を使っている

何もしなくてよい。一緒に変わる。

もしshadcn/ui の chartConfig（color: "var(--chart-1)"）で、色のクラスに --chart が無い

color を主な色の変数にする：color: "var(--primary)"。

もしRecharts で fill="#8884d8" のように色が直接

fill="var(--primary)" に置き換える（SVG は CSS 変数を読める）。円グラフの <Cell なら fillOpacity={Math.max(0.25, 1 - i * 0.15)} を足すと、1色の濃さ違いで見分けられる。

もしChart.js（react-chartjs-2）

canvas は CSS 変数を読めない。色を文字として取り出して渡す。

const primary = getComputedStyle(document.documentElement).getPropertyValue("--primary").trim() || "#3b82f6";

もしブラックのボタンがダークの背景に溶けて見えない

CSS に .dark.theme-black { --primary: … } のようなダーク用があるか見る。無ければ、ダークのときはボタンに枠線を付ける：className に dark:border dark:border-white/30。

もしブラック・グレーでボタンの文字が読めない

文字色の変数（--primary-foreground など）が CSS にあれば text-[var(--primary-foreground)] を使う。無ければ text-white。

もし選んでいる色がどれかわからない

ボタンに選ばれている印を付ける：今の色を state で覚え、className={選んだ色 === c.value ? "ring-2 ring-offset-2" : ""}（今の className の後ろにつなげる）。

もしrecharts（<BarChart> などのタグ。shadcn/ui の ChartContainer で囲まれていることもある）

確認② → 確認③。

もしreact-chartjs-2 / chart.js（<Bar data={…} /> の形）

確認② → 確認④。

もしどちらも無い（div や SVG で自作）

確認②で「種類」を受け取れるか見て、無ければ確認⑤の切り替えだけ入れる。

もしある（例：if (type === "pie") や switch (chartType)）

グラフを作る必要はない。使う側から種類を渡し、切り替えボタンを付けるだけ（確認⑤へ）。

もしない（棒だけ、円だけの部品）

足りないほうのグラフを、既存のデータをそのまま使って作る（確認③か④）。

もし棒グラフはある → 円グラフを作る

"use client";
import { Cell, Legend, Pie, PieChart, Tooltip } from "recharts";

export function PieResult({ data }: { data: any[] }) {
  return (
    <PieChart width={320} height={280}>
      <Pie data={data} dataKey="count" nameKey="label" outerRadius={100} label animationDuration={800}>
        {data.map((_, i) => (
          <Cell key={i} fill="var(--primary, #3b82f6)" fillOpacity={Math.max(0.25, 1 - i * 0.15)} stroke="#fff" />
        ))}
      </Pie>
      <Tooltip />
      <Legend />
    </PieChart>
  );
}

もし円グラフはある → 棒グラフを作る

"use client";
import { Bar, BarChart, CartesianGrid, Tooltip, XAxis, YAxis } from "recharts";

export function BarResult({ data }: { data: any[] }) {
  return (
    <BarChart width={500} height={280} data={data}>
      <CartesianGrid vertical={false} />
      <XAxis dataKey="label" />
      <YAxis allowDecimals={false} />
      <Tooltip />
      <Bar dataKey="count" fill="var(--primary, #3b82f6)" radius={[4, 4, 0, 0]} animationDuration={800} />
    </BarChart>
  );
}

もし既存のグラフが <ChartContainer config={chartConfig}> で囲まれている（shadcn/ui）

新しいグラフも同じように囲むと、色やツールチップの見た目がそろう。

<ChartContainer config={chartConfig} className="h-[280px] w-full">
  <PieChart>…</PieChart>
</ChartContainer>

もし円グラフを足す

"use client";
import { ArcElement, Chart as ChartJS, Legend, Tooltip } from "chart.js";
import { Pie } from "react-chartjs-2";

ChartJS.register(ArcElement, Tooltip, Legend);

export function PieResult({ data }: { data: any }) {
  return <Pie data={data} />;
}

もし棒グラフを足す

"use client";
import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Tooltip } from "chart.js";
import { Bar } from "react-chartjs-2";

ChartJS.register(BarElement, CategoryScale, LinearScale, Tooltip, Legend);

export function BarResult({ data }: { data: any }) {
  return <Bar data={data} />;
}

もし既存の部品が種類を受け取れる（確認②で「ある」）

下の ChartSwitch の18行目を <ExistingChart type={type} data={data} /> のように既存の部品1つに変える。

もしどの場合も

"use client";
import { useState } from "react";
import { BarResult } from "@/components/bar-result";
import { PieResult } from "@/components/pie-result";

export function ChartSwitch({ data }: { data: any }) {
  const [type, setType] = useState<"bar" | "pie">("bar");
  const btn = "rounded px-3 py-1 text-sm transition-colors";
  const on = "bg-[var(--primary,#3b82f6)] text-white";

  return (
    <div>
      <div className="mb-3 flex gap-2">
        <button onClick={() => setType("bar")} className={`${btn} ${type === "bar" ? on : "border"}`}>棒グラフ</button>
        <button onClick={() => setType("pie")} className={`${btn} ${type === "pie" ? on : "border"}`}>円グラフ</button>
      </div>
      <div key={type} className="chart-in">
        {type === "bar" ? <BarResult data={data} /> : <PieResult data={data} />}
      </div>
    </div>
  );
}

@keyframes chart-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
.chart-in {
  animation: chart-in 0.4s ease-out;
}

<ChartSwitch data={question.data} />

もし追加した設問の ❌ だけ反応しない（最初からの設問は消える）

新しい設問の id の問題。確認④へ。

もしどの ❌ も反応しない

onClick かクリックの問題。確認②→③へ。

もし作成画面では消えるのに、編集画面では消えない

編集画面が別の部品・別の配列・別の条件を使っている。確認⑤へ。

もし一瞬消えて、すぐ戻る

画面の外からデータを入れ直している。確認⑤の「すぐ戻る」の行。

もし画面では消えるが、保存して開き直すと戻る

保存の処理が「消した設問」を DB から消していない。確認⑤の最後の行。

もし<X className="…" />（アイコン）だけで、onClick もボタンも無い

見た目だけ。ボタンで囲んで onClick を付ける。

<button type="button" onClick={() => removeQuestion(q)} aria-label="削除" className="今のclassName">
  <X className="今のアイコンのclassName" />
</button>

もしボタンに onClick が無い／onClick={() => {}}／中身が console.log だけ

onClick={() => removeQuestion(q)} を付け、確認④の関数を作る。

もしonClick={removeQuestion(q.id)}（() => が無い）

表示した瞬間に動いてしまい、押したときには動かない。onClick={() => removeQuestion(q.id)} にする。

もしonClick={removeQuestion} と関数名だけで、関数は (id) => を受け取る

id の代わりにクリックの情報が入り、何も消えない。() => removeQuestion(q.id) にする。

もしonClick={() => onDelete?.(…)}・props.onRemove(…)（親から受け取る関数）

編集画面の親が onDelete を渡していないと、?. のせいでエラーも出ず何も起きない。部品名（<QuestionItem など）で全体検索し、編集画面で使っている行に onDelete があるか見る（作成画面の行にはあって、編集画面の行に無いことが多い）。

<QuestionItem 今の属性 onDelete={() => removeQuestion(q)} />

もしdisabled={isEdit}・disabled={!canDelete} など、条件で押せなくしている

編集モードでは押せない設定になっている。条件を disabled={questions.length <= 1}（1問のときだけ押せない）に変える。

もし❌ が <AlertDialogTrigger・<DialogTrigger の中（押すと確認画面が出る作り）

確認画面が出ないなら、Trigger に asChild があるか・中のボタンが自作 Button なら ref と props を渡しているか（共通診断 の自作 Button）。確認画面は出るのに消えないなら、「削除する」ボタン（<AlertDialogAction）の onClick を見る。

もしonClick は正しく見える

確認③へ。

もしどの場合も

console.log("削除", target, questions);

もし何も出ない＋ ❌ がカードの右上にある（absolute が付いている）

入力欄やカードの中身が ❌ の上にかぶさっていることが多い。F12 の左上の矢印で ❌ をクリックし、選ばれたのが button か見る。違えば ❌ のボタンの className に z-10 を足す（親に relative が必要）。

もし何も出ない＋ 設問がドラッグで並べ替えできる

ドラッグの仕組みが押した瞬間を取っている。19 の確認③（listeners はハンドルだけ）。

もし何も出ない（それ以外）

共通診断の確認③ を上から見る。form の中で type が無い（押すたびに読み直される）も多い。

もし出る。渡された設問の id: undefined

追加した設問に id が無い。確認④へ。

もし出る。Console に赤いエラー（404・500・Failed to fetch）も出る

削除の関数が API に DELETE を送っていて失敗している（まだ DB に無い新しい設問を消そうとしている）。確認④の「API で消している」。

もしfilter((q) => q.id !== id) で消していて、新しい設問の id が undefined

設問そのもので比べる形にすると、id が無くても消せる（一番確実）。

function removeQuestion(target: any) {
  if (questions.length <= 1) return;
  if (!window.confirm("この設問を削除しますか？")) return;
  setQuestions((prev) => prev.filter((q) => q !== target));
}

onClick={() => removeQuestion(q)}

もしid で消す作りのままにしたい

設問を追加する所で id を付ける。

id: crypto.randomUUID(),

もし削除の関数が await fetch(`/api/questions/${id}`, { method: "DELETE" }) のように API で消している

新しい設問はまだ DB に無いので失敗する。DB にある設問だけ API で消し、画面からは必ず消す。

async function removeQuestion(target: any) {
  if (questions.length <= 1) return;
  if (!window.confirm("この設問を削除しますか？")) return;
  if (target.id) {
    await fetch(`/api/questions/${target.id}`, { method: "DELETE" });
  }
  setQuestions((prev) => prev.filter((q) => q !== target));
}

もしquestions.splice(i, 1) してから setQuestions(questions)

同じ配列を set しても描き直されない。上の filter の形にする。

もし最初からの設問と追加した設問を別々の配列で持っている（questions と newQuestions など）

片方からしか消していない。両方から消す。

setQuestions((prev) => prev.filter((q) => q !== target));
setNewQuestions((prev) => prev.filter((q) => q !== target));

もしid の型が違う（最初からは数字 3、渡したのは文字 "3"）

設問そのもので比べる形（1つ目）にするか、String(q.id) !== String(id) で比べる。

もし{isEditing ? <EditQuestion … /> : <QuestionCard … />} のように、編集モードで別の部品を使っている

❌ があるのは編集用の部品。その部品と、それを置いている行に onClick / onDelete があるか（確認②）。作成画面のほうを直しても編集モードは変わらない。

もし削除の関数の最初に if (mode !== "create") return; のような条件がある

編集モードでは何もせずに終わっている。その行を消す（または "edit" も通す）。

もし一瞬消えてすぐ戻る＋ useEffect(() => { setQuestions(data.questions) }, [data]) がある

取ってきたデータ（data）が変わるたびに設問を入れ直している（SWR や React Query は画面に戻るたびに取り直す）。最初の1回だけ入れる。

const loaded = useRef(false);
useEffect(() => {
  if (!data || loaded.current) return;
  setQuestions(data.questions);
  loaded.current = true;
}, [data]);

もし一瞬消えてすぐ戻る＋ react-hook-form の reset(data) が useEffect の中にある

同じ理由。上と同じく loaded の印で最初の1回だけ reset する。

もし画面では消えるが、保存して開き直すと戻る

保存の API が「今ある設問を上書き・追加」だけして、消した設問を DB から消していない。保存の API で、送られてこなかった設問を消す。

await prisma.question.deleteMany({
  where: { surveyId: surveyId, id: { notIn: questions.filter((q) => q.id).map((q) => q.id) } },
});

もしuseState

確認④の「設問そのもので比べる」形が一番確実。

もしuseFieldArray（react-hook-form）

すでに remove がある。番号で消すので id が無くても消せる。

const { fields, append, remove } = useFieldArray({ control, name: "questions" });

もしZustand の store

store に削除の関数を足す（または今ある remove / delete を使う）。

removeQuestion: (target: any) =>
  set((state) => ({ questions: state.questions.filter((q) => q !== target) })),

もしuseReducer

reducer に case "REMOVE": return { ...state, questions: state.questions.filter((q) => q !== action.target) };、❌ は dispatch({ type: "REMOVE", target: q })。

もし親から props（questions と onChange）

onChange(questions.filter((q) => q !== target))。

もしkey={i}（番号）

id があれば key={q.id}、useFieldArray なら key={field.id}。追加した設問に id が無ければ確認④で id を付ける。

もしkey={q.id} だが、追加した設問は id が undefined

key が重なって、消した後に入力欄が取り違えられる。確認④で id（tempId）を付ける。

もし@dnd-kit/core・@dnd-kit/sortable がある

確認② → 確認③。

もしframer-motion または motion がある

確認② → 確認④（Reorder）。

もし@hello-pangea/dnd または react-beautiful-dnd がある

確認② → 確認⑤。

もしどれも無い＋ npm install してよい

ターミナルで npm i @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities → 確認② → 確認③。

もしどれも無い＋ install できない（してはいけない）

確認② → 確認⑥（ライブラリ無しの HTML の draggable）。

もしハンドルのファイルにすでに useSortable や DndContext が途中まで書いてある

作り直さない。確認③の最後の「チェック表」で、足りないものだけ足す。

もしハンドルのボタンに draggable や onDragStart が書いてある

HTML の draggable で作りかけ。確認⑥と見比べて足りないものを足す。