// FizzBuzz を「関数＆型安全」で書くサンプル

/**
 * 1 〜 max までを FizzBuzz 変換した配列を返す
 * @param max - 1 以上の整数
 */
export const fizzBuzz = (max: number): (number | 'Fizz' | 'Buzz' | 'FizzBuzz')[] => {
  if (!Number.isInteger(max) || max < 1) {
    throw new Error('max must be a positive integer');
  }

  // Array.from + map で 1..max を生成
  return Array.from({ length: max }, (_, i) => {
    const n = i + 1;
    const fizz = n % 3 === 0;
    const buzz = n % 5 === 0;
    return fizz && buzz
      ? 'FizzBuzz'
      : fizz
      ? 'Fizz'
      : buzz
      ? 'Buzz'
      : n; // 型推論で number
  });
};

/** CLI 実行: `pnpm ts-node src/fizzbuzz.ts 15` */
if (import.meta.main) {
  const max = Number(process.argv[2] ?? '15');
  fizzBuzz(max).forEach((v) => console.log(v));
}

pnpm exec eslint src --ext .ts

UI = f(state)

pnpm create vite@latest react-basics -- --template react-ts
cd react-basics && pnpm install
rm src/App.css src/index.css        # デザインは要らない

import { useState } from 'react';

export const Counter = () => {
  // ❶ [state, updater] のペアを分割代入
  const [count, setCount] = useState(0);

  // ❷ updater は「新しい state」を渡す関数
  const increment = () => setCount((prev) => prev + 1);

  return (
    <button
      onClick={increment}
      style={{ padding: '0.5rem 1rem', fontSize: '1.2rem' }}
    >
      Clicked {count} times
    </button>
  );
};

export type Todo = { id: number; text: string; completed: boolean };

type Props = {
  todo: Todo;
  doneColor?: string;          // 親から自由に変えられる
};

export const TodoItem = ({ todo, doneColor = 'gray' }: Props) => (
  <li
    style={{
      color: todo.completed ? doneColor : undefined,
      textDecoration: todo.completed ? 'line-through' : undefined,
      cursor: 'pointer',
    }}
  >
    {todo.text}
  </li>
);

import { useState } from 'react';
import { TodoItem, Todo } from './TodoItem';

const seed: Todo[] = [
  { id: 1, text: 'Buy milk', completed: false },
  { id: 2, text: 'Read React docs', completed: true },
];

export const TodoApp = () => {
  const [todos, setTodos] = useState<Todo[]>(seed);

  const toggle = (id: number) =>
    setTodos((prev) =>
      prev.map((t) => (t.id === id ? { ...t, completed: !t.completed } : t)),
    );

  return (
    <>
      <h2>Todos ({todos.length})</h2>
      <ul>
        {todos.map((t) => (
          <div key={t.id} onClick={() => toggle(t.id)}>
            {/* props の例：完了色を上位で一元管理 */}
            <TodoItem todo={t} doneColor="green" />
          </div>
        ))}
      </ul>
    </>
  );
};

import { Counter } from './components/Counter';
import { TodoApp } from './components/TodoApp';

export default function App() {
  return (
    <>
      <h1>React 基礎 API Demo</h1>
      <Counter />
      <hr />
      <TodoApp />
    </>
  );
}

pnpm add axios   # API 呼び出し用（fetch でも可）
pnpm add -D @types/lodash   # サンプルで lodash も少し使う

import { useEffect, useState } from 'react';
import axios from 'axios';

type Todo = { id: number; title: string; completed: boolean };

export const TodoFetcher = () => {
  const [todos, setTodos] = useState<Todo[] | null>(null);
  const [error, setError] = useState<string | null>(null);

  /* ------------------------- ❶ エフェクト本体 ------------------------- */
  useEffect(() => {
    const controller = new AbortController(); // ← キャンセル用

    (async () => {
      try {
        const res = await axios.get<Todo[]>(
          'https://jsonplaceholder.typicode.com/todos?_limit=5',
          { signal: controller.signal },
        );
        setTodos(res.data);
      } catch (e) {
        if (axios.isCancel(e)) return; // アンマウント時の中断は無視
        setError((e as Error).message);
      }
    })();

    /* ----------- ❷ クリーンアップ: アンマウント時に axios を中断 ----------- */
    return () => controller.abort();
  }, []); // ← ❸ 依存配列が [] なので「マウント時 1 回だけ」

  /* --------------------------- 画面描画 --------------------------- */
  if (error) return <p style={{ color: 'red' }}>Error: {error}</p>;
  if (!todos) return <p>Loading…</p>;

  return (
    <ul>
      {todos.map((t) => (
        <li key={t.id}>
          {t.title} {t.completed && '✅'}
        </li>
      ))}
    </ul>
  );
};

