React Frontend

Hooks活用

useState

const [count, setCount] = useState(0);

useEffect

useEffect(() => {
  // 副作用（API呼び出し、購読など）
  fetchData();

  return () => {
    // クリーンアップ
  };
}, [dependency]); // 依存配列

useCallback

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b], // 依存配列
);

useMemo

const expensiveValue = useMemo(
  () => computeExpensiveValue(a, b),
  [a, b]
);

Custom Hooks

function useFetch<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err);
        setLoading(false);
      });
  }, [url]);

  return { data, loading, error };
}

状態管理

ローカル状態（useState）

• コンポーネント内部のみで使う状態

グローバル状態（Context API、Zustand、Recoil）

• 複数コンポーネントで共有する状態

サーバー状態（React Query、SWR）

• APIから取得するデータ

import { useQuery } from '@tanstack/react-query';

function Users() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: () => fetch('/api/users').then(res => res.json())
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return <ul>{data.map(user => <li key={user.id}>{user.name}</li>)}</ul>;
}

パフォーマンス最適化

• React.memo: 不要な再レンダリング防止
• useCallback/useMemo: 関数・値のメモ化
• Code Splitting: React.lazy、動的import
• 仮想化: 大量リストの表示（react-window）

アクセシビリティ（a11y）

• セマンティックHTML: <button>, <nav>, <main>など
• aria属性: スクリーンリーダー対応
• キーボード操作: Tabキー、Enterキーで操作可能に

テスト

• Unit Test: React Testing Library
• E2E Test: Playwright、Cypress
• Visual Regression Test: Storybook + Chromatic