Reactのコーディングガイドライン

📄 react-guidelines.mdc

# React コーディングガイドライン

このプロジェクトでは、以下のReactに関するコーディングルールを守ってください。

---

## ✅ 使用するもの

- **関数コンポーネント（Functional Components）**  
  React コンポーネントは必ず関数コンポーネントで作成してください。

- **フック（Hooks）**  
  状態管理や副作用処理は `useState`、`useEffect`、その他の React Hooks を使用してください。

- **型定義（TypeScript）**  
  コンポーネントの props や state は必ず TypeScript で型を定義してください。

---

## ❌ 禁止事項

- クラスコンポーネントの使用を禁止します。

- `any` 型の使用を禁止します。

- インラインスタイルの乱用を禁止します。スタイルは必ず CSS モジュール、styled-components、または MUI の sx プロパティを使ってください。

---

## 💡 コード例

```tsx
// ✅ 正しい例：関数コンポーネントとHooks
type ButtonProps = {
  label: string
  onClick: () => void
}

const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
  const [count, setCount] = useState(0)

  return (
    <button
      onClick={() => {
        setCount(count + 1)
        onClick()
      }}
    >
      {label} ({count})
    </button>
  )
}
```

```tsx
// ❌ NG例：クラスコンポーネント
class Button extends React.Component {
  state = { count: 0 }

  render() {
    return (
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        {this.props.label} ({this.state.count})
      </button>
    )
  }
}
```

---

## 🛠 注意事項

- グローバル状態管理には `Redux` または `React Context` を使用してください。
- API 呼び出しは `apiClient.ts` を経由してください。
- 新規コンポーネントを作成する場合は `components/` ディレクトリに配置してください。

---

### 📦 保存場所例

.your-project/
├── .cursor/
│ └── rules/
│ └── react-guidelines.mdc