import { useEffect, useState } from 'react';

export const useWindowWidth = () => {
  const [width, setWidth] = useState(() => window.innerWidth);

  useEffect(() => {
    const handler = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handler);

    // ★ クリーンアップ ― removeEventListener
    return () => window.removeEventListener('resize', handler);
  }, []); // ← コールバックは一度だけ登録、handler 内で最新値を set

  return width;
};

import { ChangeEvent, useEffect, useState } from 'react';
import axios from 'axios';
import _debounce from 'lodash/debounce';

type User = { id: number; login: string; avatar_url: string };

export const UserSearch = () => {
  const [q, setQ] = useState('react');
  const [users, setUsers] = useState<User[]>([]);

  /* --------- 入力フィールド変更で q 更新（自動バッチ対象） --------- */
  const onChange = (e: ChangeEvent<HTMLInputElement>) => setQ(e.target.value);

  /* -- 依存に [q] を渡すと「q が変わった時だけ」 Effect を再評価 -- */
  useEffect(() => {
    if (!q) return;

    const controller = new AbortController();

    const fetchUsers = async () => {
      const res = await axios.get<{ items: User[] }>(
        `https://api.github.com/search/users?per_page=10&q=${encodeURIComponent(
          q,
        )}`,
        { signal: controller.signal },
      );
      setUsers(res.data.items);
    };

    // ❶ 300ms 入力が止まるまで待って API 呼び出し
    const debounced = _debounce(fetchUsers, 300);
    debounced();

    // ❷ クリーンアップ: q が変わる／アンマウント時 → axios 中断 & debounce 解除
    return () => {
      controller.abort();
      debounced.cancel();
    };
  }, [q]);

  return (
    <>
      <input value={q} onChange={onChange} placeholder="GitHub user" />
      <ul>
        {users.map((u) => (
          <li key={u.id}>
            <img src={u.avatar_url} width={32} style={{ verticalAlign: 'middle' }} />{' '}
            {u.login}
          </li>
        ))}
      </ul>
    </>
  );
};

import { useState } from 'react';

export const BatchedUpdatesDemo = () => {
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);

  const asyncInc = () => {
    // setTimeout 内でも React18 以降は同一タスクなら自動バッチ！
    setTimeout(() => {
      setA((v) => v + 1);
      setB((v) => v + 1);
    }, 0);
  };

  console.log('render', { a, b }); // DevTools コンソールで回数を観察

  return <button onClick={asyncInc}>Async +1</button>;
};

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

type Todo = { id: number; text: string; done: boolean };
const seed: Todo[] = [
  { id: 1, text: 'Buy milk', done: false },
  { id: 2, text: 'Read React docs', done: true },
];

// src/components/TodoListView.tsx
type ViewProps = {
  todos: Todo[];
  onToggle: (id: number) => void;
};

export const TodoListView = ({ todos, onToggle }: ViewProps) => (
  <ul>
    {todos.map((t) => (
      <li
        key={t.id}
        onClick={() => onToggle(t.id)}
        style={{
          cursor: 'pointer',
          textDecoration: t.done ? 'line-through' : undefined,
        }}
      >
        {t.text}
      </li>
    ))}
  </ul>
);

// src/containers/TodoListContainer.tsx
import { useState } from 'react';
import { TodoListView } from '../components/TodoListView';

export const TodoListContainer = () => {
  const [todos, setTodos] = useState(seed);

  const toggle = (id: number) =>
    setTodos((prev) =>
      prev.map((t) => (t.id === id ? { ...t, done: !t.done } : t)),
    );

  return <TodoListView todos={todos} onToggle={toggle} />;
};

// src/components/Filterable.tsx
import { ReactNode, useState } from 'react';

