問題一覧に戻る
上級テストとベストプラクティス
問題103: Reactベストプラクティス

ファイル構成と命名規則のReactベストプラクティスを学びます。コンポーネント、フック、ユーティリティ、型を明確に分離してコードを構造化します。一貫した命名パターンに従います：フックにはuseXxx、コンポーネントにはPascalCase、ユーティリティにはcamelCase。適切な構成により保守性とチーム協力が向上します。

// File: hooks/useAuth.ts
{/* カスタムフックの命名 */}
export function () {
  const [user, setUser] = useState(null);
  return { user, setUser };
}

// File: components/Button.tsx
{/* コンポーネントの命名 */}
interface Props {
  onClick: () => void;
  children: React.ReactNode;
}

export function Button({ onClick, children }: ButtonProps) {
  return <button onClick={onClick}>{children}</button>;
}

// File: utils/formatDate.ts
{/* ユーティリティ関数 */}
export const  = (date: Date): string => {
  return date.toLocaleDateString();
};

// File: types/user.ts
{/* 型定義 */}
export interface  {
  id: string;
  name: string;
  email: string;
}