React実装のベストプラクティス、コーディング規約、パターン集です。保守性が高く、パフォーマンスに優れたReactアプリケーションを構築するための知識ベースとして活用してください。

🎯 Core Principles（コア原則）

1. Component Design（コンポーネント設計）

2. Hooks Best Practices（Hooksのベストプラクティス）

3. State Management（状態管理）

4. Performance（パフォーマンス）

📚 React Patterns（詳細パターン集）

詳細なコード例とパターンについては、PATTERNS.mdを参照してください。

Quick Reference

関数コンポーネントとProps型定義

typescript

// ✅ Props型を明確に定義
interface UserCardProps {
  user: User;
  onEdit?: (user: User) => void;
  isLoading?: boolean;
}

// ✅ 関数コンポーネント（名前付きエクスポート推奨）
export function UserCard({ user, onEdit, isLoading = false }: UserCardProps) {
  const handleEdit = () => {
    if (onEdit) {
      onEdit(user);
    }
  };

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <button onClick={handleEdit}>Edit</button>
    </div>
  );
}

カスタムフック

typescript

// ✅ カスタムフックで共通ロジックを抽出
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(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        const response = await fetch(url);
        if (!response.ok) throw new Error('Fetch failed');
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err instanceof Error ? err : new Error('Unknown error'));
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

useReducer でのステート管理

typescript

// ✅ 複雑な状態はuseReducerで管理
interface State {
  count: number;
  user: User | null;
  isLoading: boolean;
}

type Action =
  | { type: 'INCREMENT' }
  | { type: 'SET_USER'; payload: User }
  | { type: 'SET_LOADING'; payload: boolean };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'SET_USER':
      return { ...state, user: action.payload };
    case 'SET_LOADING':
      return { ...state, isLoading: action.payload };
    default:
      return state;
  }
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, {
    count: 0,
    user: null,
    isLoading: false,
  });

  return (
    <button onClick={() => dispatch({ type: 'INCREMENT' })}>
      Count: {state.count}
    </button>
  );
}

Context API でのグローバル状態管理

typescript

// ✅ Context でグローバル状態を管理
interface ThemeContextType {
  theme: 'light' | 'dark';
  toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');

  const toggleTheme = () => {
    setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// カスタムフックでContextを利用
export function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within ThemeProvider');
  }
  return context;
}

パフォーマンス最適化

typescript

// ✅ React.memo で不要な再レンダリングを防ぐ
export const ExpensiveComponent = React.memo(function ExpensiveComponent({
  data,
}: {
  data: string;
}) {
  return <div>{data}</div>;
});

// ✅ useCallback でコールバック関数をメモ化
function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []); // 依存配列が空なので関数は再生成されない

  return <ChildComponent onClick={handleClick} />;
}

// ✅ useMemo で高コストな計算をメモ化
function DataDisplay({ items }: { items: Item[] }) {
  const sortedItems = useMemo(() => {
    return items.sort((a, b) => a.name.localeCompare(b.name));
  }, [items]);

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

✅ Quality Standards（品質基準）

実装したReactコードは以下の基準を満たす必要があります：

🔍 Code Review Checklist（コードレビューチェックリスト）

🎓 Learning Resources

このスキルの使い方: React実装時にこのスキルを参照して、ベストプラクティスと品質基準に従ったコンポーネントを書いてください。TypeScript基本については /ts-implement スキルを併用してください。

react-implement

React Implementation Best Practices

🎯 Core Principles（コア原則）

1. Component Design（コンポーネント設計）

2. Hooks Best Practices（Hooksのベストプラクティス）

3. State Management（状態管理）

4. Performance（パフォーマンス）

📚 React Patterns（詳細パターン集）

Quick Reference

関数コンポーネントとProps型定義

カスタムフック

useReducer でのステート管理

Context API でのグローバル状態管理

パフォーマンス最適化

✅ Quality Standards（品質基準）

🔍 Code Review Checklist（コードレビューチェックリスト）

🎓 Learning Resources