type SlotProps = {
  todos: Todo[];
  toggle(id: number): void;
};

type Props = {
  /** “描画スロット”を受け取る Render Prop */
  children: (p: SlotProps) => ReactNode;
};

export const Filterable = ({ children }: Props) => {
  const [todos, setTodos] = useState(seed);
  const [showDone, setShowDone] = useState(false);

  const toggle = (id: number) =>
    setTodos((prev) =>
      prev.map((t) => (t.id === id ? { ...t, done: !t.done } : t)),
    );

  const visible = todos.filter((t) => (showDone ? t.done : true));

  return (
    <>
      <label>
        <input
          type="checkbox"
          checked={showDone}
          onChange={(e) => setShowDone(e.target.checked)}
        />{' '}
        show done only
      </label>
      {/* ここが“Slot” */}
      {children({ todos: visible, toggle })}
    </>
  );
};

<Filterable>
  {({ todos, toggle }) => (
    <TodoListView todos={todos} onToggle={toggle} />
  )}
</Filterable>

// src/components/Tabs/Tabs.tsx
import {
  createContext,
  ReactElement,
  useContext,
  useState,
  ReactNode,
} from 'react';

type Ctx = { value: string; setValue: (v: string) => void };
const TabCtx = createContext<Ctx | null>(null);

export const Tabs = ({ children, defaultValue }: { children: ReactNode; defaultValue: string }) => {
  const [value, setValue] = useState(defaultValue);
  return (
    <TabCtx.Provider value={{ value, setValue }}>{children}</TabCtx.Provider>
  );
};

// src/components/Tabs/TabList.tsx
export const List = ({ children }: { children: ReactNode }) => (
  <div style={{ display: 'flex', gap: 8 }}>{children}</div>
);

// src/components/Tabs/Tab.tsx
export const Tab = ({ value, children }: { value: string; children: ReactNode }) => {
  const ctx = useContext(TabCtx)!;
  const active = ctx.value === value;
  return (
    <button
      onClick={() => ctx.setValue(value)}
      style={{ fontWeight: active ? 'bold' : undefined }}
    >
      {children}
    </button>
  );
};

// src/components/Tabs/Panel.tsx
export const Panel = ({ value, children }: { value: string; children: ReactNode }) => {
  const ctx = useContext(TabCtx)!;
  return ctx.value === value ? <div>{children}</div> : null;
};

export const TabsNamespace = Object.assign(Tabs, {
  List,
  Tab,
  Panel,
});

<TabsNamespace defaultValue="all">
  <TabsNamespace.List>
    <TabsNamespace.Tab value="all">All</TabsNamespace.Tab>
    <TabsNamespace.Tab value="done">Done</TabsNamespace.Tab>
  </TabsNamespace.List>

  <TabsNamespace.Panel value="all">
    <TodoListView todos={seed} onToggle={() => {}} />
  </TabsNamespace.Panel>
  <TabsNamespace.Panel value="done">
    <TodoListView todos={seed.filter((t) => t.done)} onToggle={() => {}} />
  </TabsNamespace.Panel>
</TabsNamespace>

┌ 再レンダー
│   ├ UI 再計算       ← ここが高コストなら遅い
│   └ コールバック再生成 → 子に props で渡ると **再レンダー連鎖**
└ state 変更

import { useMemo, useState } from 'react';

// 素朴な O(√n) 素数判定（わざと重め）
const isPrime = (n: number) => {
  if (n < 2) return false;
  for (let i = 2; i <= Math.sqrt(n); i++) {
    if (n % i === 0) return false;
  }
  return true;
};

export const PrimeChecker = () => {
  const [num, setNum] = useState(1);

  /* ❶ num が変わった時だけ再計算。結果は next render までキャッシュ */
  const prime = useMemo(() => isPrime(num), [num]);

  return (
    <>
      <input
        type="number"
        value={num}
        onChange={(e) => setNum(Number(e.target.value))}
      />
      <p>{num} is {prime ? 'Prime' : 'Composite'}</p>
    </>
  );
};

import React from 'react';

