Merge pull request #29 from fun-developers-hub/uiro/demo-implement

tips: フェーズ別の新概念を学ぶタブ切り替えページを追加

Author: famisics

CLAUDE.md

@@ -0,0 +1,37 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project
+
+"TriGonFight" (janken-v2) — a rock-paper-scissors (じゃんけん) web app built with Next.js App Router, deployed to Cloudflare via OpenNext.
+
+## Commands
+
+Use `pnpm` directly (lockfile is `pnpm-lock.yaml`, `packageManager` is pinned to `pnpm@11.3.0`).
+
+```bash
+pnpm dev              # start dev server
+pnpm build            # production build (also type-checks)
+pnpm lint             # eslint .
+pnpm lint:fix         # eslint . --fix
+pnpm format           # prettier --write .
+pnpm format:check     # prettier --check . (CI-enforced)
+pnpm preview          # opennextjs-cloudflare build && preview (local Cloudflare Worker preview)
+pnpm deploy           # opennextjs-cloudflare build && deploy (Cloudflare deploy)
+```
+
+There is no test suite in this repo (no unit/e2e test runner configured). CI (`.github/workflows/ci.yml`) runs, in order: `pnpm install --frozen-lockfile`, `pnpm lint`, `pnpm format:check`, `pnpm build`. Type checking happens as part of `pnpm build` (`next build`) — do not run `tsc` directly, as noted in global instructions.
+
+## Architecture
+
+- Next.js App Router under `src/app`, path alias `@/*` → `src/*`.
+- Deployment target is Cloudflare Workers via `@opennextjs/cloudflare`. `wrangler.jsonc` points `main` at `.open-next/worker.js` and serves static assets from `.open-next/assets`; `open-next.config.ts` holds the OpenNext build config. `.open-next/` and `.wrangler/` are build artifacts (ignored by eslint) — never hand-edit them.
+- Styling is Tailwind CSS v4 via the `@tailwindcss/postcss` plugin, configured in `src/app/globals.css` using `@theme`/`@theme inline` blocks (no separate `tailwind.config`). Custom theme colors (e.g. `newblue`, `newgreen`) are defined there — reuse them instead of introducing new ad-hoc colors. `prettier-plugin-tailwindcss` auto-sorts class names, and `arrowParens: "avoid"` / `bracketSameLine: true` are enforced by Prettier — run `pnpm format` rather than hand-formatting.
+- The root route (`src/app/page.tsx`) is the actual game UI (rock/scissors/paper choices, CPU vs. player panels).
+- `src/app/tips/` is a separate, self-contained documentation area explaining Next.js/React concepts as they're introduced through the game's development phases — it is not part of the game itself:
+  - `tips/_data/concepts.ts` is the single source of truth for the tips index: each entry has a `slug`, `title`, `phaseLabel` (which development phase it maps to), optional `issueUrl` (linking to the GitHub issue that introduced the concept), and `summary`.
+  - Each concept lives in `tips/<slug>/` with three files following the same pattern: `page.tsx` (renders a `ConceptSection` with a Japanese `explanation` and a `demo`), `code.ts` (exports a `snippet` string of example code shown via `CodeBlock`), and `Demo.tsx` (a live, interactive Client Component demonstrating the concept).
+  - `tips/_components/ConceptSection.tsx` and `tips/_components/CodeBlock.tsx` are the shared layout/rendering primitives for every concept page; `CodeBlock` renders syntax-highlighted code server-side via `shiki` (`codeToHtml`, theme `github-dark`).
+  - When adding a new tips entry: add its metadata to `concepts.ts`, then create the three files above following an existing slug (e.g. `use-state-basics`) as the template.
+- Explanatory text throughout the tips section and UI-facing copy is written in Japanese; match that when adding to these areas.

package.json

