.cursorrules

# コーディングのルール

あなたは TypeScript、Node.js、Next.js App Router、React、Tailwind のエキスパートです。

## コードスタイルと構造

- 関数型・宣言型プログラミングパターンを使用し、クラスは避ける。
- 補助動詞を用いた分かりやすい変数名を使用する（例：isLoading、hasError）。
- ファイルの構造は、エクスポートされたコンポーネント、サブコンポーネント、ヘルパー、静的コンテンツ、型を順に配置すること。
- 原則、変数は `const` を使用し、`let` は可能な限り避ける。
- `lodash` を積極的に使用し、可読性を向上させること。
  - chain method を使い、ネストを浅くする事
- Early Return を積極的に使用すること。
- if に続く処理が一行で書ける場合は、括弧を省略すること。
- 高速であるよりも可読性を重視すること。
- 変数のスコープは最小限にすること。
- 関数の長さはできるだけ 100 行以内に抑えること。それより長くなる場合は、関数を分割を検討すること。
- 一目で理解するのが難しいコードは、コメントを追加すること。コメントは日本語で記述すること。

### Promise.all の使い方

`Promise.all` の引数内で Array<Promise> を生成する場合は、`_.chain` を使用してネストを浅くすること。

```ts
await _(foo)
  .map((v: any) => {
    doSomething(v)
    return v
  })
  .thru((t) => Promise.all(t))
  .value()
```

### Prettier の設定
  - semi: false
  - tabWidth: 2
  - singleQuote: true
  - jsxSingleQuote: true
  - bracketSameLine: true

## 命名規則

- 変数は原則として camelCase を使用する。
- 環境変数や固定値には `SCREAMING_SNAKE_CASE` を使用する（例：`API_BASE_URL`、`MAX_RETRIES`）。
- ディレクトリは小文字とダッシュを使用する（例：`components/auth-wizard`）。
- コンポーネントには名前付きエクスポートを推奨する。
- コンポーネントファイル名とコンポーネント名を一致させる（例：`Button.tsx` に `Button` コンポーネントをエクスポート）。

## TypeScript

- すべてのコードで TypeScript を使用すること。
- 簡潔かつ技術的な TypeScript コードを書き、正確な例を提供すること。
- TypeScript インターフェースを使用して関数型コンポーネントを記述する。
- TypeScript の型推論を使用し、型アノテーションを最小限に抑える。
- システム共通の型定義は `types/` ディレクトリに配置し、必要に応じてインポートする。
- 各コンポーネント固有の型定義
  - ファイルが一つしかない場合は、当該ファイル内に記述する。
  - ファイルが複数ある場合は、コンポーネントディレクトリ内に `types.ts` として配置する。
- オブジェクトの構造を定義する場合は `interface` を使用する。
- ユニオン型やタプルなど、インターフェースでは表現しにくい型には `type`を使用する。

## React

- 最新のモダンな React の構文を採用すること。
- 宣言的な JSX を使用すること。
- 不要なレンダリングを避けるため、React のメモ化（`React.memo`）や `useCallback`、`useMemo` を適切に使用すること。
- `use client`、`useEffect`、`setState` の使用を最小限にし、React サーバーコンポーネント (RSC) を推奨する。
- クライアントコンポーネントは `Suspense` でラップし、フォールバックを設定する。
- 非重要なコンポーネントは動的ロードを使用すること。
- `use client` の使用を制限する：
  - サーバーコンポーネントと Next.js の SSR を優先すること。
  - 小さなコンポーネントで Web API にアクセスする場合のみ使用する。
  - データ取得や状態管理には使用しない。
- グローバルな状態管理が必要な場合は、React Context を使用することを推奨する。
- URL の検索パラメータの状態管理には `nuqs` を使用すること。
- データ取得には TanStack Query の `useQuery` と `axios` を組み合わせて使用すること。

## UI とスタイリング

- コンポーネントとスタイリングには Tailwind を使用すること。
- Tailwind CSS を用いてレスポンシブデザインを実装し、モバイルファーストのアプローチを取ること。
- コンポーネント固有のスタイルは、ユーティリティクラスを組み合わせて記述する。
- 複雑なスタイルが必要な場合は、`@apply` ディレクティブを使用してカスタムクラスを定義する。

## パフォーマンス最適化

- Web Vitals（LCP、CLS、FID）の最適化を行うこと。
- 画像は WebP や AVIF 形式を使用し、遅延読み込みを実装すること。
- ネットワークアクセスなどパフォーマンスに影響を与える処理は、Sentry を用いて処理時間を計測すること。

## バリデーション

- データのバリデーションは `zod` を使用して検証すること。
- `zod` を使用して、API リクエストやフォーム入力のスキーマを定義する。
- スキーマ定義は `schemas/` ディレクトリに配置し、再利用可能なスキーマを作成する。
- バリデーションエラーは、ユーザーに対して適切なフィードバックを提供するために、エラーメッセージを明確に定義する。

## エラーハンドリング

- 意図しない例外やエラーが発生した場合は `console.error` を使用してエラーをログに記録すること。
- 同時に、`Sentry` を使用してエラーをログに記録すること。

## API

- 外部のデータ取得には `axios` を使用すること。

## 時間の扱い

- 時間の扱いには `luxon` を使用すること。
- 時間のフォーマットには原則として ISO8601 を使用すること。

## テスト

- ユニットテストには Jest を使用すること。
- コンポーネントのテストには React Testing Library を使用すること。
- E2E テストには Cypress を推奨する。
- テストカバレッジは 80%以上を目指すこと。

Next.js の公式ドキュメントに従い、データフェッチ、レンダリング、ルーティングを実装してください。