export const ExpensiveList = React.memo(
  ({ items, onSelect }: { items: string[]; onSelect: (v: string) => void }) => {
    console.log('ExpensiveList render'); // ← 再レンダー回数を観察
    return (
      <ul>
        {items.map((it) => (
          <li key={it} onClick={() => onSelect(it)}>
            {it}
          </li>
        ))}
      </ul>
    );
  },
);

import { useCallback, useState } from 'react';
import { ExpensiveList } from './ExpensiveList';

export const CallbackDemo = () => {
  const [count, setCount] = useState(0);
  const items = ['Apple', 'Banana', 'Cherry'];

  /* ❶ 無限に新インスタンス → memo 意味なし */
  // const handleSelect = (v: string) => console.log(v);

  /* ❷ useCallback で items が不変なら“同じ関数参照”を維持 */
  const handleSelect = useCallback((v: string) => console.log(v), []);

  return (
    <>
      <button onClick={() => setCount((c) => c + 1)}>parent +1 ({count})</button>
      <ExpensiveList items={items} onSelect={handleSelect} />
    </>
  );
};

import { useEffect, useRef, useState } from 'react';

export const PreviousValue = () => {
  const [value, setValue] = useState('');
  const prev = useRef<string | null>(null); // ❶ ミュータブルな箱

  useEffect(() => {
    prev.current = value;                   // ❷ 再レンダーしない更新
  }, [value]);

  return (
    <>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <p>prev: {prev.current ?? '---'}</p>
    </>
  );
};

import { useRef } from 'react';

export const AutoFocusInput = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  return (
    <input
      ref={inputRef}
      onKeyDown={(e) => {
        if (e.key === 'Escape') inputRef.current?.blur();
      }}
      placeholder="Press Esc to blur"
    />
  );
};

import { useEffect, useState } from 'react';

export const useDebounce = <T,>(value: T, delay = 300) => {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id);      // ★ クリーンアップ
  }, [value, delay]);

  return debounced;
};

const q = useDebounce(searchText, 500);
useEffect(() => fetchData(q), [q]);

import { useEffect, useRef } from 'react';

export const useInterval = (callback: () => void, ms: number | null) => {
  const saved = useRef<() => void>();

  /* 最新の callback を保持（setInterval 外で更新） */
  useEffect(() => {
    saved.current = callback;
  });

  useEffect(() => {
    if (ms === null) return;          // null で停止
    const id = setInterval(() => saved.current?.(), ms);
    return () => clearInterval(id);
  }, [ms]);
};

useInterval(() => setTick((t) => t + 1), 1000); // 1 秒ごとに+1

/* 使い方サンプル */
<Button variant="primary" icon={<Save />} onClick={handle} />
<Button as="a" href="/settings" variant="ghost" icon={<Settings />}>
  Settings
</Button>
<Button loading iconPosition="right">
  Submitting…
</Button>

// src/components/Button/Button.tsx
import { ElementType, ComponentPropsWithRef, forwardRef, ReactNode } from 'react';
import clsx from 'clsx';

/* --------------------------- 1-1. ユーティリティ型 --------------------------- */

/** ① 既存要素の props から特定キーを除去して上書きできる型 */
type PropsOf<T extends ElementType> = Omit<
  ComponentPropsWithRef<T>,
  'as' | 'ref' | 'className' | 'children'
>;

/** ② button / a 共通の自前 props */
type BaseProps = {
  variant?: 'primary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  icon?: ReactNode;
  iconPosition?: 'left' | 'right';
  loading?: boolean;
  children?: ReactNode;
  /** Tailwind 等の自由追加スタイルは上書き可 */
  className?: string;
};

/* --------------------------- 1-2. 判別可能ユニオン --------------------------- */
type ButtonAsButton = {
  as?: 'button';
} & BaseProps &
  PropsOf<'button'>;

type ButtonAsAnchor = {
  as: 'a';
  href: string;           // href 必須！
} & BaseProps &
  PropsOf<'a'>;

type ButtonProps = ButtonAsButton | ButtonAsAnchor;