@@ -16,9 +16,11 @@
   },
   "dependencies": {
     "@opennextjs/cloudflare": "^1.19.11",
+    "@tanstack/react-query": "^5.101.4",
     "next": "16.2.4",
     "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "react-dom": "19.2.4",
+    "shiki": "^4.3.1"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.3.1",

pnpm-lock.yaml

@@ -1,6 +1,6 @@
 "use client";
 import Image from "next/image";
-
+import Link from "next/link";
 import { useState } from "react";
 
 export default function Page() {
@@ -14,10 +14,15 @@ export default function Page() {
   };
   return (
     <div className="flex h-full flex-col">
-      <header>
+      <header className="relative">
         <h1 className="bg-newgreen text-center text-4xl">TriGonFight</h1>
         {/* bgはbackground */}
         {/* この環境でh1は意味がないけど、タイトルというマークのためにつけてる */}
+        <Link
+          href="/tips"
+          className="absolute top-1/2 right-2 -translate-y-1/2 text-sm underline">
+          Tips
+        </Link>
       </header>
       <div className="relative flex flex-1 items-center justify-center bg-violet-950 text-white">
         <div className="size-35 rounded-full bg-pink-700"></div>

src/app/page.tsx

@@ -0,0 +1,23 @@
+import { getSingletonHighlighter } from "shiki";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+
+type CodeBlockProps = {
+  code: string;
+  lang?: "tsx" | "ts" | "css";
+};
+
+export async function CodeBlock({ code, lang = "tsx" }: CodeBlockProps) {
+  const highlighter = await getSingletonHighlighter({
+    langs: [lang],
+    themes: ["github-dark"],
+    engine: createJavaScriptRegexEngine(),
+  });
+  const html = highlighter.codeToHtml(code, { lang, theme: "github-dark" });
+
+  return (
+    <div
+      className="overflow-x-auto rounded-md text-sm [&_pre]:m-0 [&_pre]:p-4 [&_pre]:font-mono"
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+}

src/app/tips/_components/CodeBlock.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import type { ReactNode } from "react";
+
+type ConceptSectionProps = {
+  title: string;
+  explanation: ReactNode;
+  demo: ReactNode;
+};
+
+export function ConceptSection({
+  title,
+  explanation,
+  demo,
+}: ConceptSectionProps) {
+  return (
+    <article>
+      <Link href="/tips" className="text-newblue mb-4 inline-block underline">
+        ← Tips一覧へ戻る
+      </Link>
+      <h2 className="mb-4 text-2xl font-bold">{title}</h2>
+      <section className="mb-8">
+        <h3 className="mb-2 text-lg font-bold">説明</h3>
+        <div className="flex flex-col gap-3 text-sm leading-relaxed">
+          {explanation}
+        </div>
+      </section>
+      <section>
+        <h3 className="mb-2 text-lg font-bold">実装例</h3>
+        <div className="flex flex-col gap-4">{demo}</div>
+      </section>
+    </article>
+  );
+}

src/app/tips/_components/ConceptSection.tsx

@@ -0,0 +1,50 @@
+export type Concept = {
+  slug: string;
+  title: string;
+  phaseLabel: string;
+  issueUrl?: string;
+  summary: string;
+};
+
+export const concepts: Concept[] = [
+  {
+    slug: "use-state-basics",
+    title: "Client Components と useState",
+    phaseLabel: "Phase 1",
+    summary:
+      "「use client」とuseStateによるUI状態管理・イベントハンドリングの基礎。",
+  },
+  {
+    slug: "next-font-optimization",
+    title: "next/font でのフォント設定",
+    phaseLabel: "Phase 1-4",
+    issueUrl:
+      "https://github.com/fun-developers-hub/janken-v2-frontend/issues/23",
+    summary:
+      "next/font/google でフォントを読み込み、実際に適用するまでの設定方法。",
+  },
+  {
+    slug: "client-side-fetch",
+    title: "fetch によるクライアントサイド取得",
+    phaseLabel: "Phase 2",
+    issueUrl:
+      "https://github.com/fun-developers-hub/janken-v2-frontend/issues/11",
+    summary:
+      "loading/error状態を含む、クライアントコンポーネントでのfetchパターン。",
+  },
+  {
+    slug: "tanstack-query-mutation",
+    title: "TanStack Query の useMutation で書き換える",
+    phaseLabel: "Phase 2（発展）",
+    summary:
+      "自前のuseState/try-catchによる状態管理を、useMutationに任せる書き方。",
+  },
+  {
+    slug: "count-state-management",
+    title: "回数カウンターの状態管理",
+    phaseLabel: "Phase 3（任意）",
+    issueUrl:
+      "https://github.com/fun-developers-hub/janken-v2-frontend/issues/18",
+    summary: "useReducerを使った、複数アクションを持つ状態のカウント管理。",
+  },
+];

src/app/tips/_data/concepts.ts

@@ -0,0 +1,35 @@
+"use client";
+
+import { useJankenFetch } from "./useJankenFetch";
+
+export function Demo() {
+  const { status, cpuHand, result, errorMessage, fetchHand } = useJankenFetch();
+
+  return (
+    <div className="flex flex-col items-center gap-4">
+      <div className="flex gap-2">
+        <button
+          type="button"
+          onClick={() => fetchHand("rock")}
+          className="bg-newblue rounded-md px-4 py-2 text-white">
+          正常なリクエスト(グー)
+        </button>
+        <button
+          type="button"
+          onClick={() => fetchHand("invalid")}
+          className="rounded-md bg-red-600 px-4 py-2 text-white">
+          エラーを発生させる
+        </button>
+      </div>
+      <div className="text-sm">
+        状態: <span className="font-bold">{status}</span>
+        {status === "success" ? (
+          <div className="mt-1">
+            CPUの手: {cpuHand} / 結果: {result}
+          </div>
+        ) : null}
+        {status === "error" ? <div className="mt-1">{errorMessage}</div> : null}
+      </div>
+    </div>
+  );
+}

src/app/tips/client-side-fetch/Demo.tsx

@@ -0,0 +1,55 @@
+export const hookSnippet = `// useJankenFetch.ts
+"use client";
+
+import { useState } from "react";
+
+type Status = "idle" | "loading" | "success" | "error";
+
+export function useJankenFetch() {
+  const [status, setStatus] = useState<Status>("idle");
+  const [cpuHand, setCpuHand] = useState("");
+  const [result, setResult] = useState("");
+  const [errorMessage, setErrorMessage] = useState("");
+
+  async function fetchHand(userHand: string) {
+    setStatus("loading");
+    try {
+      const res = await fetch("https://janken.ma41.net/janken", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ user_hand: userHand }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        throw new Error(data.error ?? "リクエストに失敗しました");
+      }
+      setCpuHand(data.cpu_hand);
+      setResult(data.result);
+      setStatus("success");
+    } catch (error) {
+      setErrorMessage(error instanceof Error ? error.message : "不明なエラー");
+      setStatus("error");
+    }
+  }
+
+  return { status, cpuHand, result, errorMessage, fetchHand };
+}
+`;
+
+export const demoSnippet = `// Demo.tsx
+"use client";
+
+import { useJankenFetch } from "./useJankenFetch";
+
+export function Demo() {
+  const { status, cpuHand, result, fetchHand } = useJankenFetch();
+
+  return (
+    <div>
+      {/* cpuHand/result はフック側で個別の状態として管理し、
+          Demo は「呼ぶ」「表示する」だけになる */}
+      <button onClick={() => fetchHand("rock")}>グー</button>
+    </div>
+  );
+}
+`;

src/app/tips/client-side-fetch/code.ts

@@ -0,0 +1,63 @@
+import { CodeBlock } from "../_components/CodeBlock";
+import { ConceptSection } from "../_components/ConceptSection";
+import { demoSnippet, hookSnippet } from "./code";
+import { Demo } from "./Demo";
+
+export default function Page() {
+  return (
+    <ConceptSection
+      title="fetch によるクライアントサイド取得"
+      explanation={
+        <>
+          <p>
+            実バックエンド（<code>https://janken.ma41.net</code>）が
+            どんなAPIを持っているかは、
+            <a
+              href="https://janken.ma41.net/swagger/index.html"
+              className="text-newblue underline">
+              Swagger UI
+            </a>
+            を眺めてみると分かる。パスやリクエスト/レスポンスの形が
+            一覧できるので、fetchを書く前に一度見ておくとよい。
+          </p>
+          <p>
+            Client Component からAPIを呼び出すときは、 「今どういう状態か」を{" "}
+            <code>idle</code>/<code>loading</code>/<code>success</code>/
+            <code>error</code> のような文字列で保持しておくと、
+            読み込み中の表示やエラー表示を素直に出し分けられる。
+          </p>
+          <p>
+            <code>try/catch/finally</code> を使い、リクエスト開始時に{" "}
+            <code>loading</code>
+            へ、成功したら <code>success</code>
+            へ、失敗したら <code>error</code>{" "}
+            へ状態を遷移させる。レスポンスが200番台でなくても <code>fetch</code>
+            自体は例外を投げないため、
+            <code>res.ok</code> を確認して自分でエラーとして扱う必要がある。
+          </p>
+          <p>
+            下のデモでは、実バックエンド（
+            <code>https://janken.ma41.net</code>）の <code>POST /janken</code>{" "}
+            を直接呼び出し、正常なリクエストとエラーになるリクエストの
+            両方を試せる。
+          </p>
+          <p>
+            <code>status</code>/<code>cpuHand</code>/<code>result</code>{" "}
+            の管理とfetch処理は、
+            <code>useJankenFetch</code>{" "}
+            というカスタムフックに抽出している。こうすると <code>Demo</code>{" "}
+            コンポーネント側は「フックを呼んで、
+            返ってきた値を表示する」だけになり、見通しがよくなる。
+          </p>
+        </>
+      }
+      demo={
+        <>
+          <CodeBlock code={hookSnippet} />
+          <CodeBlock code={demoSnippet} />
+          <Demo />
+        </>
+      }
+    />
+  );
+}