/* --------------------------- 1-3. 実装 --------------------------- */
export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
  (
    {
      as = 'button',
      variant = 'primary',
      size = 'md',
      icon,
      iconPosition = 'left',
      loading = false,
      className,
      children,
      ...rest
    },
    ref,
  ) => {
    const Comp = as; // ← ElementType

    return (
      <Comp
        ref={ref as never}
        /* loading 中は click 無効化 & aria-busy 付与 */
        disabled={as === 'button' ? loading || (rest as any).disabled : undefined}
        aria-busy={loading || undefined}
        className={clsx(
          'inline-flex items-center rounded-md font-medium',
          {
            primary:
              'bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-60',
            ghost: 'bg-transparent text-blue-600 hover:bg-blue-50',
          }[variant],
          {
            sm: 'px-2 py-1 text-sm',
            md: 'px-3 py-1.5',
            lg: 'px-4 py-2 text-lg',
          }[size],
          className,
        )}
        {...rest}
      >
        {icon && iconPosition === 'left' && (
          <span className="mr-1.5">{icon}</span>
        )}
        {children}
        {icon && iconPosition === 'right' && (
          <span className="ml-1.5">{icon}</span>
        )}
        {loading && (
          <span className="ml-1.5 animate-spin">
            {/* ここに Spinner アイコン */}
          </span>
        )}
      </Comp>
    );
  },
);
Button.displayName = 'Button';

type AlertProps =
  | { intent: 'info'; onRetry?: never }          // retry ボタン不可
  | { intent: 'error'; onRetry: () => void };    // 必須

/* 使い方 */
<Alert intent="info">Saved!</Alert>
<Alert intent="error" onRetry={retry}>Failed!</Alert>

type WithIcon<V extends boolean> = V extends true
  ? { icon: ReactNode }                     // true → 必須
  : { icon?: ReactNode };                   // false → 任意

type ChipProps<V extends boolean = false> = {
  elevated?: V;
} & WithIcon<V>;

/* elevated=true のとき “icon 必須” */
export const Chip = <V extends boolean = false>({
  elevated,
  icon,
}: ChipProps<V>) => (
  <span>{icon}</span>
);

/* ✓ OK */ <Chip elevated icon={<Star />} />
/* ✕ Error */ <Chip elevated />           // icon が必須

import {
  createContext,
  useContext,
  useReducer,
  Dispatch,
  ReactNode,
} from 'react';

/* ① 型定義 */
type Theme = 'light' | 'dark';
type Action = { type: 'TOGGLE' } | { type: 'SET'; payload: Theme };

type State = { theme: Theme };

/* ② reducer 関数（純粋関数・switch で判別可能ユニオン） */
const reducer = (s: State, a: Action): State => {
  switch (a.type) {
    case 'TOGGLE':
      return { theme: s.theme === 'light' ? 'dark' : 'light' };
    case 'SET':
      return { theme: a.payload };
  }
};

const ThemeCtx = createContext<[State, Dispatch<Action>] | null>(null);

/* ③ Provider コンポーネント */
export const ThemeProvider = ({ children }: { children: ReactNode }) => {
  const value = useReducer(reducer, { theme: 'light' }); // 初期値
  return <ThemeCtx.Provider value={value}>{children}</ThemeCtx.Provider>;
};

/* ④ カスタム Hook で“useContext”隠蔽 */
export const useTheme = () => {
  const ctx = useContext(ThemeCtx);
  if (!ctx) throw new Error('useTheme must be within <ThemeProvider>');
  return ctx;
};

const ToggleThemeButton = () => {
  const [{ theme }, dispatch] = useTheme();
  return (
    <button onClick={() => dispatch({ type: 'TOGGLE' })}>
      Switch to {theme === 'light' ? '🌙 Dark' : '☀️ Light'}
    </button>
  );
};

/* _app.tsx / main.tsx */
<ThemeProvider>
  <App />
</ThemeProvider>

pnpm add @tanstack/react-query

import { QueryClient } from '@tanstack/react-query';
export const queryClient = new QueryClient();

import { QueryClientProvider } from '@tanstack/react-query';
import { queryClient } from './queryClient';

<QueryClientProvider client={queryClient}>
  <App />
</QueryClientProvider>

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import axios from 'axios';

type Issue = { id: number; title: string; comments: number };

const fetchIssues = async () =>
  (
    await axios.get<Issue[]>(
      'https://api.github.com/repos/facebook/react/issues?per_page=10',
    )
  ).data;

export const useIssues = () =>
  useQuery({ queryKey: ['issues'], queryFn: fetchIssues, staleTime: 1000 * 60 });

/* 楽観的更新付き “Add Star” mutation */
export const useAddStar = () => {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: (id: number) =>
      axios.post(`/api/star`, { id }), // ダミー
    onMutate: async (id) => {
      await qc.cancelQueries({ queryKey: ['issues'] });
      const prev = qc.getQueryData<Issue[]>(['issues']);
      qc.setQueryData<Issue[]>(['issues'], (old) =>
        old!.map((i) => (i.id === id ? { ...i, comments: i.comments + 1 } : i)),
      );
      return { prev };
    },
    onError: (_e, _id, ctx) => qc.setQueryData(['issues'], ctx?.prev),
    onSettled: () => qc.invalidateQueries({ queryKey: ['issues'] }),
  });
};

import { useIssues, useAddStar } from '../hooks/useIssues';

export const IssueList = () => {
  const { data, isLoading, error } = useIssues();
  const addStar = useAddStar();

  if (isLoading) return <p>Loading…</p>;
  if (error) return <p>Error!</p>;

  return (
    <ul>
      {data!.map((i) => (
        <li key={i.id}>
          {i.title} ⭐{i.comments}
          <button
            disabled={addStar.isPending}
            onClick={() => addStar.mutate(i.id)}
          >
            +star
          </button>
        </li>
      ))}
    </ul>
  );
};

pnpm add swr

import useSWR from 'swr';
import axios from 'axios';

const fetcher = (url: string) => axios.get(url).then((r) => r.data);

const TodoSWR = () => {
  const { data, error } = useSWR('/api/todos', fetcher, {
    refreshInterval: 10_000,          // 10 秒ごと
  });

  if (!data) return 'Loading…';
  if (error) return 'Error';

  return data.map((t: any) => <p key={t.id}>{t.text}</p>);
};

        ┌────────────────────────────┐
        │ UI 一時的？閉じると不要？   ──► useState
        └───────────┬────────────────┘
                    ▼
        ┌────────────────────────────┐
        │ 画面横断でも API 不要？     │
        │ （テーマ・言語・認証など） │
        └── Yes: Context(+reducer) │
                    ▼ No
        ┌────────────────────────────┐
        │ サーバーソース？              │
        └── No: 他ライブラリ            │
                    ▼ Yes
        ┌────────────────────────────┐
        │ キャッシュ＆再フェッチ必須？ │
        └── Yes: TanStackQ/SWR      │

// src/components/SlowList.tsx
export const SlowList = ({ data }: { data: string[] }) => (
  <ul>
    {data.map((t) => (
      <li key={t}>{t}</li>
    ))}
  </ul>
);

type RowProps = { value: string };
const Row = React.memo<RowProps>(({ value }) => <li>{value}</li>);

export const MemoList = ({ data }: { data: string[] }) => (
  <ul>
    {data.map((t) => (
      <Row key={t} value={t} />
    ))}
  </ul>
);

pnpm add react-window

import { FixedSizeList as List } from 'react-window';

export const VirtualList = ({ data }: { data: string[] }) => (
  <List
    height={400}
    width="100%"
    itemCount={data.length}
    itemSize={30}
    itemData={data}
  >
    {({ index, style, data }) => (
      <div style={style}>{data[index]}</div>
    )}
  </List>
);

旧ツリー      新ツリー
 A             A
 ├ B           ├ C  ← key で “別” と判断
 └ C           └ B

const [text, setText] = useState('');
const [list, setList] = useState(bigArray);
const [isPending, startTransition] = useTransition();

const onChange = (e: ChangeEvent<HTMLInputElement>) => {
  const value = e.target.value;
  setText(value);             // ① すぐ反映（高優先）
  startTransition(() => {     // ② 重い計算は低優先
    const filtered = bigArray.filter((v) => v.includes(value));
    setList(filtered);
  });
};

const query = useDeferredValue(text, { timeoutMs: 200 });

import { lazy, Suspense } from 'react';

const Chart = lazy(() => import('./HeavyChart'));

<Suspense fallback={<Spinner />}>
  <Chart />
</Suspense>

pnpm add -D jest @testing-library/react @testing-library/jest-dom @testing-library/user-event \
           jest-environment-jsdom jest-axe axe-core
# ts-jest を使う場合
pnpm add -D ts-jest @types/jest

module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  transform: { '^.+\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.json' }] }, // TS の場合
};

import '@testing-library/jest-dom/extend-expect';

import { FormEvent, useState } from 'react';

type Props = { onSearch: (q: string) => void };

export const SearchBox = ({ onSearch }: Props) => {
  const [q, setQ] = useState('');
  const submit = (e: FormEvent) => {
    e.preventDefault();
    onSearch(q);
  };

  return (
    <form onSubmit={submit}>
      <label htmlFor="search-input" className="sr-only">
        Search
      </label>
      <input
        id="search-input"
        value={q}
        onChange={(e) => setQ(e.target.value)}
        placeholder="Search…"
        aria-label="Search"
      />
      <button type="submit">Go</button>
    </form>
  );
};

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { SearchBox } from '../SearchBox';

test('calls onSearch with input value', async () => {
  const user = userEvent.setup();
  const handle = vi.fn();               // vitest なら vi.fn、jest なら jest.fn

  render(<SearchBox onSearch={handle} />);

  await user.type(screen.getByRole('textbox', { name: /search/i }), 'react');
  await user.click(screen.getByRole('button', { name: /go/i }));

  expect(handle).toHaveBeenCalledWith('react');
});

import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);

test('has no a11y violations', async () => {
  const { container } = render(<SearchBox onSearch={() => {}} />);
  const result = await axe(container);
  expect(result).toHaveNoViolations();
});

pnpm dlx playwright codegen http://localhost:5173

src/
├─ app/
│  ├─ layout.tsx        ← 共有レイアウト（RSC）
│  ├─ page.tsx          ← "/" ルート (SSG)
│  ├─ dashboard/
│  │   ├─ layout.tsx    ← 区画レイアウト (RSC)
│  │   ├─ page.tsx      ← SSR（動的データ）
│  │   └─ loading.tsx   ← Streaming 用 Skeleton
│  ├─ api/
│  │   └─ hello/route.ts← Route Handler ( Edge )
│  └─ (marketing)/      ← Parallel Routes
└─ lib/
   ├─ db.ts             ← Prisma 等
   └─ github.ts         ← REST/FETCH ラッパ

import { fetchPosts } from '@/lib/github';
import Link from 'next/link';

export const revalidate = 60 * 60;          // 1 時間ごと ISR

export default async function Home() {
  const posts = await fetchPosts();         // ❶ fetch() は自動的に“兼 SSR に最適化”

  return (
    <main>
      <h1>Blog</h1>
      <ul>
        {posts.map((p) => (
          <li key={p.id}>
            <Link href={`/post/${p.slug}`}>{p.title}</Link>
          </li>
        ))}
      </ul>
    </main>
  );
}

import { fetchStats } from '@/lib/github';
import { Suspense } from 'react';
import RepoTable from './RepoTable';                // ⬅ Client Comp.

export const dynamic = 'force-dynamic';             // ❶ キャッシュ無効 → 常時 SSR

export default async function Dashboard() {
  const summary = await fetchStats();               // ❷ await OK（RSC内）

  return (
    <>
      <h2>Summary (stars)</h2>
      <p>{summary.totalStars}</p>

      {/* ❸ ネットワーク遅い API は子で更に分割 */}
      <Suspense fallback={<p>Loading table…</p>}>
        {/* @ts-expect-error Async Server Comp. */}
        <RepoTable />
      </Suspense>
    </>
  );
}

import { fetchRepos } from '@/lib/github';

export default async function RepoTable() {
  const repos = await fetchRepos(); // 1〜2 秒かかる想定
  return (
    <table>
      <tbody>
        {repos.map((r) => (
          <tr key={r.id}>
            <td>{r.name}</td>
            <td>{r.stargazers_count}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default function Loading() {
  return <p>Generating dashboard…</p>;
}

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

export function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

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

export default function Page() {
  // Server 部分でデータ取得
  return <Counter />; // 自動的にバンドル分割 & hydration
}

import { NextRequest, NextResponse } from 'next/server';

export const runtime = 'edge';               // ❶ Cloudflare Worker 相当

export async function GET(_req: NextRequest) {
  return NextResponse.json({ msg: 'Hello 👋' });
}